/*
 * Copyright 2017 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.
 */

button.soft-dropdown {
  height: 26px;
  text-align: left;
  position: relative;
  border: none;
  background: none;
}

button.soft-dropdown[disabled] {
  opacity: 50%;
}

button.soft-dropdown > .title {
  padding-right: 5px;
  flex: 0 1 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.soft-dropdown:focus-visible::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 2px;
  background: var(--divider-line);
}

@media (forced-colors: active) {
  button.soft-dropdown {
    border: 1px solid ButtonText;
  }

  button.soft-dropdown[disabled] {
    opacity: 100%;
  }

  button.soft-dropdown:disabled > .smallicon-triangle-down {
    background-color: GrayText;
  }
}

/*
 * Copyright 2017 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.
 */

button.soft-dropdown {
  height: 26px;
  text-align: left;
  position: relative;
  border: none;
  background: none;
}

button.soft-dropdown[disabled] {
  opacity: 50%;
}

button.soft-dropdown > .title {
  padding-right: 5px;
  flex: 0 1 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (forced-colors: active) {
  button.soft-dropdown {
    border: 1px solid ButtonText;
  }

  button.soft-dropdown[disabled] {
    opacity: 100%;
  }

  button.soft-dropdown:disabled > .smallicon-triangle-down {
    background-color: GrayText;
  }
}

Fix background color for console context dropdown

The CSS rule button.soft-dropdown:focus-visible::before
is redundant to .toolbar-item.highlight::before. Removing it
fixes issue 1264372 and does not affect other use sites of
SoftDropDown.

R=75d1eae50692fe1e75f263dbfd52feffc9e7984f@chromium.org

Fixed:1264372
Change-Id: I8939258d4f3b705638593270c0951abcdf048142
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3252951
Reviewed-by: Nancy Li <75d1eae50692fe1e75f263dbfd52feffc9e7984f@chromium.org>
Commit-Queue: Yang Guo <1cf0af8245a3a17a632a2c73531392b0f9761c76@chromium.org>


body {
    font-family: sans-serif;
}
.header {
    margin: 10px;
    margin-bottom: 20px;
    font-size: larger;
    padding: 8px;
    vertical-align: top;
}
.logo {
    float: left;
    margin: 5px;
    margin-right: 15px;
    border: none;
}

h3 { font-size: 90%; margin-bottom: 5px; }
.form_input_row { margin: 10px; }
.form_input_row label { font-weight: bold; }

div.main {clear: both; }
p { margin: 10px; line-height: 125%; }
.note {
    font-size: smaller;
    font-style: italic;
    font-weight: normal;
}

table.highlighttable {
    border-top: solid black 1px;
    border-bottom: solid black 1px;
}
pre {
    font-size: 14px;
    line-height: 125%;
}
td.linenos {
    text-align: right;
    padding: 0 7px;
    background: #ccc;
}

.wrap {
    white-space: pre-wrap;
}

body {
    font-family: sans-serif;
}
.header {
    margin: 10px;
    margin-bottom: 20px;
    font-size: larger;
    padding: 8px;
    vertical-align: top;
}
.logo {
    float: left;
    margin: 5px;
    margin-right: 15px;
    border: none;
    max-width: 300px;
}

h3 { font-size: 90%; margin-bottom: 5px; }
.form_input_row { margin: 10px; }
.form_input_row label { font-weight: bold; }

div.main {clear: both; }
p { margin: 10px; line-height: 125%; }
.note {
    font-size: smaller;
    font-style: italic;
    font-weight: normal;
}

table.highlighttable {
    border-top: solid black 1px;
    border-bottom: solid black 1px;
}
pre {
    font-size: 14px;
    line-height: 125%;
}
td.linenos {
    text-align: right;
    padding: 0 7px;
    background: #ccc;
}

.wrap {
    white-space: pre-wrap;
}

Set a max width on the logo image

Set a max width on the logo image


.history {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
}

.history__item {
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-top: 5px;
  vertical-align: top;
  width: 150px;
}
.history__item:hover {
  text-decoration: none;
}

.history__item__image {
  width: 100%;
}

.history__item__link {
  color: #fff;
  margin-top: -10px;
  white-space: pre-line;
  width: 150px;
}

.history {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
}

.history__item {
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-top: 5px;
  vertical-align: top;
  width: 150px;
}
.history__item:hover {
  text-decoration: none;
}

.history__item__image {
  width: 100%;
}

.history__item__link {
  color: #fff;
  white-space: pre-line;
  width: 150px;
}

Fix margin for production build

Fix margin for production build


.fixed-height-card{
    border-radius: 20px;
    margin-left: 10px;
    min-height: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.card-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    height: 50vh;
}
.no-box{
    border: 0 solid;
    background: none;
}
.emph {
  color: red;
}
.hover-red:hover {
  color: hsl(14, 100%, 53%);
}
.hover-blue:hover {
  color: hsl(217, 71%, 53%)
}

.fixed-height-card{
    border-radius: 20px;
    margin-left: 10px;
    min-height: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.card-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    height: 50vh;
}
.no-box{
    border: 0 solid;
    background: none;
}
.emph {
  color: red;
}
.hover-red:hover {
  cursor: pointer;
  color: hsl(14, 100%, 53%);
}
.hover-blue:hover {
  cursor: pointer;
  color: hsl(217, 71%, 53%)
}

Change cursor to pointer on hover

Change cursor to pointer on hover


#toplogo {
    height: 85%;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 3px;
}

.navbar-brand {
    padding: 0px;
}

.dropdown-form {
    height: 300%;
    width: 400%;
}

.ui-autocomplete {
    z-index: 100 !important;
}

.footer {
    color: aquamarine;
}

.sign-form{
    height: 50%;
    margin-left:10px;

}

.glyphicon.glyphicon-record{
    color: palegreen;

}

#datetimepicker{
    padding-top: 20px;
}

#toplogo {
    height: 85%;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 3px;
}

.navbar-brand {
    padding: 0px;
}

.dropdown-form {
    height: 300%;
    width: 400%;
}

.ui-autocomplete {
    z-index: 100 !important;
}

.footer {
    color: aquamarine;
}

#map{
    border: 1px solid #ccc;
}

.sign-form{
    height: 50%;
    margin-left:10px;

}

.glyphicon.glyphicon-record{
    color: palegreen;

}

#datetimepicker{
    padding-top: 20px;
}

Add border to the map

Add border to the map


.hx-dropdown {
  background: var(--dropdown-background-color);
  box-shadow: 0px 2px 2px 2px var(--dropdown-shadow-color);
  border-color: var(--dropdown-border-color);
  border-radius: var(--dropdown-border-radius);
}

.hx-dropdown-up {
  margin-bottom: var(--dropdown-spacing);
}

.hx-dropdown-down {
  margin-top: var(--dropdown-spacing);
}

.hx-dropdown-left {
  margin-right: var(--dropdown-spacing);
}

.hx-dropdown-right {
  margin-left: var(--dropdown-spacing);
}

.hx-dropdown {
  background: var(--dropdown-background-color);
  box-shadow: 0px 2px 2px 2px var(--dropdown-shadow-color);
  border-color: var(--dropdown-border-color);
  border-radius: var(--dropdown-border-radius);
}

.hx-dropdown-up {
  margin-bottom: calc(-1 * var(--dropdown-spacing));
}

.hx-dropdown-down {
  margin-top: var(--dropdown-spacing);
}

.hx-dropdown-left {
  margin-right: var(--dropdown-spacing);
}

.hx-dropdown-right {
  margin-left: var(--dropdown-spacing);
}

Remove dropdown bottom positioning (--dropdown-spacing fix)


@charset "utf-8";
/* -----------------------------------------------

others

----------------------------------------------- */
.disc{
	background:#ffffff;
	margin: 20px 20px 20px 20px;
	padding: 0 0 0 0;
	font-size: small;
}
.disc h3{
	text-decoration: underline;
}
.disc h3{
	text-decoration: underline;
}
.disc DL{
	font-size: 93%;
	line-height: 1.8em;
}
.contactTxt{
	font-size: 93%;
	line-height: 1.8em;
}
.contactTxt a{
	color:#1111cc;
	text-decoration: underline;
}
p.right {
	text-align: right;
	margin-bottom: 10px;
}
.date {
    color:#999999;
    font-size:0.9em;
}

@charset "utf-8";
/* -----------------------------------------------

others

----------------------------------------------- */
ul li {
  padding-top:4px;
  padding-bottom:4px;
}

.disc{
	background:#ffffff;
	margin: 20px 20px 20px 20px;
	padding: 0 0 0 0;
	font-size: small;
}
.disc h3{
	text-decoration: underline;
}
.disc h3{
	text-decoration: underline;
}
.disc DL{
	font-size: 93%;
	line-height: 1.8em;
}
.contactTxt{
	font-size: 93%;
	line-height: 1.8em;
}
.contactTxt a{
	color:#1111cc;
	text-decoration: underline;
}
p.right {
	text-align: right;
	margin-bottom: 10px;
}
.date {
    color:#999999;
    font-size:0.9em;
}

Add list margin for html

Add list margin for html


.fill-height {
    height: 100%;
}

.row {
    margin: 0 0 20px 0;
    overflow: hidden;
}

.row [class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

h4 {
    margin-top: 24px;
}

 .big-button{
     margin: 8px 0;
     min-height: 64px;
     min-width: 164px;
 }

.fill-height {
    height: 100%;
}

.row {
    margin: 0 0 20px 0;
    overflow: hidden;
}

.rightpanel-tabs > .row {
    overflow: visible;
}

.row [class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

h4 {
    margin-top: 24px;
}

 .big-button{
     margin: 8px 0;
     min-height: 64px;
     min-width: 164px;
 }

Fix section dropdown menu not showing

Fix section dropdown menu not showing


.header {
  margin-bottom: 30px;
  position: relative;
}

.header h1{
  font-size: 30px;
  margin-bottom: 10px;
}

.header a{
  text-decoration: none;
}

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

.header h3{
  font-size: 20px;
  font-family: 'Georgia';
  color:#888;
}

.header::after{
  content: " ";
  width: 100px;
  position: absolute;
  bottom: -17px;
  left: 0;
  border-bottom: 5px solid #2C9140;
}

Add missing line at end of file

Add missing line at end of file


.aqm1 { }
.aqm2 { }
.aqm3 { }
.aqm4 { }
.aqm5 { }
.aqm6 { }
.aqm7 { }
.aqm8 { }
.aqm9 { }
.aqm10 { }
.aqm11 { }
.aqm12 { }
.aqm13 { }
.aqm14 { }
.aqm15 { }
.aqm16 { }
.aqm17 { }
.aqm18 { }
.aqm19 { }
.aqm20 { }

#qc-content h1 {
    text-align: center;
}

#arraymetadata-b table {
    width: 100%;
}

h1 {
    text-align: center;
}

table {

    border-collapse: collapse;
    background-color: #ffffff;
    border-color: #ffffff;
    font-size: small;
    width: auto;
}

table td {
    padding: 0 2px;
    border: none;
}

li.tocsection {
   font-weight: bold;
   font-size: 12pt
}
li.tocmodule {
   font-size: 11pt
}

.aqm1 { }
.aqm2 { }
.aqm3 { }
.aqm4 { }
.aqm5 { }
.aqm6 { }
.aqm7 { }
.aqm8 { }
.aqm9 { }
.aqm10 { }
.aqm11 { }
.aqm12 { }
.aqm13 { }
.aqm14 { }
.aqm15 { }
.aqm16 { }
.aqm17 { }
.aqm18 { }
.aqm19 { }
.aqm20 { }

#qc-content h1 {
    text-align: center;
}

#arraymetadata-b table {
    width: 100%;
}

table {

    border-collapse: collapse;
    background-color: #ffffff;
    border-color: #ffffff;
    font-size: small;
    width: auto;
}

table td {
    padding: 0 2px;
    border: none;
}

li.tocsection {
   font-weight: bold;
   font-size: 12pt
}
li.tocmodule {
   font-size: 11pt
}

Fix Expression Atlas header position in quality metrics pages


div label {
    margin-bottom: 0px;
}

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

.ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
}

.ck-button label {
    width:40.0em;
}

.ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

.ck-button input:checked + span {
    background-color:#B576AD;
    color:#fff;

}
input[type=checkbox].hidden{
	display:none;
}

div label {
    margin-top: -2px;
    margin-bottom: -2px;
}

div label input {
   margin-right:100px;
}

body {
    font-family:sans-serif;
}

.ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:hidden;
}

.ck-button label {
    width:40.0em;
}

.ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

.ck-button input:checked + span {
    background-color:#B576AD;
    color:#fff;

}
input[type=checkbox].hidden{
	display:none;
}

Add Kevin's fixes for custom menu page

Add Kevin's fixes for custom menu page


.window-manifest-navigation > .mirador-btn.mirador-icon-canvas-link {
  color: #929191;
  margin-right: 5px;
}

#canvasLinkModal #canvasLink {
  box-sizing: border-box;
  height: 33px;
  padding: 6px;
  width: calc(100% - 45px);
}

#canvasLinkModal #copyToClipboard {
  height: 34px;
  width: 40px;
}

.window-manifest-navigation > .mirador-btn.mirador-icon-canvas-link {
  color: #929191;
  margin-right: 5px;
}

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

#canvasLinkModal #canvasLink {
  box-sizing: border-box;
  height: 33px;
  padding: 6px;
  width: calc(100% - 45px);
}

#canvasLinkModal #copyToClipboard {
  height: 34px;
  width: 40px;
}

Add styles for a consistent design of the window buttons


.selectedIcon:before {
  font-family: FontAwesome;
  content: "\f046";
}

.emptyIcon:before {
  font-family: FontAwesome;
  content: "\f096";
}

.basemapsIcon:before {
  font-family: FontAwesome;
  content: "\f009";
}

/* condense dropdown on small screens */

@media (max-width: 768px) {
  .cmv .map .basemapWidget .dijitDropDownButton .dijitButtonNode {
    padding: 4px 8px;
  }
  .cmv .map .basemapWidget .dijitButtonText {
    display: none;
  }
}

.basemapWidget .selectedIcon:before {
  font-family: FontAwesome;
  content: "\f046";
}

.basemapWidget .emptyIcon:before {
  font-family: FontAwesome;
  content: "\f096";
}

.basemapWidget .basemapsIcon:before {
  font-family: FontAwesome;
  content: "\f009";
}

/* condense dropdown on small screens */

@media (max-width: 768px) {
  .cmv .map .basemapWidget .dijitDropDownButton .dijitButtonNode {
    padding: 4px 8px;
  }
  .cmv .map .basemapWidget .dijitButtonText {
    display: none;
  }
}

Add additional basemapWidget scope to css


/** This can be your default scrollbar class.  You must use !important to override the default inline styles */
.scrollBar {
   position:absolute !important;
   width:5px !important;
   height:20px !important;
   border-radius:2px !important;
   border:1px soldid black !important;
   background:black !important;
   opacity:0 !important;
}

/** This can be your default scrollbar class.  You must use !important to override the default inline styles */
.scrollBar {
    position: absolute !important;
    width: 5px !important;
    height: 20px !important;
    border-radius: 2px !important;
    border: 1px solid black !important;
    background: black !important;
    opacity: 0 !important;
}

Fix default scrollbar css typo

Fix default scrollbar css typo

also reformatted to conform formatting


body > .container {
  padding-top: 56px;
}

#site-footer {
  color: #333;
  font-size: 80%;
  margin: 5em 0;
}

#site-footer p {
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  .navbar > .container .navbar-brand {
    margin-left: -15px;
  }
}

.container {
  max-width: 768px;
}

article footer {
  border-top: 1px solid #eee;
  font-size: 80%;
  margin: 48px 0;
  padding: 11px 0 0;
}

.codehilite pre {
  overflow: auto;
  white-space: pre;
}

Make so code snippets don't wrap

Make so code snippets don't wrap


.hig__toast {
  display: flex;
  flex-flow: column;
  justify-content: center;

  width: 340px;
  min-height: 53px;
  padding: 6px 6px 6px 28px;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .5); /* TODO: restore color map for hig-react */
  border-radius: 4px;
  border-left: 3px solid transparent;
}

.hig__toast--primary {
  border-color: #0696d7;
}

.hig__toast--success {
  border-color: #87bc40;
}

.hig__toast--danger {
  border-color: #ee4444;
}
.hig__toast--warning {
  border-color: #faa21b;
}

.hig__toast__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hig__toast__message {
  line-height: 36px; /* TODO: temporarily to match the current height of the IconButton */
}

.hig__toast {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: center;

  width: 340px;
  min-height: 53px;
  padding: 6px 6px 6px 28px;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .5); /* TODO: restore color map for hig-react */
  border-radius: 4px;
  border-left: 3px solid transparent;
}

.hig__toast--primary {
  border-color: #0696d7;
}

.hig__toast--success {
  border-color: #87bc40;
}

.hig__toast--danger {
  border-color: #ee4444;
}
.hig__toast--warning {
  border-color: #faa21b;
}

.hig__toast__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hig__toast__message {
  padding: 7px 0; /* Aligns first line of message to match the IconButton height */
}

Align message with IconButton height

Align message with IconButton height


*{
  background-color: #FFFFE0;
}

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

/*h1{
  font-family: Arial, Verdana, sans-serif;
  position: relative;
  text-align: center;
}*/

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

#Strings{
  height: 50px;
}

#Integers{
  height: 50px;
}

#Arrays{
  height: 100px;
}

#Hashes{
  height: 100px;
}

*{
  background-color: #FFFFE0;
}

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

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

#Strings{
  height: 50px;
}

#Integers{
  height: 50px;
}

#Arrays{
  height: 100px;
}

#Hashes{
  height: 100px;
}

Edit css to swap class/id calls

Edit css to swap class/id calls


html {
  background-color: #ffffff;
  color: #000080;
}

a:link {
    color:#800080;
}
a:visited {
    color:#ff0000;
}
ul > p {
	font-size: .6em;
}
h2 {
    font-weight:bold;
    font-size: 1.25em;
    text-align:center;
}
h2 span {
	font-size: 2.25em;
}
h5 {
    font-weight:bold;
    text-align:center;
    margin-top: -1em;
}
h4 {
    font-weight:bold;
    text-align:center;
    margin-top: -1em;
}
.line {
	width: 100%;
	height: 1px;
	background: #d3d5d3;
}
section {
	text-align: center;
}

/*
What is important to know when linking an external file (like a stylesheet) to an HTML file?

I learned how to navigate to a different directory when linking, which was pretty cool. It makes sense that you need to back out of your current directory before being able to access the files contained in another, but I had never done it before. It makes a lot of sense. I think that was very important to learn, because I'm sure not all files that I want linked will be contained within the same directory.

What tricks did you use to help you with positioning? How hard was it to get the site as you wanted it?

We had to completely restructure our HTML from an unordered list into a table in order to get positioning right. I don't know if there was a better way, but none of the "tricks" we found were fruitful in application. It was extremely hard to format the site the way we wanted, and probably took the longest out of every step in the challenge.

What CSS did you use to modify the element style (like size, color, etc.)

We used CSS for all formatting: centering, alignment, bold, color, font, and font size. We used HTML in order to get two columns in our format because none of the CSS we tried to use to do the same thing worked.

Did you modify the HTML to include classes or ids? If so, which did you chose and why? If you didn't, how would you know which one to add to your HTML?

We did create a class in order to get the horizontal lines to work. We made special <div>s on our HTML where we wanted our lines to go. That made the most sense to us since we couldn't just add it in the HTML itself.

When you compared your site to the actual code base, which do you think had cleaner code that followed best practices and why?
Our code definitely seemed cleaner. Theirs being in HTML, they had to apply a lot of similar changes to similar elements over and over again, whereas in CSS we only had to make one element to apply to a certain tag. The latter way is much more efficient, albeit more frustrating to get right at times. From what I've seen so far, using CSS for anything styling related is considered best practice, and with a bit of practice, will probably be a little less frustrating than it was today.
*/

Create CSS for my-berkshire site

Create CSS for my-berkshire site


/*

  BOX SIZING

*/

html,
body,
div,
article,
section,
main,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1,h2,h3,h4,h5,h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
textarea,
table,
td,
th,
tr,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="url"],
.border-box {
  box-sizing: border-box;
}

/*

  BOX SIZING

*/

html,
body,
div,
article,
aside,
section,
main,
nav,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1,h2,h3,h4,h5,h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
blockquote,
figcaption,
figure,
textarea,
table,
td,
th,
tr,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="url"],
.border-box {
  box-sizing: border-box;
}

Add block elements to box-sizing module

Add block elements to box-sizing module

Include `aside`, `nav`, `blockquote`,  `figcaption`, and `figure` block elements in the box-sizing module.


body {
  background-color: #3193e8;
  background-image:none;
  color:#43FFF8;
}
main p {
  font-size: 16px;
}
h1 {
  color:#4EFF32;
}
main {
  margin: auto;
}

main section {
  max-width: 75%;
  text-align:center;
  margin: auto;
}
#fixed {
  position: fixed;
  bottom:25%;
  right:15px;
  border:2px solid black;
  font-size:16px;
  background-color:#31E87F;
  color:#363DFF;
}

body {
  background-color: #3193e8;
  background-image:none;
  color:#43FFF8;
}
main p {
  font-size: 16px;
}
code {
  font-size:16px;
}
h1 {
  color:#4EFF32;
}
main {
  margin: auto;
}

main section {
  max-width: 75%;
  text-align:center;
  margin: auto;
}
#fixed {
  position: fixed;
  bottom:25%;
  right:15px;
  border:2px solid black;
  font-size:16px;
  background-color:#31E87F;
  color:#363DFF;
}

Add link to ruby post

Add link to ruby post


.Tile {
  cursor: pointer;
  border-radius: 3px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.Tile {
  cursor: pointer;
  border-radius: 3px;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Add one more css selector.

Add one more css selector.


.notification-box {
  width: 20%;
  text-align: center;
  padding: 2vw;
  margin: 1vw;
  z-index: 999;
  position: fixed;
  box-shadow: var(--menu-shadow);
  background-color: var(--jd-yellow);
}

.notification-box span {
  color: black;
}

.notification-box {
  width: 20%;
  text-align: center;
  padding: 2vw;
  margin: 1vw;
  z-index: 999;
  position: fixed;
  top: 10px;
  right: 10px;
  box-shadow: var(--menu-shadow);
  background-color: var(--jd-yellow);
}

.notification-box span {
  color: black;
}

Move notification box to top right corner


.passport {
  width: 300px;
}

.passport-empty {
  max-width: 240px !important;
}

.prevent-overflow {
  overflow: hidden;
}

.prevent-wrap {
  white-space: nowrap;
}

.show-ellipsis {
  text-overflow: ellipsis;
}

Add styling for Passport & EmptyPassport


h1 {
  text-transform: capitalize;
}

h2 {
  text-transform: capitalize;
}

h3 {
  text-transform: capitalize;
}

h4 {
  text-transform: capitalize;
}

div.tip {
  margin-left : 5%;
  margin-right : 5%;
  padding-left: 2%;
  padding-right: 2%;
  background-color: Silver;
  color:Black;
  border: ridge;
}

#bannerLeft img {
  float:left;
  position: relative;
  top: 18px;
  left: 40px;

}

#banner {
  border-bottom: 1px solid #fff;
  background: url("../images/banner.jpg") repeat scroll 0% 0% transparent;
}

h1 {
  text-transform: capitalize;
}

h2 {
  text-transform: capitalize;
}

h3 {
  text-transform: capitalize;
}

h4 {
  text-transform: capitalize;
}

div.tip {
  margin-left : 5%;
  margin-right : 5%;
  padding-left: 2%;
  padding-right: 2%;
  background-color: Silver;
  color:Black;
  border: ridge;
}

#bannerLeft img {
  float:left;
  position: relative;
  top: 18px;
  left: 40px;

}

#banner {
  border-bottom: 1px solid #fff;
  background: url("../images/banner.jpg") repeat scroll 0 0 transparent;
}

Remove units for zero values in CSS

Remove units for zero values in CSS

Fix according to CSSLint [Disallow units for zero values](https://github.com/CSSLint/csslint/wiki/Disallow-units-for-zero-values) rule.


/* Amazon Cloud Player tweak */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("music.amazon.co.jp") {
  .recDescription > span[action="buy"],   /* Buy */
  a[href^="#remove/"],                    /* Delete */
  #contextMenu > li:nth-child(2)          /* Remove from library */
  {
    display: none !important;
  }

  #header .listViewDuration {
    font-size: 1.8rem !important;
  }
}

/* Amazon Cloud Player tweak */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("music.amazon.co.jp") {
  a[href^="#remove/"],                    /* Delete */
  #contextMenu > li:nth-child(2)          /* Remove from library */
  {
    display: none !important;
  }

  #header .listViewDuration {
    font-size: 1.8rem !important;
  }
}

Remove rule for buy button

Remove rule for buy button

It is not shown on my screen any more.

I recently use Prime music heavily.
Therefore there is a possibility for the algorithm to suggest Prime content only...


.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
}

.contribook_bloguserpicture img {
	margin-right: 0;
}

footer div.footer-nav>h4 {
	font-size: 1.125em;
	color: #FFFFFF;
}

i[class*='icon-'] {
	font-style: normal;
}

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

.banner img {
	padding: 15px 0;
}

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

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
}

.contribook_bloguserpicture img {
	margin-right: 0;
}

footer div.footer-nav>h4 {
	font-size: 1.125em;
	color: #FFFFFF;
}

i[class*='icon-'] {
	font-style: normal;
}

.home .row {
	padding-bottom: 20px;
}

Make app buttons less harsh. Condense homepage a tad


code {
  @apply bg-gray-400 p-1 text-sm;

  background-color: ghostwhite;
}

pre {
  @apply mb-6 p-4 border rounded leading-snug;

  display: block;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: ghostwhite;
}

@screen lg {
  pre {
    @apply p-6 -mx-6;
  }
}

pre code {
  @apply text-xs p-0;
  background-color: none;
  overflow:auto;
  font-weight:normal;
}

@import 'highlight.js/styles/agate';

code {
  @apply bg-gray-400 p-1 text-sm;

  background-color: ghostwhite;
}

pre {
  @apply mb-6;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

pre code {
  @apply border leading-snug text-sm -mx-4;
  background-color: none;
  overflow: auto;
  font-weight: normal;
}

.hljs {
  @apply p-4;
}

@screen md {
  pre code {
    @apply rounded -mx-6;
  }

  .hljs {
    @apply p-6;
  }

}

@screen lg {
  pre code {
    @apply -mx-8 text-base rounded-lg;
  }

  .hljs {
    @apply p-8;
  }
}

Update syntax highlighting to agate

Update syntax highlighting to agate


/* Should be moved out to the MobileApp extension at some point */
body {
    background-color: #FAFAFA;
    padding: 8px 24px;
    color: #333;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 24px;
}

a {
    color: #347BFF;
    text-decoration: none;
}

h1 {
    font-family: serif;
    color: #064AAD;
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: bold;
}

h2, h3, h4, h5, h6 {
    font-family: serif;
}

/* Should be moved out to the MobileApp extension at some point */
body {
    background-color: #FAFAFA;
    padding: 8px 24px;
    color: #333;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 24px;
}

a {
    color: #347BFF;
    text-decoration: none;
}

h1 {
    font-family: serif;
    color: #064AAD;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 24px;
    font-weight: bold;
}

h2, h3, h4, h5, h6 {
    font-family: serif;
}

Increase line height for the page title

Increase line height for the page title

Change-Id: Iae92660b9a4d0b5ad474768533a6cbe227e7fd01


/*
 * Fix sticky bottom trick (it mess with Bulma a bit)
 */

section {
    min-height: calc(100vh - 200px) !important;
}

footer {
    height: 200px;
}

/*
 * Fix sticky bottom trick (it mess with Bulma a bit)
 */

section {
    min-height: calc(100vh - 32vh) !important;
}

footer {
    height: 32vh;
}

Increase size of the footer

Increase size of the footer

Signed-off-by: Rafael Campos Nunes <42f0a9af43f2538fd3153aecc7c3ff958e89d724@engineer.com>


/* Firefox userChrome.css */

/* Always show tab icon. */
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
  display: -moz-inline-box !important;
}

/* Minimize One-Off Searches in address bar. */
#urlbar .search-one-offs:not([hidden]) {
  display: flex !important;
  padding-block: 6px !important;
}
[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) {
  padding-block: 11px !important;
}
#urlbar .search-panel-header {
  display: none !important;
}
#urlbar .searchbar-engine-one-off-item {
  margin-inline-start: 0 !important;
}

/* Hide application menu items. */
#appMenu-fxa-status2,
#appMenu-fxa-separator {
  display: none !important;
}
#appMenu-passwords-button {
  display: none !important;
}

/* Firefox userChrome.css */

/* Always show tab icon. */
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
  display: -moz-inline-box !important;
  list-style-image: url("chrome://branding/content/icon32.png") !important;
}

/* Minimize One-Off Searches in address bar. */
#urlbar .search-one-offs:not([hidden]) {
  display: flex !important;
  padding-block: 6px !important;
}
[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) {
  padding-block: 11px !important;
}
#urlbar .search-panel-header {
  display: none !important;
}
#urlbar .searchbar-engine-one-off-item {
  margin-inline-start: 0 !important;
}

/* Hide application menu items. */
#appMenu-fxa-status2,
#appMenu-fxa-separator {
  display: none !important;
}
#appMenu-passwords-button {
  display: none !important;
}

Set default tab icon to Firefox logo

firefox: Set default tab icon to Firefox logo


/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS file within this directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require main
*= require mobile
*= require bootstrap
*= require font-awesome.min.css
*= require_self
*/

.apollo-header{
   background-color: #396494;
   padding-left: 12px;
}

.apollo-dropdown{
   background-color: #396494;
}

.navbar {
    margin-bottom: 0px;
    min-height: 25px;
}

.btn {
    padding: 3px;
}

Update styles on report pages

Update styles on report pages


/*
    Document   : Adsum Styles
    Created on : Aug 21, 2013, 4:56:49 PM
    Author     : Chris Vogt <cjv@sedonaconference.org>
*/

body {
    background: url('../img/pattern/square_bg.png') repeat #fefefe;
}
.navbar-inverse .navbar-inner {
    background-color: #563d7c;
    background-image: none;
}
.navbar-inverse .navbar-inner a, .navbar-inverse .navbar-inner .nav a {
    color: #cecece;
}
.navbar.navbar-static-top {
    border-bottom: 4px solid #FFD700;
}
#main-container {
    margin-top: 24px;
}
.table {
    background: #fefefe;
}
td.actions {
    width: 174px;
    max-width: auto;
}
.well {
    background: rgba(250,250,250,0.8);
}

/*
    Document   : Adsum Styles
    Created on : Aug 21, 2013, 4:56:49 PM
    Author     : Chris Vogt <cjv@sedonaconference.org>
*/

body {
    background: url('../img/pattern/square_bg.png') repeat #fefefe;
}
.navbar-inverse .navbar-inner {
    background-color: #563d7c;
    background-image: none;
}
.navbar-inverse .navbar-inner a, .navbar-inverse .navbar-inner .nav a {
    color: #cecece;
}
.dropdown-menu>li>a {
    color: #686868!important;
}
.navbar.navbar-static-top {
    border-bottom: 4px solid #FFD700;
}
#main-container {
    margin-top: 24px;
}
.table {
    background: #fefefe;
}
td.actions {
    width: 174px;
    max-width: auto;
}
.well {
    background: rgba(250,250,250,0.8);
}

Fix dropdown menu color style.

Fix dropdown menu color style.


/* Pretty fonts, thanks to Google */
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
    font-family:"PT Sans", Verdana, sans-serif;
}

/* Wider page */
.inner {
    max-width:40em;
}

/* More conventional bullet list marker */
ul>li:before {
    margin-top: -0.05em;
    content: "–";
}

/* Cleaner print style */
@media print {
    html {
        font-size:40%;
    }
    .inner {
        max-width:100%;
    }
    #navigation, .post-cover {
        display:none;
    }
    #post-header {
        background-color: white!important;
        padding:2em 0 0 0!important;
    }
    .post {
        padding-top:0;
    }
    h1 {
        color: black!important
    }
}

/* Pretty fonts, thanks to Google */
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
    font-family:"PT Sans", Verdana, sans-serif;
}

/* Wider page */
.inner {
    max-width:40em;
}

/* More conventional bullet list marker */
ul>li:before {
    margin-top: -0.05em;
    content: "–";
}

/* Cleaner print style */
@media print {
    html * {
        font-size:12pt!important;
        color:black!important;
    }
    body {line-height:1.3em;}
    h1 {font-size:125%!important;}
    h2 {font-size:115%!important;}
    h3 {font-size:110%!important;}
    p ul ol {margin:0.5em auto!important;}
    .inner {
        max-width:100%!important;
    }
    #menu, #navigation,
    .blog-cover, .post-cover,
    .progress-container {
        display:none!important;
    }
    #blog-header, #post-header {
        background-color: white!important;
        padding:2em 0 0 0!important;
    }
    .post {
        padding-top:0!important;
    }
}

Improve CSS rules for printing

Improve CSS rules for printing


/* MPannableWidgetStyle : MWidgetStyle */
MPannableWidgetStyle {
    pan-threshold: 15.0;
    pan-click-threshold: 0.2;
    pointer-spring-k: 0.25;
    friction-c: 0.8;
    sliding-friction-c: 0.07;
    border-spring-k: 0.09;
    border-friction-c: 0.45;

    /* inherited from MWidgetStyle */
    preferred-size: 1 1;
    minimum-size: 0 0;
    maximum-size: 10000 10000;

    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;

    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;

    maximum-velocity: 70;
}

/* MPannableWidgetStyle : MWidgetStyle */
MPannableWidgetStyle {
    pan-threshold: 15.0;
    pan-click-threshold: 0.2;
    pointer-spring-k: 0.25;
    friction-c: 0.8;
    sliding-friction-c: 0.07;
    border-spring-k: 0.09;
    border-friction-c: 0.45;

    /* inherited from MWidgetStyle */
    preferred-size: -1 -1;
    minimum-size: 0 0;
    maximum-size: 10000 10000;

    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;

    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;

    maximum-velocity: 70;
}

Changes: Set the preferred size of the pannable widget to -1 -1 instead of 1 1

RevBy: Michal Guminiak


.modal {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  .modal__header {
    text-align: right;
    button.close {
      @mixin button blue;
      padding: 0.4em 0.7em 0.3em 0.8em;
    }
  }
  .modal__body {
    overflow: auto;
  }
  .modal__preview,
  .modal__load {
    .modal__preview--wrapper {
      margin: 1em auto;
      display: table;
    }

    fieldset {
      padding: 1em 0;

      label {
        margin: 1em 0.5em;
        display: inline-block;
      }
    }
  }
}

.modal {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  .modal__header {
    text-align: right;
    button.close {
      @mixin button blue;
      padding: 0.4em 0.7em 0.3em 0.8em;
    }
  }
  .modal__body {
    overflow: auto;
  }
  .modal__preview,
  .modal__load {
    .modal__preview--wrapper {
      margin: 1em auto;
      display: table;
    }
  }

  .modal__load,
  .modal__body {
    fieldset {
      padding: 1em 0;

      label {
        margin: 1em 0.5em;
        display: inline-block;
      }
    }
  }
}

Fix useful data visual issue with radio buttons


.thumbnail {
    padding: 10px;
    padding-bottom: 30px;
}

.thumbnail img {
    width: 100%;
}

.caption-full {
    padding: 10px 10px 0;
}

.form-inline {
    display: inline;
}

nav {
    z-index: 1;
}

.navbar {
    border-radius: 0px;
}

.content-header {
  text-align: center;
  width: 60%;
}

.content-header h1 {
  margin-bottom: 20px;
}

.content-header p {
  margin-bottom: 45px;
}

.pull-right {
    text-align: right;
}

hr {
    border-top: 1px solid #cccccc;
}

.thumbnail {
    padding: 10px;
    padding-bottom: 30px;
}

.caption-full {
    padding: 10px 10px 0;
}

.form-inline {
    display: inline;
}

nav {
    z-index: 1;
}

.navbar {
    border-radius: 0px;
}

.content-header {
  text-align: center;
  width: 60%;
}

.content-header h1 {
  margin-bottom: 20px;
}

.content-header p {
  margin-bottom: 45px;
}

.pull-right {
    text-align: right;
}

hr {
    border-top: 1px solid #cccccc;
}

Fix CSS style causing tall images to become distorted on show pages - Removed width: 100% on ".thumbnail img"


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

.jp-DebuggerSidebar {
  display: flex;
  flex-direction: column;
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);
  font-size: var(--jp-ui-font-size1);
  min-width: 350px !important;
}

.jp-DebuggerSidebar > div > header {
  border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
  border-top: solid var(--jp-border-width) var(--jp-border-color1);
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--jp-layout-color2);
  height: 24px;
}

.jp-DebuggerSidebar > div.jp-DebuggerVariables > header {
  border-top: none;
}

.jp-DebuggerSidebar > div > header > span {
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color1);
  padding-left: 8px;
  padding-right: 4px;
}

.jp-DebuggerSidebar .jp-Toolbar {
  background: var(--jp-layout-color2);
  box-shadow: none;
}

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

.jp-DebuggerSidebar {
  display: flex;
  flex-direction: column;
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);
  font-size: var(--jp-ui-font-size1);
  min-width: 350px !important;
}

.jp-DebuggerSidebar > div > header {
  border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
  border-top: solid var(--jp-border-width) var(--jp-border-color1);
  box-shadow: var(--jp-toolbar-box-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--jp-layout-color2);
  height: 24px;
}

.jp-DebuggerSidebar > div.jp-DebuggerVariables > header {
  border-top: none;
}

.jp-DebuggerSidebar > div > header > span {
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color1);
  padding-left: 8px;
  padding-right: 4px;
}

.jp-DebuggerSidebar .jp-Toolbar {
  background: var(--jp-layout-color2);
  box-shadow: none;
}

Add drop shadows to headers

Add drop shadows to headers


@import 'normalize.css';

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

@import 'normalize.css';

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

Fix overflow to prevent double scroll on IE


.input {
    position: relative;
}

.dim > :not(:hover) {
    opacity: .5;
}

.search {
    padding-right: .25rem;
}

.prefix {
    padding-right: .25rem;
}

.suffix {
    padding-left: .25rem;
}

.input input,
.input textarea {
    font-size: .9rem;
    display: flex;
    flex-grow: 1;
    width: 100%; /* required by Firefox */
    border: none;
    color: #fff;
    background-color: transparent;
    transition: background-color 800ms ease-out;
}

.input input:read-only,
.input textarea:read-only {
    opacity: .6;
    pointer-events: none;
}

.input input[type=number] {
    justify-self: right;
    text-align: right;
    width: 4rem;
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
    transition: background-color 9999999999s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

.input input::placeholder,
.input textarea::placeholder {
    color: hsl(0, 0%, 45%);
}

.input {
    position: relative;
}

.dim > :not(:hover) {
    opacity: .5;
}

.search {
    padding-right: .25rem;
}

.prefix {
    padding-right: .25rem;
}

.suffix {
    padding-left: .25rem;
}

.input input {
    width: 0;
}

.input input,
.input textarea {
    font-size: .9rem;
    display: flex;
    flex-grow: 1;
    width: 100%; /* required by Firefox */
    border: none;
    color: #fff;
    background-color: transparent;
    transition: background-color 800ms ease-out;
}

.input input:read-only,
.input textarea:read-only {
    opacity: .6;
    pointer-events: none;
}

.input input[type=number] {
    justify-self: right;
    text-align: right;
    width: 4rem;
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
    transition: background-color 9999999999s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

.input input::placeholder,
.input textarea::placeholder {
    color: hsl(0, 0%, 45%);
}

Set default input width to zero.

Set default input width to zero.


/* Argumenta - Tags Widget Stylesheet */

.tags-widget .support-tags-header {
    border-bottom: 2px solid #4d4;
    color: #4d4;
}
.tags-widget .dispute-tags-header {
    border-bottom: 2px solid #f47;
    color: #f47;
}
.tags-widget .citation-tags-header {
    border-bottom: 2px solid #333;
    color: #333;
}
.tags-widget [class*=tags-header] {
    margin: 6px 0px;
    font-size: 18px;
    font-weight: bold;
}
.tags-widget .support-tag-icon,
.tags-widget .dispute-tag-icon,
.tags-widget .citation-tag-icon {
    position: relative;
    z-index: 0;
    top: 3px;
    font-size: 1.2em;
}
.tags-widget .support-tag-icon {
}
.tags-widget .dispute-tag-icon {
}
.tags-widget .citation-tag-icon {
}
.tags-widget .tags-container > * {
    box-shadow: none;
    margin: 8px 0px;
}

/* Argumenta - Tags Widget Stylesheet */

.tags-widget .support-tags-header {
    border-bottom: 2px solid #4d4;
    color: #4d4;
}
.tags-widget .dispute-tags-header {
    border-bottom: 2px solid #f47;
    color: #f47;
}
.tags-widget .citation-tags-header {
    border-bottom: 2px solid #333;
    color: #333;
}
.tags-widget [class*=tags-header] {
    margin: 6px 0px;
    font-size: 18px;
    font-weight: bold;
}
.tags-widget .support-tags-header .support-tag-icon,
.tags-widget .dispute-tags-header .dispute-tag-icon,
.tags-widget .citation-tags-header .citation-tag-icon {
    position: relative;
    z-index: 0;
    top: 3px;
    font-size: 1.2em;
}
.tags-widget .support-tag-icon {
}
.tags-widget .dispute-tag-icon {
}
.tags-widget .citation-tag-icon {
}
.tags-widget .tags-container > * {
    box-shadow: none;
    margin: 8px 0px;
}

Fix size of tag icons when nested

Fix size of tag icons when nested


body, html{min-height:100%;background-color: #999999;}
*{margin:0;}
h1{padding-bottom:10px;}
h4{float:right;margin-top:10px;}
p{margin:20px 0;}

.container{
  width:960px;
  margin:0 auto;
  border-left:4px solid #000000;
  border-right:4px solid #000000;
  padding:0 20px;
  background-color: #FFFFFF;
  position: relative;
}
.content{position: relative;top:100px;}
main{
  margin:0 auto;
  min-height: 100%;
}
.logo{
  background-color: orange;
  position: absolute;
  right: 0; top: 0; left: 0;
}
.logo img{width:200px;
  height:100px;
  position: relative;
  left:400px;
}
.gregorc{
  float: right;
}
footer{
  width: 100%;
  background-color: orange;
  height:50px;
  position: relative;

}

.learning-styles li{margin-bottom: 15px;}

body, html{min-height:100%;background-color: #999999;}
*{margin:0;}
h1{
  padding-bottom:10px;
  font-size: 32px;
  font-weight:bold;
}
h2{
  font-size: 24px;
  font-style: italic;
}
h3{
  font-size: 20px;
  font-weight:bold;
}
h4{
  float:right;
  margin-top:10px;
}
p{margin:20px 0;}

.container{
  width:960px;
  margin:0 auto;
  border-left:4px solid #000000;
  border-right:4px solid #000000;
  padding:0 20px;
  background-color: #FFFFFF;
  position: relative;
}
.content{position: relative;top:110px;}
main{
  margin:0 auto;
  min-height: 100%;
}
.logo{
  background-color: orange;
  position: absolute;
  right: 0; top: 0; left: 0;
}
.logo img{width:200px;
  height:100px;
  position: relative;
  left:400px;
}
.gregorc{
  float: right;
}
footer{
  width: 100%;
  background-color: orange;
  height:50px;
  position: relative;

}

.learning-styles li{margin-bottom: 15px;}

Add some new styles to fix reset

Add some new styles to fix reset


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

.mainHeader{
  width: 100%;
  left: 0;
  right: 0;
  position: fixed;
  overflow: hidden;
  z-index: 2;
  border-top: $bdr-mainHeader;
  color: $cl-mainHeader;
  .mainHeaderSheet{
    height: 65px;
    position: absolute;
    opacity: 0;
    top: -65px;
    width: 100%;
    transition: background-color .2s, top .5s;
  }
  .mainHeaderWrapper{
    @mixin mainFit;
    margin: 0 auto;
    height: 65px;
    display: flex;
    z-index: 2;
    position: relative;
    justify-content: space-between;
    align-items: center;
  }
}

.mainHeaderActive {
  transition: background-color .2s,top .5s,opacity .2s;
  .mainHeaderSheet{
    background-color: $bg-mainHeader;
    background-image: $bgi-mainHeaderActive;
    opacity: 1;
    top: 0;
    transition: background-color .2s,top .5s,opacity .2s;
    clip-path: polygon(0% 0px, 0% 65px, 33% 48px, 48% 65px, 67% 35px, 85% 55px, 100% 55px, 100% 0px);
  }
}

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

.mainHeader{
  width: 100%;
  left: 0;
  right: 0;
  position: fixed;
  overflow: hidden;
  z-index: 2;
  border-top: $bdr-mainHeader;
  color: $cl-mainHeader;
  .mainHeaderSheet{
    height: 65px;
    position: absolute;
    opacity: 0;
    top: -65px;
    width: 100%;
    transition: background-color .2s, top .5s;
  }
  .mainHeaderWrapper{
    @mixin mainFit;
    margin: 0 auto;
    height: 65px;
    display: flex;
    z-index: 2;
    position: relative;
    justify-content: space-between;
    align-items: center;
  }
}

.mainHeaderActive {
  transition: background-color .2s,top .5s,opacity .2s;
  .mainHeaderSheet{
    background-color: $bg-mainHeader;
    background-image: $bgi-mainHeaderActive;
    opacity: 1;
    top: 0;
    transition: top .3s,opacity .2s;
    clip-path: polygon(0% 0px, 0% 65px, 33% 48px, 48% 65px, 67% 35px, 85% 55px, 100% 55px, 100% 0px);
  }
}

Decrease anim time and remove background-color anim


@media (max-width: 768px) {

    .header {
        position: absolute;
    }

    /*sidebar*/

    #sidebar {
        height: auto;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 1001;
    }

    /* body container */
    #main-content {
        margin: 0px!important;
        position: none !important;
    }

    #sidebar > ul > li {
        margin: 0 10px 5px 10px;
    }
    #sidebar > ul > li > a {
        height:35px;
        line-height:35px;
        padding: 0 10px;
        text-align: left;
    }

    #sidebar > ul > li > a, #sidebar > ul > li > ul.sub > li {
        width: 100%;
    }
    #sidebar > ul > li > ul.sub > li > a {
        background: transparent !important ;
    }

    /* sidebar */
    #sidebar {
        margin: 0px !important;
    }

    .btn {
        margin-bottom: 5px;
    }

}

@media (max-width: 480px) {

    .notification-row {
        display: none;
    }
}

@media (max-width:360px) {

    h1 {
        font-size: 1.9em;
    }
}

@media (max-width: 768px) {

    .header {
        position: absolute;
    }

    /*sidebar*/

    #sidebar {
        height: auto;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 1001;
    }

    /* body container */
    #main-content {
        margin: 0px!important;
        position: none !important;
    }

    .wrapper {
        padding: inherit;
    }

    #sidebar > ul > li {
        margin: 0 10px 5px 10px;
    }
    #sidebar > ul > li > a {
        height:35px;
        line-height:35px;
        padding: 0 10px;
        text-align: left;
    }

    #sidebar > ul > li > a, #sidebar > ul > li > ul.sub > li {
        width: 100%;
    }
    #sidebar > ul > li > ul.sub > li > a {
        background: transparent !important ;
    }

    /* sidebar */
    #sidebar {
        margin: 0px !important;
    }

    .btn {
        margin-bottom: 5px;
    }

}

@media (max-width: 480px) {

    .notification-row {
        display: none;
    }
}

@media (max-width:360px) {

    h1 {
        font-size: 1.9em;
    }
}

Remove right padding in theme

docs: Remove right padding in theme


body {
    padding-top: 60px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-brand { padding-top: 9px; }
.navbar-brand .fa-stack { margin-right: 4px; }

a.navbar-brand:hover, ul.nav li:hover {
    -moz-text-shadow: 1px 1px 5px #bbb;
     -webkit-text-shadow: 1px 1px 5px #bbb;
     text-shadow: 1px 1px 5px #bbb;}

body {
    padding-top: 60px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-brand { padding-top: 9px; }
.navbar-brand .fa-stack { margin-right: 4px; }

a.navbar-brand:hover, ul.nav li:hover {
    -moz-text-shadow: 1px 1px 5px #bbb;
     -webkit-text-shadow: 1px 1px 5px #bbb;
     text-shadow: 1px 1px 5px #bbb;
}

#treeview li {
    font-size: 0.9em;
}

#category_chooser {
    margin-top: 4em;
}

@media (max-width: 768px) {
    .affix {
        position: static;
    }
}

Move styles to css file

Move styles to css file


@import "news.css";

#page-header #page-title {
    letter-spacing: 0.15em;
    font-size: 4em;
}

#page-header #page-description {
    margin-top: -0.15em;
}

#news-header {
    text-align: center;
    margin-top: 2em;
}

@import "news.css";

#page-header #page-title {
    letter-spacing: 0.15em;
    font-size: 4em;
    margin-top: 0.4em;
}

#page-header #page-description {
    margin-top: -0.15em;
}

#news-header {
    text-align: center;
    margin-top: 2em;
}

Reduce margin-top on title of main page.


html, body {
  background-color: #cde7f0;
  height: 100%;
  width: 100%;
  margin: 0;
  text-align: center;
}

.top-banner{
  background-color: white;
  font-size: 1em;
  color: #8aacb8;
  width: 100%;
  height: 40px;
}

.bottom-banner{
  background-color: white;
  font-size: 1em;
  color: #8aacb8;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
}

/*ul {
  text-align: right;
}*/

ul li {
  list-style: none;
  padding-right: 1em;
  display: inline;
}

.comment-container {
  width: 100%;
  border: 1px solid black;
}

.comment-container ul {
  text-align: left;
  width: 50%;
  height: 100%;
  font-size: 1.2em;
  margin: auto;
  padding-top: 1em;
  padding-bottom: 1em;
}

html, body {
  background-color: #cde7f0;
  height: 100%;
  width: 100%;
  margin: 0;
  text-align: center;
}

.top-banner{
  background-color: white;
  font-size: 1em;
  color: #8aacb8;
  width: 100%;
  height: 40px;
}

.bottom-banner{
  background-color: white;
  font-size: 1em;
  color: #8aacb8;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
}

/*ul {
  text-align: right;
}*/

ul li {
  list-style: none;
  padding-right: 1em;
  display: inline;
}

.comment-container {
  width: 100%;
  border: 1px solid black;
}

.comment-container ul {
  text-align: left;
  width: 50%;
  height: 100%;
  margin: auto;
}

.comment {
  font-size: 1.2em;
  margin: 0;
}

Comment changes and removal of by-line class


#tsnaxform {

}

#page_slider {
    width: 200px;
    margin: 7px 10px 0px 20px;
}

.batch_head span {
    margin-left:10px;
}

#page_name {
    font-weight: normal;
}

.ocr_line {
    font-size: 1.1em;
    border: 1px solid transparent;
    padding: 2px;
    margin: 1px;
}

.toolbar_item {
    float: left;
}

.transcript_lines {
    background-color: #FFF;
    padding: 10px;
}

#scroll_container {
    height: 320px;
    overflow: auto;
}

.ocr_line.hover {
    background-color: #DDDDFF;
}

.viewer_highlight {
    opacity: 0.5;
    background-color: #FFFF66;
}

#tsnaxform {

}

#page_slider {
    width: 200px;
    margin: 7px 10px 0px 20px;
}

.batch_head span {
    margin-left:10px;
}

#page_name {
    font-weight: normal;
}

.ocr_line {
    font-size: 1.1em;
    border: 1px solid transparent;
    padding: 0px;
    margin: 3px;
}

.toolbar_item {
    float: left;
}

.transcript_lines {
    background-color: #FFF;
    padding: 10px;
}

#scroll_container {
    height: 320px;
    overflow: auto;
}

.ocr_line.hover {
    background-color: #DDDDFF;
}

.viewer_highlight {
    opacity: 0.5;
    background-color: #FFFF66;
}

Remove margin from individual lines

Remove margin from individual lines


/* Overrides for Stencila components */
:--root {
  --font-size-body: 14px;

  a.button.sc-stencila-button-default,
  button.sc-stencila-button-default {
    @extend .button;

    stencila-icon,
    .label {
      font-size: var(--font-size-body);
      color: inherit;
    }
  }

  stencila-code-expression .text,
  stencila-code-expression .output,
  stencila-tooltip {
    &,
    * {
      font-size: var(--font-size-body);
    }
  }

  stencila-code-expression .text code {
    padding: 0;
  }
}

/* Overrides for Stencila components */
:--root {
  --font-size-body: 14px;

  a.button.sc-stencila-button-default,
  button.sc-stencila-button-default {
    @extend .btn;

    stencila-icon,
    .label {
      font-size: var(--font-size-body);
      color: inherit;
    }
  }

  stencila-code-expression .text,
  stencila-code-expression .output,
  stencila-tooltip {
    &,
    * {
      font-size: var(--font-size-body);
    }
  }

  stencila-code-expression .text code {
    padding: 0;
  }
}

Extend correct Button style class

fix(Bootstrap): Extend correct Button style class


/** @define Component **/

.Component {
  color: green;

  .Component-descendant {
    &:active {}
    &.is-active {}
  }

  &.is-stateName {}
  &-descendant {}
  &-descendant--modifier {}
  &--modifier {}
  &:pseudo-class {}
  &:pseudo-element {}
  &::pseudo-element {}
  &[attr] {}
}

.Component-standAloneDescendant {}

@media (min-width: 780px) {
  .Component {
    .Component-descendant {}
  }
}

.Component {
  @nest & .Component-nested {
    width: 500px;
  }

  @nest &.is-dark {
    color: white;
  }
}

.Component {
  & .Component-nested {
    width: 500px;
  }

  &.is-dark {
    color: white;
  }
}

/** @define ComponentWeak; weak **/

.ComponentWeak {
  .Other {}
}

/** @define utilities */

.u-linkMuted {
  color: green;

  &:hover {
    color: green;
  }
}

Add a fixture for nested utilities

Add a fixture for nested utilities


/**
 * CSS for jQuery Plugin Fast Facts
 */

.subtitle {
	font-size: 50%;
	vertical-align: middle;
}

.fast-facts-problem {
	border-bottom: 1px solid #000;
	font-size: 110%;
	margin: 0 auto 40px;
	max-width: 40px;
	text-align: right;
}

.fast-facts-operator {
	float: left;
}

#name {
	border-bottom: 2px solid black;
	width: 200px;
	padding-top: 25px;
	text-indent: -50px;
}

/**
 * CSS for jQuery Plugin Fast Facts
 */

body {
	font-size: 22px;
}

.subtitle {
	font-size: 50%;
	vertical-align: middle;
}

.fast-facts-problem {
	border-bottom: 1px solid #000;
	font-size: 110%;
	margin: 0 auto 70px;
	max-width: 40px;
	text-align: right;
}

.fast-facts-operator {
	float: left;
}

#name {
	border-bottom: 2px solid black;
	width: 200px;
	padding-top: 25px;
	text-indent: -90px;
}

Increase font size to correct printing issue

Increase font size to correct printing issue (in at least Google Chrome
59.0.3071.115.

Fixes #12


/* app css stylesheet */

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

label {
  margin:10px 0;
  text-transform: uppercase;
  letter-spacing: 2px
}
form div {
  background-color: #CCFFFF;
  padding:30px;
  margin-top:20px;
  border-radius: 10px
}
input {
  border-radius: 5px;
  padding:8px;
  border: 2px #DDDDDD solid;
}
select {
  border-radius: 5px;
  padding:8px;
  border: 2px #DDDDDD solid;
}

h3 span {
  padding:20px;

  background-color: red;
}

label {
  width: 100%;
}

.divider{
    width:5px;
    height:auto;
    display:inline-block;
}

Revert "Add back in divider CSS"

Revert "Add back in divider CSS"

CSS merge didn't happen so smoothly. best to keep christina's branch current and merge-able from this commit.
This reverts commit 5872c84062c0878278bba1f0a89861e10df7e54f.


#web-debug-toolbar {
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	margin:3px;
}

#web-debug-toolbar a {
	color:#000;
	text-decoration:none;
}

#web-debug-toolbar a:visited {
	color:#000;
}

#web-debug-toolbar a:hover {
	color:#fff;
	background-color:#000;
}
#web-debug-toolbar .panel, #web-debug-toolbar .hidden-panel, #web-debug-toolbar .toolbar-toggle-panel {
	float:right;
	display:block;
	padding:2px;
	border:1px solid gray;
	border-collapse:collapse;
	background-color:white;
}

#web-debug-toolbar .hidden-panel {
	position:absolute;
	top:25px;
	right:0px;
	border:1px solid gray;
	background-color:white;
	max-width:99%;
}

#web-debug-toolbar {
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	margin:3px;
}

#web-debug-toolbar a {
	color:#000;
	text-decoration:none;
}

#web-debug-toolbar a:visited {
	color:#000;
}

#web-debug-toolbar a:hover {
	color:#fff;
	background-color:#000;
}
#web-debug-toolbar .panel, #web-debug-toolbar .hidden-panel, #web-debug-toolbar .toolbar-toggle-panel {
	float:right;
	display:block;
	padding:2px;
	border:1px solid gray;
	border-collapse:collapse;
	background-color:white;
}

#web-debug-toolbar .hidden-panel {
	position:absolute;
	top:25px;
	right:0px;
	border:1px solid gray;
	background-color:white;
	max-height:900px;
	max-width:99%;
	overflow:auto;
}

Add scrollbar and max-height of 900px to hidden panels


.hover-bg-silver:hover { background-color: var(--silver) }
.hover-bg-white:hover { background-color: white; }

Add a new bg-hover color

Add a new bg-hover color


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

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

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

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

Change second block technical relative stylesheet


.horizontal_layout {
    position: relative;
    width: auto;
    overflow: hidden;
}

.horizontal_layout > .west_container {
    position: absolute;
    left: 0;
    display: inline-block;
}

.horizontal_layout > .center_container {
    position: absolute;
    overflow: auto;
}

.horizontal_layout > .east_container {
    position: absolute;
    display: inline-block;
}

Add default styled horizontal layout style


.error { color: #FF3B3B; }
td.mountPoint, td.backend { width:10em; }
#addMountPoint>td { border:none; }
#addMountPoint>td.applicable { visibility:hidden; }
#selectBackend { margin-left:-10px; }

.error { color: #FF3B3B; }
td.mountPoint, td.backend { width:10em; }
td.remove>img { visibility:hidden; padding-top:0.8em; }
tr:hover>td.remove>img { visibility:visible; cursor:pointer; }
#addMountPoint>td { border:none; }
#addMountPoint>td.applicable { visibility:hidden; }
#selectBackend { margin-left:-10px; }

Fix remove button display for external storage


html {
  height: 100%;
}

footer {
  padding-top: 30px;
}

.panel-body dl {
  margin-bottom: 0;
}

.f_center {
  height: 100%;
}

.f_center .container {
    height: 100%;
    width: 100%;
    display: table;
    padding-right: 0;
    padding-left: 0;
}

.f_center .row {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

html {
  height: 100%;
}

footer {
  padding-top: 30px;
}

.panel-body dl {
  margin-bottom: 0;
}

.page-header h1 a {
  text-decoration: none;
}

.f_center {
  height: 100%;
}

.f_center .container {
    height: 100%;
    width: 100%;
    display: table;
    padding-right: 0;
    padding-left: 0;
}

.f_center .row {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

Drop the hover decoration when using span..

Signed-off-by: Chris Lamb <29e6d179a8d73471df7861382db6dd7e64138033@debian.org>


.ButtonSetContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 290px;
}

.ButtonSetContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 355px;
}

CHange login button set width

CHange login button set width


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

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


:host {
    display: block;
    min-width: -webkit-min-content;
}

.file {
    padding: 0.25em 16px;
    display: flex;
}

.file-name {
    padding: 0.25em 4px;
    flex: 1;
}

.file-status,
.file-added,
.file-removed {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.25em 0;
}

.file-status {
    min-width: 2em;
}

.file-added,
.file-removed {
    min-width: 3em;
}

.file-added {
    color: #009933;
}

.file-removed {
    color: #DD4B39;
}

.file-messages {
    margin-left: 1em;
}

cr-diff[active] {
    border-bottom: 1px solid #ccc;
}

:host(:last-child) cr-diff[active] {
    border-bottom: none;
}

:host {
    display: block;
    min-width: -webkit-min-content;
}

.file {
    padding: 0.25em 16px;
    display: flex;
}

.file-name {
    padding: 0.25em 4px;
    flex: 1;
}

.file-status,
.file-added,
.file-removed {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.25em 0;
}

.file-status {
    min-width: 2em;
}

.file-added,
.file-removed {
    min-width: 3em;
}

.file-added {
    color: #009933;
}

.file-removed {
    color: #DD4B39;
}

.file-messages {
    margin-left: 1em;
}

cr-diff[active] {
    margin: 0.25em 16px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

}

:host(:last-child) cr-diff[active] {
    border-bottom: none;
}

Add spacing and shadows around diffs.

Add spacing and shadows around diffs.

This might be too annoying, but lets try it for now.

Fixes #75.


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

.maincard {
  width: 20em;
  min-height: 41em;
  align-items: center;
  /*justify-content: center;*/
  margin: 4em;
  /*vertical-align: baseline;*/
}

.halfwidth {
  width: 50%;
  flex: 1;
  text-align: left;
}

.fullwidth {
  width: 100%;
  display: flex;
}

.right {
  margin-left: auto;
}

.flex {
  display: flex;
}

@media screen and (min-height: 45em) {
  .container {
    display: flex;
  }
}

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

.maincard {
  width: 20em;
  min-height: 41em;
  align-items: center;
  /*justify-content: center;*/
  margin: 4em 0;
  /*vertical-align: baseline;*/
}

.halfwidth {
  width: 50%;
  flex: 1;
  text-align: left;
}

.fullwidth {
  width: 100%;
  display: flex;
}

.right {
  margin-left: auto;
}

.flex {
  display: flex;
}

@media screen and (min-height: 45em) {
  .container {
    display: flex;
  }
}

Remove left & right margin

Remove left & right margin


a.btn.deformSeqAdd{
	border-radius: 50%;
	font-size: 14px;
	margin-right: 5px;
	margin-top: -28px;
	padding: 1px 5px 2px;
	width: 25px;
}

.deformSeqItem a.deformClosebutton{
	border-radius: 50%;
	font-size: 14px;
	padding: 0 0 1px;
	width: 24px;
}

a.btn.deformSeqAdd{
	border-radius: 50%;
	font-size: 14px;
	margin-right: 5px;
	margin-top: -28px;
	padding: 0 5px 1px;
	width: 23px;
}

.deformSeqItem a.deformClosebutton{
	border-radius: 50%;
	font-size: 14px;
	padding: 0;
	width: 23px;
}

Fix css for sequence widget

Fix css for sequence widget


.column-style-item {
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  margin-bottom: 0;
  margin-left: -8px;
  margin-right: -8px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 8px;
  padding-top: 12px;
}

.column-style-insert-row {
  margin-top: 16px;
}

.column-style-item-selected {
  background-color: #e3f2fd; /** blue:50 */
  border-left: 4px solid #1565C0; /** blue:800 */
  padding-left: 8px;
}

.column-style-item-invalid {
  background-color: #ffecb3; /** amber:100 */
  padding-left: 8px;
}

.column-style-item-invalid.column-style-item-selected {
  background-color: #ffecb3; /** orange:100 */
  border-left: 4px solid #ff8f00; /** orange:800 */
  padding-left: 8px;
}

.column-style-insert-control:hover {
  cursor: pointer !important;
}

.column-style-item {
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  margin-bottom: 0;
  margin-left: -8px;
  margin-right: -8px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 8px;
  padding-top: 12px;
}

.column-style-insert-row {
  margin-top: 16px;
}

.column-style-item-selected {
  background-color: #e3f2fd; /** blue:50 */
  border-left: 4px solid #1565C0; /** blue:800 */
  padding-left: 8px;
}

.column-style-item-invalid {
  background-color: #ffecb3; /** amber:100 */
  padding-left: 12px;
}

.column-style-item-invalid.column-style-item-selected {
  background-color: #ffecb3; /** orange:100 */
  border-left: 4px solid #ff8f00; /** orange:800 */
  padding-left: 8px;
}

.column-style-insert-control:hover {
  cursor: pointer !important;
}

Fix left margin on invalid unselected column styles.


/*
 * Custom CSS styes for example page
 */

/* Header */

header {
  display: none;
}

/* Grid example */

.example-grid [class^="ether-md-"] {
  margin-bottom: .75rem;
  height: 32px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
  text-transform: uppercase;
  background: #eee;
  border-radius: 4px;
}

.example-grid [class^="ether-md-"]:nth-of-type(n+2) {
  border-left: 4px solid #fff;
}

/* Footer */

footer {
  padding-bottom: 2rem;
}

footer p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: .85rem;
  text-align: center;
}

/*
 * Custom CSS styes for example page
 */

/* Header */

header {
  display: none;
}

/* Grid example */

.example-grid [class^="ether-md-"] {
  margin-bottom: .75rem;
  height: 32px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
  text-transform: uppercase;
  background: #eee;
  border-radius: 4px;
}

.example-grid [class^="ether-md-"]:nth-of-type(n+2) {
  border-left: 4px solid #fff;
}

.section--grid-ext .ether-md-23:first-of-type {
  width: 95.3%;
}

/* Footer */

footer {
  padding-bottom: 2rem;
}

footer p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: .85rem;
  text-align: center;
}

Fix for broken layout caused by blank border used in example.


.super-number {
  position: relative;
}
.super-number a.increment,
.super-number a.decrement {
  -moz-transition: background linear 0.2;
  -webkit-transition: background linear 0.2s;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  transition: background linear 0.2s;
  user-select: none;
  z-index: 1;
}

.super-number a.increment {
  bottom: 100%;
}

.super-number a.decrement {
  top: 0;
}

.super-number a:focus {
  outline: none;
};

.super-number {
  position: relative;
}
.super-number .increment,
.super-number .decrement {
  -moz-transition: background linear 0.2;
  -webkit-transition: background linear 0.2s;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  transition: background linear 0.2s;
  user-select: none;
  z-index: 1;
}

.super-number .increment {
  bottom: 100%;
}

.super-number .decrement {
  top: 0;
}

.super-number .increment:focus,
.super-number .decrement:focus {
  outline: none;
};

Remove unneeded specificity from the arrows component


.replacementCheckboxHolder {
    display : inline-block;
    width: 2%;
}

.checkboxReplacement {
    display: inline-block;
}

.emptyCheckbox {
    border: 2px solid #000;
    height: 10px;
    width: 10px;
    cursor: pointer;
    transition: .3s;
    position: relative;
    top: 2px;
}

.emptyCheckbox.error {
    border-color: rgb(192, 0, 0)
}

.filledCheckbox, .filledCheckbox.error {
    top: -2px;
    width: 16px;
    height: 8px;
    border: 2px solid #0f9d58;
    border-top: none;
    border-right: none;
    opacity: 1;
    z-index: 888;
    transform: rotate(-66deg);
}

.replacementCheckboxHolder {
    display : inline-block;
    width: 2%;
}

.checkboxReplacement {
    display: inline-block;
}

.emptyCheckbox {
    border: 2px solid #000;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    position: relative;
    top: 2px;
}

.emptyCheckbox.error {
    border-color: rgb(192, 0, 0)
}

.filledCheckbox, .filledCheckbox.error {
    top: -2px;
    width: 16px;
    height: 8px;
    border: 2px solid #0f9d58;
    border-top: none;
    border-right: none;
    opacity: 1;
    z-index: 888;
    -webkit-transform: rotate(-66deg);
    -moz-transform: rotate(-66deg);
    -o-transform: rotate(-66deg);
    transform: rotate(-66deg);
}

Fix improper check rendering in Safari

Fix improper check rendering in Safari


@import "reset-to-defaults.css";

* {
  color: blue;
}

.notebook tab GtkLabel {
  color: blue
}
.notebook tab tab GtkLabel {
  color: red
}

/* for reference */
#red {
  color: red
}

@import "reset-to-defaults.css";

* {
  -GtkNotebook-tab-overlap: 0; /* work around a notebook tab rendering bug */
  color: blue;
}

.notebook tab GtkLabel {
  color: blue
}
.notebook tab tab GtkLabel {
  color: red
}

/* for reference */
#red {
  color: red
}

Work around a notebook tab rendering bug

This avoids assertions from gtk_render_frame_gap.


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

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

Add second third block blog index stylesheet


body {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  font-size: 16pt;
  line-height: 1.5em;
}

table {
    margin: auto;
    font-size: 13pt;
    border: black solid 1px;
}

th {
    border-bottom: black solid 1px;
    padding: 2px;
}

td {
    padding: 2px;
}

body {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  font-size: 16pt;
  line-height: 1.5em;
  background-color: #fafafa;
}

table {
    margin: auto;
    font-size: 13pt;
    border: black solid 1px;
}

th {
    border-bottom: black solid 1px;
    padding: 2px;
}

td {
    padding: 2px;
}

Make the background a very light gray.

Make the background a very light gray.


@import 'perl.css';
/* We can't include the rules below inside perl.css, because it's used by other sites,
   and we can't specify more than one stylesheet to the podhtml.pl program. So... import
*/

html {
    padding-top: 100px;
}

html:before {
    content: "Note: these documents may be out of date. For Perl 6 documentation see docs.perl6.org; for specs, see the official test suite.";
    text-align: center;
    background: red;
    color: white;
    width: 100%;
    display: block;
    padding: 20px;
    font-size: 110%;
    position: absolute;
    top: 0;
    left: 0;
}

Work around the issue of multiple sites using perl.css


body {
	font-family: 'Liberation Sans', 'Nimbus Sans L', FreeSans,
		'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
	font-family: 'PT Serif', 'Droid Serif', 'DejaVu Serif', serif;
}

ul, div.sphinxsidebar ul, div.sphinxsidebar ul ul, div.sphinxsidebar ul.want-points {
	list-style-type: none;
	margin-left: 1em;
}
ul li:before {
	content: '-';
	position: relative;
	left: -5px;
}
ul li {
	text-indent: -5px;
}
.field-list ul {
	padding-left: 0;
}
.field-list li:before {
	content: '';
	position: inherit;
	left: 0;
}
.field-list li {
	text-indent: 0;
}

pre {
	padding: 7px 10px;
}
pre, code {
	font-family: 'M+ 1m', 'Droid Sans Mono', 'DejaVu Sans Mono', monospace;
}

body {
	font-family: 'Liberation Sans', 'Nimbus Sans L', FreeSans,
		'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
	font-family: 'PT Serif', 'Droid Serif', 'DejaVu Serif', serif;
}

ul, div.sphinxsidebar ul, div.sphinxsidebar ul ul, div.sphinxsidebar ul.want-points {
	list-style-type: none;
	margin-left: 1em;
}
ul li:before {
	content: '-';
	position: relative;
	left: -5px;
}
ul li {
	text-indent: -5px;
}
.field-list ul {
	padding-left: 0;
}
.field-list li:before {
	content: '';
	position: inherit;
	left: 0;
}
.field-list li {
	text-indent: 0;
}

pre {
	padding: 7px 10px;
}
code {
	background: transparent;
}
pre, code {
	font-family: 'M+ 1m', 'Droid Sans Mono', 'DejaVu Sans Mono', monospace;
}

table.docutils {
	border: 0;
	box-shadow: none;
}

table.docutils th {
	border-width: 0 0 2px;
}

table.docutils td {
	border-width: 0;
}

table.docutils tbody tr.row-odd { background: transparent }
table.docutils tbody tr.row-even { background: #ecf0f3 }

Change styling for tables in documentation.


body {
  background-color: #FA58AC;
  margin: 1em 1em 1em 1em;
  padding: 1em 1em 1em 1em;
}
.center {
  text-align: center;
}
h1 {
  border:20px solid #D0FA58;
  padding: 0 1em 0 1em;
  background-color: #81F7BE;
}
h2 {
  text-decoration: underline;
}
p span {
  font-size: 18px;
  font-family: cursive;
}

Add Blog Template CSS File

Add Blog Template CSS File


.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  /* This makes the labels be on one side and the form elements on the other and allows setting a common width */
  justify-content: space-between;
}

.label {
  margin: 0;
  margin-bottom: .5em;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: lowercase;
  color: #818395;
}

.activeLabel {
  color: #008cba;
  text-transform: uppercase;
}

/*
  Edge case: There is a problem with the autoresize mechanism of <AutosizeTextarea />.
  If the stylesheets aren't loaded yet then the height of the textarea is going to wrong.
*/
.input {
  width: 75%;
  margin: 0;
  margin-bottom: .5em;
  border: 0;
  font-family: "Space Mono", monospace;
  font-size: 1em;
  letter-spacing: 3px;
  resize: none;
}

.input:focus {
  /* The no-outline-problem is solved via JS (see .activeLabel) */
  outline: 0;
}

.input::selection {
  color: #fff;
  background: #008cba;
}

Change selection-color to match color scheme


.layout_left {
	display: none;
}

.layout_right {
	position: fixed;
	top: 40px !important;
	bottom: 0px;
	left: 0px !important;
	right: 0px;
}

ul.links {
	height: 40px !important;
}

ul.links li, ul.links li a {
	width: 40px !important;
}

ul.links li.title {
	width: auto !important;
}

.layout_left {
	display: none;
}

.layout_right {
	position: fixed;
	top: 40px !important;
	bottom: 0px;
	left: 0px !important;
	right: 0px;
}

ul.links {
	height: 40px !important;
}

ul.links li, ul.links li a {
	width: 40px !important;
}

ul.links li.title {
	width: auto !important;
	left: 200px !important;
}

Fix title position in portrait mode

Fix title position in portrait mode

Signed-off-by: Guillaume Clement <3b9efcf0dcc9fb33b0355f12fedfe498e1880012@baobob.org>


.rgh-remove-diff-signs .blob-code-inner::before, /* Inline review blocks in PRs */
.rgh-remove-diff-signs .blob-code-marker-cell::before { /* Commit page */
	content: none;
}

.rgh-remove-diff-signs .blob-code-inner::before, /* Inline review blocks in PRs */
.rgh-remove-diff-signs .blob-code-marker-cell::before { /* Commit page */
	visibility: hidden;
}

Fix incorrect `tab` size in Markdown files’ diffs

Fixes #2970


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

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

	vertical-align: middle;
}

.controls > .btn {
	margin-right: 4px;
}

.controls .action-buttons {
	display: inline-block;
}

#success.hide {
	display: inline-block;

	opacity: 0;

	-webkit-transition: opacity 1s linear;
}

#success.show {
	display: inline-block;

	opacity: 1;
}

.hidden {
	display: none;
}

.input-nano {
	width: 25px;
}

a.btn.handle {
	cursor: pointer;
}

canvas {
	display: none;
}

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

.controls > .btn {
	margin-right: 4px;
}

.controls .action-buttons {
	display: inline-block;
}

.controls .input-nano {
	width: 25px;
}

.controls a.btn.handle {
	cursor: pointer;
}

#success.hide {
	display: inline-block;

	opacity: 0;

	-webkit-transition: opacity 1s linear;
}

#success.show {
	display: inline-block;

	opacity: 1;
}

.hidden {
	display: none;
}

canvas {
	display: none;
}

Clean up CSS a bit. Remove unused btn-toolbar properties.


@import url(master.css);

body {
	margin-left: 15%;
	width: 70%;
	max-width: 50em;
}

@import url(master.css);

@media only screen {
    body {
        margin-left: auto;
        margin-right: auto;
        padding: 0px 0px;
        width: 100%;
        max-width: 45em;
    }

    .document {
        padding: 0.5em;
    }
}

@media only screen and (max-width: 400px) {
    body { font-size: 0.8em; }
}

Use adaptive margins and font size

Use adaptive margins and font size


/* Clear button */
.wgt-Signature div {
    clear: both;
}

.wgt-Signature canvas,
.wgt-Signature img {
    position: relative;
    left:     0px;
    right:    0px;
    max-width: none;
}

.signature_unset canvas {
    display: block;
}

.signature_unset img {
    display: none;
}

.signature_unset button {
    display: none;
}

.signature_set canvas {
    display: none;
}

.signature_set img {
    display: block;
    opacity: 0.5;
}

.signature_set button {
    display: block;
}

.signature_disabled button {
    display: none;
}

/* Clear button */
.wgt-Signature div {
    clear: both;
}

.wgt-Signature canvas,
.wgt-Signature img {
    position: relative;
    left:     0px;
    right:    0px;
    max-width: none;
}

.signature_unset canvas {
    display: block;
    touch-action: none;
}

.signature_unset img {
    display: none;
}

.signature_unset button {
    display: none;
}

.signature_set canvas {
    display: none;
}

.signature_set img {
    display: block;
    opacity: 0.5;
}

.signature_set button {
    display: block;
}

.signature_disabled button {
    display: none;
}

Disable default touch action on IE11

Disable default touch action on IE11


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

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

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

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

#sixth_from_top {
display: block;
position: relative;
top: 860px;
left: 100px;
}

#seventh_from_top {
display: block;
position: relative;
top: 870px;
left: 100px;
}

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

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

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

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

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

#sixth_from_top {
display: block;
position: relative;
top: 1720px;
left: 100px;
}

#seventh_from_top {
display: block;
position: relative;
top: 1730px;
left: 100px;
}

#eighth_from_top {
display: block;
position: relative;
top: 1740px;
left: 100px;
}

#ninth_from_top {
display: block;
position: relative;
top: 1750px;
left: 100px;
}

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

Add eighth ninth to blog index stylesheet


html {
  font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

blockquote {
  border-left-color: #ddd;
}

.post-date {
  display: block;
  color: #c9c9c9;
  font-size: 85%;
}

a {
  color: #0FA5D8;
}

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

.masthead {
  margin: 1rem 0;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

footer {
  margin-bottom: 2rem;
  color: #c9c9c9;
}

html {
  font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

blockquote {
  border-left-color: #ddd;
}

.post-date {
  display: block;
  color: #c9c9c9;
  font-size: 85%;
}

a {
  color: #0FA5D8;
}

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

.masthead {
  margin: 1rem 0;
}

footer {
  margin-bottom: 2rem;
  color: #c9c9c9;
}

Remove rules for images inside .masthead-title


/* Base CSS rules */
.comment_blurb {
   margin-top: 20px;
   border-bottom: 0.7px solid #ccc;
}

.comment_blurb:last-of-type {
   border-bottom: none;
}

.author {
   padding-right: 10px;
}

#following_feed {
   display: none;
   margin-bottom: 30px;
}

#subreddits_feed {
   display: none;
   margin-bottom: 30px;
}

#preferences_page {
   display: none;
   margin-bottom: 30px;
}

.section_title {
   margin-bottom: 20px;
}

/* Subreddit self and comment text */
.md {
   padding-top: 20px;
}

#loading_area {
   height:200px;
   width:400px;
   margin: 200px auto;
   text-align: center;
}

/* Base CSS rules */
.comment_blurb {
   margin-top: 20px;
   border-left: 4px solid #558CCC;
   padding: 20px;
   max-width: 600px;
   box-shadow: 1px 1px 0.5px grey, 0px -0.5px 0.5px grey;
}

.author {
   padding-right: 10px;
}

#following_feed {
   display: none;
   margin-bottom: 30px;
}

#subreddits_feed {
   display: none;
   margin-bottom: 30px;
}

#preferences_page {
   display: none;
   margin-bottom: 30px;
}

.section_title {
   margin-bottom: 20px;
}

/* Subreddit self and comment text */
.md {
   padding-top: 20px;
}

#loading_area {
   height:200px;
   width:400px;
   margin: 200px auto;
   text-align: center;
}

Make comment and subreddit posts fabulous


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

body {
  background: #F7F7F7;
}

.header-holder {
  padding: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  border-radius: 3px;
  background-color: #fff;
}

h1 small {
  color: #6D6D6D;
  font-weight: 200;
  font-size: 70%;
}

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

*{
  box-sizing: inherit;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

.party-theme{
	/*background: -webkit-canvas(squares);*/
	background-color: red;
}

body {
  background: #F7F7F7;
}

.header-holder {
  padding: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  border-radius: 3px;
  background-color: #fff;
}

h1 small {
  color: #6D6D6D;
  font-weight: 200;
  font-size: 70%;
}

Change default font and box-sizing

Change default font and box-sizing


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

body {
    text-align: center
}

.container{
	background-color: blue
}

Add code to previous state for stylesheet to be read accordingly


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

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

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

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

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

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

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

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

Add border to nav bar

Add border to nav bar


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

}

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

}

Fix second from top in week3

Fix second from top in week3


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

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

Change second block technical relative stylesheet


body {
    margin-top: 5rem;
}

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

body {
    margin-top: 5rem;
}

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

Add overflow hidden to cells

Add overflow hidden to cells


#welcome {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

.lead {
    font-size: 21px;
}

.menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    overflow: hidden;
}

.menu li {
    float: left;
    margin-right: 10px;
}

.menu a {
    text-decoration: none;
    color: #000000;
}

.menu a:hover {
    color: #4183C4;
}

h1 {
    margin-bottom: 0;
}

input {
    width: 300px;
    padding: 10px;
    font-size: 16px;
}

dt {
    font-size: 18px;
}

dd {
    margin: 5px 20px;
}

#welcome {
    max-width: 800px;
    margin: 0 auto;
}

.lead {
    font-size: 21px;
}

.menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    overflow: hidden;
}

.menu li {
    float: left;
    margin-right: 10px;
}

.menu a {
    text-decoration: none;
    color: #000000;
}

.menu a:hover {
    color: #4183C4;
}

h1 {
    margin-bottom: 0;
}

input {
    width: 300px;
    padding: 10px;
    font-size: 16px;
}

dt {
    font-size: 18px;
}

dd {
    margin: 5px 20px;
}

Remove extra white space at the top of the page


@import "../_variables.css";

.decks {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--base-spacing);
  padding: var(--base-spacing);
}

.deckWrapper {
  padding: var(--base-spacing);
  width: 100%;
  height: 240px;
}

.deck {
  width: 100%;
  height: 100%;
}

@media (--media-md) {
  .deckWrapper {
    width: 320px;
  }
}

@import "../_variables.css";

.decks {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--base-spacing);
  padding: var(--base-spacing);
}

.deckWrapper {
  padding: var(--base-spacing);
  width: 100%;
  min-height: 240px;
}

.deck {
  width: 100%;
  height: 100%;
}

@media (--media-md) {
  .deckWrapper {
    width: 320px;
  }
}

Fix problem with deck height in the decks page


/*
    Document   : Adsum Styles
    Created on : Aug 21, 2013, 4:56:49 PM
    Author     : Chris Vogt <cjv@sedonaconference.org>
*/

body {
    background: url('../img/pattern/square_bg.png') repeat #fefefe;
}
.navbar-inverse .navbar-inner {
    background-color: #563d7c;
    background-image: none;
}
.navbar-inverse .navbar-inner a, .navbar-inverse .navbar-inner .nav a {
    color: #cecece;
}
.dropdown-menu>li>a {
    color: #686868!important;
}
.navbar.navbar-static-top {
    border-bottom: 4px solid #FFD700;
}
#main-container {
    margin-top: 24px;
}
.table {
    background: #fefefe;
}
td.actions {
    width: 174px;
    max-width: auto;
}
.well {
    background: rgba(250,250,250,0.8);
}
form#AttendeeStatusLogEditForm .datetime select {
    width: auto;
}
select#AttendeeAttendee {
    min-height: 400px;
    height: 80%;
    height: auto;
}

Enlarge Assign attendees select box.

Enlarge Assign attendees select box.


@media (min-width: 768px) {
            .emission-docs-masthead {
                height: 100%;
                margin: 0;
                padding: 80px 0;
            }
        }

        .emission-docs-masthead {
            text-align: center;
            height: 90vh;
            position: relative;
            padding: 0px 0px;
            color: #cdbfe3;
            text-align: center;
            text-shadow: 0 1px 0 rgba(0,0,0,.1);
            background-color: #54DCC1;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#54DCC1),to(#01D0A7));
            background-image: -webkit-linear-gradient(top,#54DCC1 0,#01D0A7 100%);
            background-image: -o-linear-gradient(top,#54DCC1 0,#01D0A7 100%);
            background-image: linear-gradient(to bottom,#54DCC1 0,#01D0A7 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54DCC1', endColorstr='#01D0A7', GradientType=0);
            background-repeat: repeat-x;
        }

        .nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

        img {
          display: block;
          width: auto;
          height: auto;
          max-width: 100vh;
          max-height: 90vh;
          margin: 20px auto;
        }

        uib-carousel {
            width: 100vh;
            height: 90vh;
        }

Add a new css file for this page

Add a new css file for this page


body {
 padding-bottom: 28px;
}

footer {
  width: 98%;
  position: fixed;
  left: 0;
  bottom: 0;
  font-size: smaller;
  color: #666;
  background: #ddd;
  border-top: 1px solid rgba(0,0,0,0.2);
  padding: 4px 16px;
}
footer #time {
  float: right;
}

/* prettier tables */
td.num {
  vertical-align:middle;
  font:small-caps bold x-small sans-serif;
  text-align: center;
}
td.dollar {
  text-align: right;
}
td.percent:after {
  content: '%';
}
td.right {
  text-align: right;
}

#simplemodal-overlay {
  background-color:#000;
}
#simplemodal-container {
  background: #CEB996;
  -webkit-box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
  border-radius: 10px;
}
.simplemodal-data {
  padding: 12px;
}

body {
 padding-bottom: 28px;
}

footer {
  width: 98%;
  position: fixed;
  left: 0;
  bottom: 0;
  font-size: smaller;
  color: #666;
  background: #ddd;
  border-top: 1px solid rgba(0,0,0,0.2);
  padding: 4px 16px;
}
footer #time {
  float: right;
}

/* prettier tables */
td.num {
  vertical-align:middle;
  font:small-caps bold x-small sans-serif;
  text-align: center;
}
td.dollar, td.right, td.bool {
  text-align: center;
}
td.percent:after {
  content: '%';
}

#simplemodal-overlay {
  background-color:#000;
}
#simplemodal-container {
  background: #CEB996;
  -webkit-box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
  border-radius: 10px;
}
.simplemodal-data {
  padding: 12px;
}

Tweak style of dump tables

Tweak style of dump tables


.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
  background-color: rgb(255, 119, 0);
}

a {
  color: rgb(255, 119, 0);
}

a:hover {
  color: rgb(255, 119, 0);
}

.container {
  max-width: 500px
}

.hero-unit {
  padding: 40px 40px 15px 40px
}

.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
  background-color: rgb(255, 119, 0);
}

a {
  color: rgb(255, 119, 0);
}

a:hover {
  color: rgb(255, 119, 0);
}

body {
  margin: 0 30px;
}

.container {
  max-width: 580px
}

.hero-unit {
  padding: 40px 40px 15px 40px
}

Add some margins left & right for Chrome