/* SwatActions */
.swat-actions .swat-actions-controls * {
	vertical-align: middle;
}

.swat-actions .swat-actions-message {
	border: 1px solid #f0dca1;
	background-color: #fffbc9;
	color: #7b4b09;
	margin: 0 0 0 7px;
	padding: 5px 25px 5px 5px;
	border-radius: 4px;
	position: relative;
}

.swat-actions .swat-actions-message-dismiss-link,
.swat-actions .swat-actions-message-dismiss-link:link,
.swat-actions .swat-actions-message-dismiss-link:visited {
	display: block;
	font-size: 85%;
	position: absolute;
	top: 5px;
	right: 10px;
	height: 14px;
	width: 14px;
	background: url(../images/dismiss.png) 0 0 no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-decoration: none;
	outline: none;
}

.swat-actions .swat-actions-message-dismiss-link:hover {
	background-position: 0 -14px;
}

.swat-actions label {
	display: inline;
}

/* SwatActions */
.swat-actions .swat-actions-controls * {
	vertical-align: middle;
}

.swat-actions .swat-actions-message {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #f0dca1;
	background-color: #fffbc9;
	color: #7b4b09;
	margin: 0 0 0 7px;
	padding: 5px;
	border-radius: 4px;
}

.swat-actions .swat-actions-message-dismiss-link,
.swat-actions .swat-actions-message-dismiss-link:link,
.swat-actions .swat-actions-message-dismiss-link:visited {
	display: block;
	margin-left: 4px;
	flex: 0 0 auto;
	font-size: 85%;
	height: 14px;
	width: 14px;
	background: url(../images/dismiss.png) 0 0 no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-decoration: none;
	outline: none;
}

.swat-actions .swat-actions-message-dismiss-link:hover {
	background-position: 0 -14px;
}

.swat-actions label {
	display: inline;
}

Fix styles of SwatActions message in Safari


/*PAGE LAYOUT*/

html, body {
    height:100%;
    text-align:center;
}

body {
    background:url("../main/bg-imgs/gallery.jpg"); /*looks for images from the viewpoint of the css file*/
    background-size:cover;
}

.wrap {
    min-height: 100%;
    height: auto;
}

.jumbotron {
    background:black;
    font-family:Verdana;
    font-weight:bold;
    color:white;
    margin-bottom:0px;
    padding: 10px 0px;
}

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

/*columns*/

.columns {
    margin:7% auto;
    width:80%;
}

.home-container {
    font-family:"Courier New", Courier, monospace;
    font-weight:bold;
    font-size:1.2em;
}

.login, .register {
    background-color:#81DAF5;
    height:240px;
    padding-left:1%;
    border-radius: 6px 6px 6px 6px;
}

.login {
    padding-top: 5%;
}

.register{
    padding-top: 2%;
}

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

/*footer*/

#footer {
    border-color:#848484;
    background-color:black;
    color:#D8D8D8;
}

/*PAGE LAYOUT*/

html, body {
    height:100%;
    text-align:center;
}

body {
    background:url("../main/bg-imgs/gallery.jpg"); /*looks for images from the viewpoint of the css file*/
    background-size:cover;
}

.wrap {
    min-height: 100%;
    height: auto;
}

.jumbotron {
    background:black;
    font-family:Verdana;
    font-weight:bold;
    color:white;
    margin-bottom:0px;
    padding: 10px 0px;
}

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

/*columns*/

.columns {
    position: absolute;
    margin:9% 10%;
    width:80%;
}

.home-container {
    font-family:"Courier New", Courier, monospace;
    font-weight:bold;
    font-size:1.2em;
}

.login, .register {
    background-color:#81DAF5;
    height:240px;
    padding-left:1%;
    border-radius: 6px 6px 6px 6px;
}

.login {
    padding-top: 5%;
}

.register{
    padding-top: 2%;
}

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

/*footer*/

#footer {
    border-color:#848484;
    background-color:black;
    color:#D8D8D8;
}

Implement better solution for home page div positioning


/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
	font-size: 0;
	position: absolute;
	background: white url('../img/Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
	font-size: 1px;
	width: 7px !important;
	height: 7px !important;
	border: 1px #eee solid;
	background-color: #333;
	*width: 9px;
	*height: 9px;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
	background: yellow;
}
.custom .jcrop-handle
{
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
	font-size: 0;
	position: absolute;
	background: white url('../img/Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
	font-size: 1px;
	width: 7px !important;
	height: 7px !important;
	border: 1px #eee solid;
	background-color: #333;
	width: 9px;
	height: 9px;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
	background: yellow;
}
.custom .jcrop-handle
{
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Fix errors in CSS attribute names

Fix errors in CSS attribute names


.history-page {
    width: 960px;
    margin: 0 auto;

    &__month-container {
        width: 960px;
        height: 100%;
        position: relative;
    }

    &__month-dropzone {
        padding: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #DDDDDD;
    }
}

.month {
    &__title {
        font-family: Nunito, san-serif;
        text-align: center;
    }
}

.month-detail {
    width: 360px;
    margin: 0 auto;

    &__title {
        padding-top: 50px;
        text-align: center;
        text-transform: capitalize;
    }

    &__content {
        padding-top: 40px;
    }

    &__month-total {
        display: flex;
        align-items: center;
    }

    &__month-total-header {
        margin-right: 20px;
    }

    &__days {
        padding-top: 20px;
        margin: 0;
        list-style-type: none;
    }

    &__day {
        padding-top: 20px;
        display: flex;
        align-items: center;
    }

    &__date {
        display: inline-block;
        margin-right: 20px;
    }

    &__duration {
        display: inline-block;
        font-size: 24px;
    }
}

.history-page {
    width: 960px;
    margin: 0 auto;

    &__month-container {
        width: 960px;
        height: 100%;
        position: relative;
    }

    &__month-dropzone {
        padding: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #DDDDDD;
    }
}

.month {
    &__title {
        font-family: Nunito, san-serif;
        text-align: center;
    }
}

.month-detail {
    width: 360px;
    margin: 0 auto;

    &__title {
        padding-top: 35px;
        text-align: center;
        text-transform: capitalize;
    }

    &__content {
        padding-top: 40px;
    }

    &__month-total {
        display: flex;
        align-items: center;
    }

    &__month-total-header {
        margin-right: 20px;
    }

    &__days {
        padding-top: 20px;
        margin: 0;
        list-style-type: none;
    }

    &__day {
        padding: 20px 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #DDDDDD;
    }

    &__date {
        display: inline-block;
        margin-right: 20px;
    }

    &__duration {
        display: inline-block;
        font-size: 24px;
    }
}

Add styling to separate sessions

Add styling to separate sessions


.npmhub-deps {
  list-style: none;
  padding: 0 !important;
}
.npmhub-deps > li {
  padding: 10px;
  border-bottom: 1px solid var(--color-border-primary, #ddd);
}
.npmhub-deps > li:last-child {
  border-bottom: none;
}
li.npmhub-empty {
  opacity: 0.6;
}
.npmhub-deps em {
  color: darkgray;
}
.npmhub-header {
  float: right;
  margin-right: 3px;
}
.npmhub-header .btn {
  position: relative;
  margin: 3px 0;
}
.npmhub-deps:empty:before {
  display: block;
  content: 'loading';
  padding: 10px;
  animation: npmhub-pulse 1s infinite;
}
@keyframes npmhub-pulse {
  50% {
    opacity: 0.5;
  }
}

.npmhub-deps {
  list-style: none;
  padding: 0 !important;
}
.npmhub-deps > li {
  padding: 10px;
  border-bottom: 1px solid var(--color-border-muted, #ddd);
}
.npmhub-deps > li:last-child {
  border-bottom: none;
}
li.npmhub-empty {
  opacity: 0.6;
}
.npmhub-deps em {
  color: darkgray;
}
.npmhub-header {
  float: right;
  margin-right: 3px;
}
.npmhub-header .btn {
  position: relative;
  margin: 3px 0;
}
.npmhub-deps:empty:before {
  display: block;
  content: 'loading';
  padding: 10px;
  animation: npmhub-pulse 1s infinite;
}
@keyframes npmhub-pulse {
  50% {
    opacity: 0.5;
  }
}

Update color border to match new GitHub variable

https://github.com/sindresorhus/refined-github/issues/4855


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

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

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

  text-align: center;

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

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

  background: #b00;
}

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

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

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

  text-align: center;

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

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

  background: #b00;
}

Move banner to right-hand corner

Move banner to right-hand corner


circle.node {
  stroke: #fff;
  stroke-width: 1.5px;
  opacity: 1.;
}

line.link {
  stroke: #999;
  stroke-opacity: .6;
}

text.node-label {
    font-weight: bold;
    font-family: Tahoma, Geneva, sans-serif;
    color: rgb(100,100,100);
}

svg {
    display:block; /* required for firefox to give valid
    height and width used values for getComputedStyle()
    see https://bugzilla.mozilla.org/show_bug.cgi?id=874919
                    */
    border: solid 1px gray;
    margin:1em;
    height:calc(100% - 10em);
    width: calc(100% - 2em);
}

circle.node {
  stroke: #fff;
  stroke-width: 1.5px;
  opacity: 1.;
}

line.link {
  stroke: #999;
  stroke-opacity: .6;
}

text.node-label {
    font-weight: bold;
    font-family: Tahoma, Geneva, sans-serif;
    color: rgb(100,100,100);
}

svg {
    display:block; /* required for firefox to give valid
    height and width used values for getComputedStyle()
    see https://bugzilla.mozilla.org/show_bug.cgi?id=874919
                    */
    //border: solid 1px gray;
    margin:1em;
    height:calc(100% - 10em);
    width: calc(100% - 2em);
}

Remove the border from the SVG file

Remove the border from the SVG file


.Presence {
  float: left;
  width: 20%;
  min-width: 5cm;
  max-width: 15cm;
  padding: .2cm;
  background: #fff;
}

#editor {
  margin-left: 20%;
  /* This should have a min-margin-left: 5cm
     see http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/
   */
}

@media screen and (max-width: 991px) {
  .Presence {
    float: none;
    position: absolute;
    bottom: 0;
    left: .5cm;
    border: 1px solid #777;
    border-radius: .3cm;
  }
  .Presence .Presence__Users,
  .Presence .Presence__Users,
  .Presence .Presence__Title small{
    display: none;
  }

  .Presence:hover, .Presence:active {
    height: 10cm;
    width: 5cm;
  }
  .Presence:hover .Presence__Users,
  .Presence:active .Presence__Users {
    display: block;
  }
  .Presence:hover .Presence__Title small,
  .Presence:active .Presence__Title small {
    display: inline;
  }

  #editor {
    margin-left: 0;
  }
}

.Presence {
  float: left;
  width: 20%;
  min-width: 5cm;
  max-width: 15cm;
  padding: .2cm;
  background: #fff;
}

#editor {
  margin-left: 20%;
  /* This should have a min-margin-left: 5cm
     see http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/
   */
}

@media screen and (max-width: 991px) {
  .Presence {
    float: none;
    position: absolute;
    bottom: 0;
    left: .5cm;
    border: 1px solid #777;
    border-radius: .3cm;
    padding:0;
  }
  .Presence__Title {
    padding-left: .2cm;
  }
  .Presence__User {
    padding: 0 .2cm;
  }
  .Presence .Presence__Users,
  .Presence .Presence__Users,
  .Presence .Presence__Title small{
    display: none;
  }

  .Presence:hover, .Presence:active {
    height: 10cm;
    width: 5cm;
  }
  .Presence:hover .Presence__Users,
  .Presence:active .Presence__Users {
    display: block;
  }
  .Presence:hover .Presence__Title small,
  .Presence:active .Presence__Title small {
    display: inline;
  }

  #editor {
    margin-left: 0;
  }
}

Fix container padding in small-screen mode

so it's the same size as plugin-chat


#egg-img {
  width: 100px;
  height: 100px;
  margin-top: 30px;
  margin-bottom: 20px;
}

#header-row {
  background-color: #FFFF4E;
}

textarea {
  resize: none;
}

* {
  /*border: 1px red solid;*/
}

#egg-img {
  width: 100px;
  height: 100px;
  margin-top: 30px;
  margin-bottom: 20px;
}

#header-row {
  background-color: #FFFF4E;
}

textarea {
  resize: vertical;
}

* {
  /*border: 1px red solid;*/
}

Allow vertical resizing of textareas.

Allow vertical resizing of textareas.


html,body{
  height: 100%;
  width: 100%;
  margin: 0;
}
#cover{
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-attachment: fixed;
}
.section-2{
  height: 100%;
  background-color: red;
}
.phone{
  position: fixed;
  right: 10%;
  top: 10%;
}
.iphone{
  height: 700px;
}
#main-frase{
  font-size: 1.5em;

}
.center{
  margin: 0 auto;
  width: 90%;
}
h1{
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Lora', serif;*/
  margin-top: 20%;
}

html,body{
  height: 100%;
  width: 100%;
  margin: 0;
}
#cover{
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-attachment: fixed;
}
.section-2{
  height: 100%;
  background-color: red;
}
.section-3{
  height: 100%;
  background-color: yellow;
}
.phone{
  position: fixed;
  right: 0;
  top: 10%;
}
.inner-phone{
  position: absolute;
  top: 16.2%;
  left: 31.2%;
  height: 471px;
  width: 265px;
  background-color: green;
}
.iphone{
  height: 700px;
}
#main-frase{
  font-size: 1.5em;

}
.center{
  margin: 0 auto;
  width: 80%;
}
h1{
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Lora', serif;*/
  margin-top: 20%;
}

Add first css to section 3 and inner phone content


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

Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

For example, to make the inline hint paragraphs a little darker in color than the standard #666:

form.formtastic fieldset > ol > li p.inline-hints { color:#333; }

HINT:
The following style may be *conditionally* included for improved support on older versions of IE(<8)
form.formtastic fieldset ol li fieldset legend { margin-left: -6px;}

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

form.formtastic {
  padding-top: 10px;
}

form.formtastic fieldset.buttons {
  padding-left: 15%;
}

form.formtastic > fieldset > ol > li > label {
  text-align: right;
  padding-right: 6px;
  width: 15%;
}

form.formtastic fieldset > ol > li.text textarea,
form.formtastic fieldset > ol > li.string input,
form.formtastic fieldset > ol > li.password input,
form.formtastic fieldset > ol > li.numeric input,
form.formtastic fieldset > ol > li.email input,
form.formtastic fieldset > ol > li.url input,
form.formtastic fieldset > ol > li.phone input,
form.formtastic fieldset > ol > li.search input { width: 82%; }

input#task_remaining, input#task_estimate {
  max-width: 200px;
}

Make the task form look reasonably sensible following migration to formtastic


/* TODO: Designe me. */

.terminal .terminal-output div div,
.cmd .prompt
{
    line-height: 120%;
}

.terminal,
.cmd
{
    font-size: 16px;
    line-height: 120%;
}

/* bootstrap padding */
body { padding-top: 51.5px }
.header { color: #fff; }

.terminal { border: 1px solid #0071BC; }
html,body { height:100%; }
.container {
   min-height:100%;
}

@media screen and (min-height : 480px){
   #footer {
      background-color: #F5F5F5;
   }
}

@media screen and (min-height : 780px){
   #footer {
      background-color: #F5F5F5;
      width: 100%;
      position: absolute;
      bottom: 0;
      height: 140px;
   }
}

/* TODO: Designe me. */

.terminal .terminal-output div div,
.cmd .prompt
{
    line-height: 120%;
}

.terminal,
.cmd
{
    font-size: 16px;
    line-height: 120%;
}

/* bootstrap padding */
body { padding-top: 51.5px }
.header { color: #fff; }

.terminal { border: 1px solid #0071BC; }
html,body { height:100%; }
.container {
   min-height:100%;
}

   #footer {
      background-color: #F5F5F5;
   }

Stop absolute position for the footer

Stop absolute position for the footer

GitHub: fix #8

Reported by Naoya Murakami. Thanks!!!


/*
 * Necessary parts from
 * Sphinx stylesheet -- basic theme
 * absent from sphinx_rtd_theme
 * (see https://github.com/readthedocs/sphinx_rtd_theme/issues/301)
 */

/* -- math display ---------------------------------------------------------- */

span.eqno {
    float: right;
}

span.eqno a.headerlink {
    position: absolute;
    z-index: 1;
    visibility: hidden;
}

div.math:hover a.headerlink {
    visibility: visible;
}

/*
 * Other adjustments
 */

/* Make text black instead of gray */
body {
    color: black;
}

Make HTML text black instead of gray-on-gray


h6 {
	color: white;
	font-size: 30px;
}

h1 {
	color: white;
	font-size: 75px;
}

body {
	background-color: #12BFEA;
	text-align: center;
	color: white;
}

h6 {
	color: white;
	font-size: 25px;
}

h1 {
	color: #2E2A64;
	font-size: 70px;
	font-family: Tahoma;

}

body {
	background-color: #FBE2C1;
	text-align: center;
}

Change h1 font color in css file

Change h1 font color in css file


/* Sizes */
:root {
    --top-bar-height: 40px;
    --top-bar-expanded-height: 160px;
    --toolbar-height: 78px;
    --toolbar-drawer-height: 62px;
    --left-sidebar-menu-width: 307px;
    --right-sidebar-menu-width: 323px;
    --study-list-padding: 8%;
    --study-list-padding-medium-screen: 10px;
}

/* Fonts */
:root {
    --logo-font-family: "Sanchez";
    --logo-font-weight: 300;
}

/* Transitions */
:root {
    --transition-duration: 0.3s;
    --transition-effect: ease;
    --sidebar-transition: all 0.3s ease;
}

/* Thicknesses */
:root {
    --viewport-border-thickness: 1px;
    --ui-border-thickness: 1px;
}

/* Sizes */
:root {
  --top-bar-height: 40px;
  --top-bar-expanded-height: 160px;
  --toolbar-height: 78px;
  --toolbar-drawer-height: 62px;
  --left-sidebar-menu-width: 307px;
  --right-sidebar-menu-width: 323px;
  --study-list-padding: 8%;
  --study-list-padding-medium-screen: 10px;
}

/* Fonts */
/* Logo font should be SVG so we don't need to load an entire font */
:root {
  --logo-font-family: 'Sanchez';
  --logo-font-weight: 300; /* Sanchez, 300 does not exist */
}

/* Transitions */
:root {
  --transition-duration: 0.3s;
  --transition-effect: ease;
  --sidebar-transition: all 0.3s ease;
}

/* Thicknesses */
:root {
  --viewport-border-thickness: 1px;
  --ui-border-thickness: 1px;
}

Add note regarding preference for SVG over entire font for logo text


Fix text editor top margin.

Fix text editor top margin.


/* css file for printing */

#headBox, #leftBox, #menuBox, #naviBox, #loginBox {display: none}
#dataBox {width: 100%; margin-left: 0px;}

div.print {display: block}
div.display {display:none}

.breadcrumb {display:none !important}

a[href]:after { content: none }

Hide the links in print css and breadcrumb

Hide the links in the CSS printing template, see https://i.imgur.com/zH8q1U0.png


.md-markdown-editor {
    width: 100%;
    height: 450px;
}

.md-markdown-editor .md-column {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.md-markdown-editor .md-preview {
    padding: 10px;
    margin: 0 10px;
    border: 1px solid;
    max-height: 100%;
    overflow: auto;
}

.md-markdown-editor textarea {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: rgb(98, 101, 118);
    color: #d6d3c3;
    font-size: 1.45em;
}

.md-markdown-editor {
    width: 100%;
    height: 450px;
}

.md-markdown-editor .md-column {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.md-markdown-editor .md-preview {
    padding: 10px;
    margin: 0 10px;
    border: 1px solid;
    max-height: 100%;
    overflow: auto;
}

.md-markdown-editor textarea {
    font-family: monospace;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: rgb(92, 93, 96);
    color: rgb(180, 214, 179);
    font-size: 1.45em;
}

Enforce monospace font in CSS

Enforce monospace font in CSS


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

button.password-button {
  background: #8aaaed;
  color: #fff;
  display: inline;
  font-size: 90%;
  font-weight: bold;
  height: 18px;
  padding: 0 2px;
  position: absolute;
  top: 5px;
  width: 50px;
}

html[dir='ltr'] button.password-button {
  right: 50px;
}

html[dir='rtl'] button.password-button {
  left: 50px;
}

.inactive-password {
  background: transparent;
  border: none;
}

#saved-passwords-list .url {
  box-sizing: border-box;
  width: 40%;
}

#saved-passwords-list .name {
  -webkit-box-flex: 1;
  width: 20%;
}

#saved-passwords-list .password {
  -webkit-box-flex: 1;
  position: relative;
}

#saved-passwords-list .url,
#saved-passwords-list .name,
#password-exceptions-list .url {
  overflow: hidden;
  text-overflow: ellipsis;
}

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

button.password-button {
  background: #8aaaed;
  color: #fff;
  display: inline;
  font-size: 90%;
  font-weight: bold;
  height: 18px;
  padding: 0 2px;
  position: absolute;
  top: 5px;
  width: 50px;
}

html[dir='ltr'] button.password-button {
  right: 50px;
}

html[dir='rtl'] button.password-button {
  left: 50px;
}

input[type="password"].inactive-password {
  background: transparent;
  border: none;
}

#saved-passwords-list .url {
  box-sizing: border-box;
  width: 40%;
}

#saved-passwords-list .name {
  -webkit-box-flex: 1;
  width: 20%;
}

#saved-passwords-list .password {
  -webkit-box-flex: 1;
  position: relative;
}

#saved-passwords-list .url,
#saved-passwords-list .name,
#password-exceptions-list .url {
  overflow: hidden;
  text-overflow: ellipsis;
}

DOMUI: Fix password list items from showing password input field.

BUG=none
TEST=none

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

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


.amp-story-editor-block-mover {
	position: absolute;
	width: 30px;
	height: 100%;
	max-height: 112px;
	top: -15px;
	z-index: 80;
	padding-right: 2px;
	left: -45px;
	margin-top: -8px;
	opacity: 0;
	animation: none;
	transition: opacity .3s;
}

.amp-story-editor-block-mover.is-visible,
div[data-type="amp/amp-story-page"] .wp-block:hover .amp-story-editor-block-mover {
	opacity: 1;
}

.block-editor-block-list__layout .block-editor-block-list__layout .block-editor-block-mover__control {
	box-shadow: none;
}

.block-editor-block-list__layout .block-editor-block-list__layout .block-editor-block-mover__control-drag-handle {
	box-shadow: none !important;
}

.block-editor-block-list__layout .block-editor-block-list__layout .block-editor-block-mover__control-drag-handle:hover {
	box-shadow: inset 0 0 0 1px #e2e4e7 !important;
}

Improve block mover styles by removing box-shadows


.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: hidden;
    width: 80vw;
}

.wrapper > * {
    text-align: center;
}

Refactor Slide Wrapper to a single css file


#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px;
}

#section {
  font-family: Roboto
  width:350px;
  float:left;
  padding:10px;
}

#footer {
  font-family: Roboto
  background-color: black;
  color: white;
  clear:both;
  text-align:center;
  padding:5px;
}

a {
  color: inherit;
}

#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px;
  text-align: center;
}

#section {
  font-family: Roboto
  width:350px;
  float:left;
  padding:10px;
}

#footer {
  font-family: Roboto
  background-color: black;
  color: white;
  clear:both;
  text-align:center;
  padding:5px;
}

a {
  color: inherit;
}

Add text-align: center to nav div

Add text-align: center to nav div


.root {
  position: relative;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
}

.root::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid currentColor;
  transform: translateY(1px);
  transition: transform 0.2s;
}

.root.blue {
  color: #2421ab;
}

.root.white {
  color: #fcfcfc;
}

.root.regular {
  font-size: 16px;
  line-height: 20px;
}

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

@media (min-width: 768px) {
  .root::after {
    border-bottom: 3px solid currentColor;
  }

  .root:hover::after {
    transform: translateY(2px);
    transition: transform 0.2s;
  }

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

  .root.large {
    font-size: 28px;
    line-height: 40px;
  }
}

.root {
  position: relative;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
}

.root::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid currentColor;
  transform: translateY(1px);
  transition: transform 0.2s;
}

.root.blue {
  color: #2421ab;
}

.root.white {
  color: #fcfcfc;
}

.root.regular {
  font-size: 16px;
  line-height: 20px;
}

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

@media (min-width: 768px) {
  .root:hover::after {
    transform: translateY(2px);
    transition: transform 0.2s;
  }

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

  .root.large {
    font-size: 28px;
    line-height: 40px;
  }
}

Change CTA underline weight on desktop

Change CTA underline weight on desktop


.game__dashboard {
  background-color: #181F20;
  height: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
  width:100%
}
.game__element-container {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.game__dashboard {
  background-color: #181F20;
  height: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
  width:100%
  z-index: 100;
}
.game__element-container {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

Make game dashboard appear above summon ring


.richselect {
	display: inline-block;
	position: relative;
	padding: 2px;
	font-family: sans;
	font-size: 10pt;
	zoom: 1; /* IE has layout */
}
.richselect {
	border: 1px solid #999999;
	background-color: #cccccc;
}
.borderimage .richselect {
	border: none;
	-moz-border-image: url(richselect.png) 4;
	-webkit-border-image: url(richselect.png) 4;
	-o-border-image: url(richselect.png) 4;
	border-image: url(richselect.png) 4;
}
.richselect img {
	vertical-align: middle;
}
.js .menu {
	display: block;
	position: absolute;
	z-index: 1;
}
.js .jshidden {
	display: none;
}

.richselect {
	display: inline-block;
	position: relative;
	padding: 2px;
	font-family: sans;
	font-size: 10pt;
	zoom: 1; /* IE has layout */
}
.richselect {
	border: 1px solid #999999;
	background-color: #cccccc;
}
.borderimage .richselect {
	border: none;
	-moz-border-image: url(richselect.png) 4;
	-webkit-border-image: url(richselect.png) 4;
	-o-border-image: url(richselect.png) 4;
	border-image: url(richselect.png) 4;
}
.richselect img {
	vertical-align: middle;
}
.js .menu {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
}
.js .jshidden {
	display: none;
}

Set left: 0 on menu to make IE 6 and 7 behave.


body {
    font-size: 16px;
    font-family: sans-serif;
    width: 56em;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #999;
}

div.main {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #CCC;
    border-radius: .5em;

    padding: 1em;
}

.recentprints ul {
    list-style-type: none;
}

h3 {
    margin: 0;
}

p.error {
    color: red;
    font-size: 2em;
}

form.fileupload {
    border: 1px solid black;
}

.flash-error {
    padding: 1em;
    font-size: 1.5em;
    background-color: #ff7287;
    border-radius: .5em;
    border: 1px solid black;
}

.flash-success {
    padding: 1em;
    font-size: 1.5em;
    background-color: #72ff93;
    border-radius: .5em;
    border: 1px solid black;
}

body {
    font-size: 16px;
    font-family: sans-serif;
    width: 56em;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #999;
}

div.main {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #CCC;
    border-radius: .5em;

    padding: 1em;
}

.recentprints ul {
    list-style-type: none;
}

h3 {
    margin: 0;
}

p.error {
    color: red;
    font-size: 2em;
}

form.fileupload {
    border: 1px solid black;
}

.flash-error {
    padding: 1em;
    font-size: 1.5em;
    background-color: #ff7287;
    border-radius: .5em;
}

.flash-success {
    padding: 1em;
    font-size: 1.5em;
    background-color: #72ff93;
    border-radius: .5em;
}

Remove flash message black borders

Remove flash message black borders


html,body{margin:0;padding:0}body{background:#101227 url("http://i.cubeupload.com/QU3wzs.png") no-repeat fixed left top}.mainmenufooter a{color:#ccc}.mainmenufooter a:hover{color:#e5e5e5}.menugroup .button{color:#fff;border:solid 1px #000;background:#333}.menugroup .button:hover{color:#fff;border:solid 1px #000;background:#262626}.menugroup .button:active{color:#fff;border:solid 1px #000;background:#262626}.broadcast-lobby{width:450px;color:#fff;background-color:#101227;padding:5px 7px;margin:0 auto;}

html,body{margin:0;padding:0}body{background:#1a1826 url("http://i.cubeupload.com/SNA1S0.png") no-repeat fixed left top}.mainmenufooter a{color:#ccc}.mainmenufooter a:hover{color:#e5e5e5}.menugroup .button{color:#fff;border:solid 1px #000;background:#333}.menugroup .button:hover{color:#fff;border:solid 1px #000;background:#262626}.menugroup .button:active{color:#fff;border:solid 1px #000;background:#262626}.broadcast-lobby{color:#fff;background-color:#1a1826;padding:5px 7px;margin:0 auto;}

Change to a Christmas background

Change to a Christmas background


.lightbox {
    display: none;
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.lightbox > div {
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    max-height: 90%;
    max-width: 90%;
    overflow: auto;
}

.spinner:before {
    content: '\231B';
    font-size: 24pt;
    line-height: 48pt;
    min-width: 48pt;
    display: inline-block;
    text-align: center;
    animation: spinner 2s infinite;
}

@keyframes spinner {
    0% { font-size: 24pt; }
    50% { font-size: 48pt; }
}

.lightbox fieldset {
    border: 0;
    margin: 5px;
}

.lightbox fieldset label {
    margin-right: 5px;
}

ul.form-buttons {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

ul.form-buttons li {
    margin: 5px;
    display: inline-block;
}

.lightbox {
    display: none;
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.lightbox > div {
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    max-height: 90%;
    max-width: 90%;
    overflow: auto;
}

.spinner:before {
    content: '\231B';
    font-size: 24pt;
    line-height: 48pt;
    min-width: 48pt;
    display: inline-block;
    text-align: center;
    animation: spinner 2s infinite;
}

@keyframes spinner {
    0% { font-size: 24pt; }
    50% { font-size: 48pt; }
}

.lightbox fieldset {
    border: 0;
    margin: 5px;
}

.lightbox fieldset label {
    margin-right: 5px;
}

.form-buttons {
    border-top: solid lightgrey 1px;
}

ul.form-buttons {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

ul.form-buttons li {
    margin: 5px;
    display: inline-block;
}

Add separate between fields and buttons

Add separate between fields and buttons


/*

   UTILITIES

*/

.overflow-container {
  overflow-y: scroll;
}

.center {
  margin-right: auto;
  margin-left: auto;
}

/*

   UTILITIES

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

*/

/* Equivalent to .overflow-y-scroll */
.overflow-container {
  overflow-y: scroll;
}

.center {
  margin-right: auto;
  margin-left: auto;
}

@media (--breakpoint-not-small){
  .center-ns {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (--breakpoint-medium){
  .center-m {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (--breakpoint-large){
  .center-l {
    margin-right: auto;
    margin-left: auto;
  }
}

Add responsive classes for centering elements with margin auto


.navbar {
  border-radius: 0;
}

.activated {
  background-color: gray;
}

.multi-line-text-wrapper {
  width: 400px;
}

Reset border radius on navbar

Reset border radius on navbar


div#version {
  position: absolute;
  color: white;
  top: .5rem;
  right: 1rem;
  z-index: 10000;
}

div.container {
  width: 100%;
  padding-top: 0.5rem;
}

input[type=range] {
  width: 100%;
  background: transparent;
}

div#version {
  position: absolute;
  color: white;
  top: .5rem;
  right: 1rem;
  z-index: 10000;
}

div.container {
  width: 100%;
  padding-top: 0.5rem;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

i.success {
  color: #5cb85c;
  text-shadow: 1px 1px 1px #5cb85c;
}

i.warning {
  color: #f0ad4e;
  text-shadow: 1px 1px 1px #f0ad4e;
}

i.error {
  color: #d9534f;
  text-shadow: 1px 1px 1px #d9534f;
}

input[type=range] {
  width: 100%;
  background: transparent;
}

Add color scheme for action icons

Add color scheme for action icons


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

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

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

This reverts commit 708b3c14098537ee302c5a0bc1a1ece9abe4ce8f.


html {
  color: blue;
  background: red; }

@font-face {
  font-family: "icons";
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg?#icons") format("svg");
  font-weight: normal;
  font-style: normal; }

.icon {
  font-family: "icons";
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon_home:before {
  content: "\e001"; }

html {
  color: blue;
  background: red; }

@font-face {
  font-family: "icons";
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg?#icons") format("svg");
  font-weight: normal;
  font-style: normal; }

.icon {
  font-family: "icons";
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon_home:before {
  content: "\e001"; }

Fix test according to recent grunt-webfont fix


.field-email_newsletter
{
	background: #e8e8e4;
	border: 1px solid #e4e4de;
	background: #f5f5f3;
	padding: 1em 10px 0.5em 10px;
	margin: 3em 0;
}

.field-email_newsletter h3
{
	font-size: 110%;
	margin-bottom: 1em;
}

.field-email_newsletter p
{
	margin-bottom: 1em;
}

.field-email_newsletter select
{
	margin-bottom: 1em;
}

.field-email_newsletter .recipient-groups
{
	margin-bottom: 1em;
}

.field-email_newsletter .recipient-group
{
	margin-bottom: 0.25em;
}

.field-email_newsletter .recipient-group input[type=checkbox]
{
	margin-right: 0.5em;
}

.field-email_newsletter table.status
{
	border-collapse: collapse;
	margin-bottom: 1em;
}

.field-email_newsletter table.status th,
.field-email_newsletter table.status td
{
	text-align: left;
	padding-right: 10px;
}

.field-email_newsletter
{
	background: #e8e8e4;
	border: 1px solid #e4e4de;
	background: #f5f5f3;
	padding: 1em 10px 0.5em 10px;
	margin: 3em 0;
}

.field-email_newsletter h3
{
	font-size: 110%;
	margin-bottom: 1em;
}

.field-email_newsletter p
{
	margin-bottom: 1em;
}

.field-email_newsletter select
{
	margin-bottom: 1em;
}

.field-email_newsletter .recipient-groups
{
	margin-bottom: 1em;
}

.field-email_newsletter .recipient-group
{
	margin-bottom: 0.25em;
}

.field-email_newsletter .recipient-group input[type=checkbox]
{
	margin-right: 0.5em;
}

.field-email_newsletter table.status
{
	border-collapse: collapse;
	margin-bottom: 1em;
}

.field-email_newsletter table.status th,
.field-email_newsletter table.status td
{
	text-align: left;
	padding-right: 1em;
}

Use "1em" as margin which is more consistent.


.form {
    display: flex;
}

.input {
    font-size: 90%;
    border: none;
    color: black;
    width: 100%;
    padding: 5px 5px 5px 25px;
    margin: 0 16px;
    background-color: white;
    background-image: url('/assets/search.png');
    background-repeat: no-repeat;
    background-position: 6px 6px;
    background-size: 14px 15px;
    border-radius: 15px;
    box-shadow: none;
    transition: box-shadow 150ms;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 4px var(--yellow500);
    }

    @media only screen and (max-width: 820px) {
        margin: 10px 0;
    }
}

.input-lg {
    composes: input;

    @media only screen and (max-width: 820px) {
        display: none;
    }
}

.input-sm {
    composes: input;
    display: none;

    @media only screen and (max-width: 820px) {
        display: unset;
    }
}

.submit-button {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
}

.form {
    display: flex;
    padding: 0 16px;

    @media only screen and (max-width: 820px) {
        padding: 10px 0;
    }
}

.input {
    font-size: 90%;
    border: none;
    color: black;
    width: 100%;
    padding: 5px 5px 5px 25px;
    background-color: white;
    background-image: url('/assets/search.png');
    background-repeat: no-repeat;
    background-position: 6px 6px;
    background-size: 14px 15px;
    border-radius: 15px;
    box-shadow: none;
    transition: box-shadow 150ms;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 4px var(--yellow500);
    }
}

.input-lg {
    composes: input;

    @media only screen and (max-width: 820px) {
        display: none;
    }
}

.input-sm {
    composes: input;
    display: none;

    @media only screen and (max-width: 820px) {
        display: unset;
    }
}

.submit-button {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
}

Convert `margin` to parent `padding`

SearchForm: Convert `margin` to parent `padding`


body {
  overflow-x: hidden;
  height: inherit;
}

div#root {
  height:100vh;
  flex: 1 1 auto;
  overflow:hidden;
}

div#root > p {
  text-align: center;
  color: var(--text-grey-light);
  padding: 170px 50px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
  margin: 0;
}

div#root > .spinner {
  margin-top: 170px;
}

.card {
  padding: var(--padding-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--clr-divider-light);
}

.card p {
  cursor: default;
  margin: var(--margin-medium);
}

div#actions {
  float: right;
  margin: 0 var(--margin-small);
  display: inherit;
}

.card:hover {
  background-color: var(--dark-background);
}

.name {
  letter-spacing: 0.5px;
  font-weight: var(--font-weight-bold);
  color: var(--text-teal-light);
}
.symbol {
  letter-spacing: 1px;
  font-size: var(--font-xlarge);
  font-weight: var(--font-weight-bolder);
  color: var(--text-grey-lighter);
}

body {
  overflow-x: hidden;
  height: inherit;
}

div#root {
  height: 200px;
}

div#root > p {
  text-align: center;
  color: var(--text-grey-light);
  padding: 170px 50px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
  margin: 0;
}

div#root > .spinner {
  margin-top: 170px;
}

.card {
  padding: var(--padding-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--clr-divider-light);
}

.card p {
  cursor: default;
  margin: var(--margin-medium);
}

div#actions {
  float: right;
  margin: 0 var(--margin-small);
  display: inherit;
}

.card:hover {
  background-color: var(--dark-background);
}

.name {
  letter-spacing: 0.5px;
  font-weight: var(--font-weight-bold);
  color: var(--text-teal-light);
}
.symbol {
  letter-spacing: 1px;
  font-size: var(--font-xlarge);
  font-weight: var(--font-weight-bolder);
  color: var(--text-grey-lighter);
}

Remove styles out of PR scope

Remove styles out of PR scope


.jumbotron {
  padding: 20px 20px 20px 35px;
}

.alert {
  display: none;
}

.copied-reference, .query-attempt {
  font-weight: bold;
}

#passage-search {
  height: 50px;
  width: 99%;
}

#submit-button {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

#passage-template {
  display: none;
}

.passage {
  margin: 10px;
}

.passage-text {
  font-size: 16px;
  color: green;
  font-weight: bold;
}

.passage-text:hover {
  color: green;
  cursor: pointer;
}

.old-passage {
  color: #bbb;
  font-weight: normal;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

Stop hiding footer nav on mobile.

Stop hiding footer nav on mobile.


/*
  TOP
*/
/* Body padding required by bootstrap top navbar (to avoid content overlay) */
body { padding-top: 50px; }
.navbar {height: 40px; }
.navbar-brand { padding-top: 12px; }
.social { margin-top: 0; }
.social > a { font-size: 2.5em; }
.page-header { padding-left: 20px; }

/*
  ENTRIES
*/
.post-info a { color: rgb(255, 255, 255); }
.post-info a:hover, .post-info-co a:hover { text-decoration: none; }
.pagination-block {
  width: 100%;
  text-align: center;
}

/*
  TAGS - CATEGORY
*/
.tag-list { line-height: 2.2em; }
.tag-list a:hover, .subcategories a:hover  { text-decoration: none; }
.tag-list .label { font-size: 1em; }
.tag-list .badge { color: rgb(92, 184, 92); background-color: rgb(255, 255, 255); }

/*
  TOP
*/
/* Body padding required by bootstrap top navbar (to avoid content overlay) */
body { padding-top: 50px; }
.navbar {height: 40px; }
.navbar-brand { padding-top: 12px; }
.social { margin-top: 0; }
.social > a { font-size: 2.5em; }
.page-header { padding-left: 20px; }
/* Fix navigation links background on phone browser */
@media ( max-width: 768px ) { .navbar-blog-collapse { background-color: rgb(255, 255, 255); } }

/*
  ENTRIES
*/
.post-info a { color: rgb(255, 255, 255); }
.post-info a:hover, .post-info-co a:hover { text-decoration: none; }
.pagination-block {
  width: 100%;
  text-align: center;
}

/*
  TAGS - CATEGORY
*/
.tag-list { line-height: 2.2em; }
.tag-list a:hover, .subcategories a:hover  { text-decoration: none; }
.tag-list .label { font-size: 1em; }
.tag-list .badge { color: rgb(92, 184, 92); background-color: rgb(255, 255, 255); }

Fix nav links background on phone browser


/*
  REBOOT

  README:
    Extra browser resets on top of our _normalise.css
*/

html,
body,
div,
nav,
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;
}

.btn,
.select,
button,
select {
  cursor: pointer;
  outline-offset: -2px; /* consistency between browsers */
}

input,
textarea {
  cursor: text;
  outline-offset: -2px; /* consistency between browsers */
}

/* disabled elements */
.disabled,
[disabled],
:disabled {
  cursor: not-allowed !important; /* stylelint-disable-line declaration-no-important */
}

/* simple horizontal rule */
hr {
  margin: var(--hr-margin);
  border: 0;
  border-top: 1px solid var(--grey-300);
}

/* responsive images (opinionated) */
img {
  max-width: 100%;
  height: auto;
}

/*
  REBOOT

  README:
    Extra browser resets on top of our _normalise.css
*/

html,
body,
div,
nav,
article,
section,
main,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input,
textarea,
table,
td,
th,
tr {
  box-sizing: border-box;
}

.btn,
.select,
button,
select {
  cursor: pointer;
  outline-offset: -2px; /* consistency between browsers */
}

input,
textarea {
  cursor: text;
  outline-offset: -2px; /* consistency between browsers */
}

/* disabled elements */
.disabled,
[disabled] {
  cursor: not-allowed !important; /* stylelint-disable-line declaration-no-important */
}

/* simple horizontal rule */
hr {
  margin: var(--hr-margin);
  border: 0;
  border-top: 1px solid var(--grey-300);
}

/* responsive images (opinionated) */
img {
  max-width: 100%;
  height: auto;
}

Clean up and simplify reboot

Clean up and simplify reboot


/* Move badge to deal with advanced text addition to button */
.badgeContainer .badge {
    left: 5px !important;
}
/* Move folder to deal with advanced text addition to button */
.site-save_folder {
    background-position: 0 -136px !important;
    margin-left: 14px !important;
}

/* Move advanced search button to deal with advanced text addition to button */
.queryBox .advancedBtn {
    width: 6.5em !important;
    right: -4.7em !important;
    margin-right: -5px !important;
    white-space: nowrap !important;
    padding: 4px !important;
}

/* Move search button to deal with advanced text addition to button */
.queryBox .searchBtn {
    width: 5em !important;
}
/* disable the pointless language switch (only 1 option anyway) */
.languageSwitcher {
    display: none !important;
}

/* Make Clear Refinements Link more noticeable */
.clearRefinements {
    font-size: 90%;
    font-weight: bold;
    bottom-padding: 0.8em;
    text-transform: uppercase;
}

/* Make back to basic link blue to match the default link colour */
.backToBasic {
    color: #08c !important;
}

/* Move badge to deal with advanced text addition to button */
.badgeContainer .badge {
    left: 5px !important;
}
/* Move folder to deal with advanced text addition to button */
.site-save_folder {
    background-position: 0 -136px !important;
    margin-left: 14px !important;
}

/* Move advanced search button to deal with advanced text addition to button */
.queryBox .advancedBtn {
    width: 6.5em !important;
    right: -4.7em !important;
    margin-right: -5px !important;
    white-space: nowrap !important;
    padding: 4px !important;
}

/* Move search button to deal with advanced text addition to button */
.queryBox .searchBtn {
    width: 5em !important;
}
/* disable the pointless language switch (only 1 option anyway) */
.languageSwitcher {
    display: none !important;
}

/* Make Clear Refinements Link more noticeable */
.clearRefinements {
    font-size: 90%;
    font-weight: bold;
    padding-bottom: 0.8em;
    text-transform: uppercase;
}

/* Make back to basic link blue to match the default link colour */
.backToBasic {
    color: #08c !important;
}

Add the filter group class to the clearRefinements section to give it a divider. Fixed bottom-padding to padding-bottom (hehehe)


/*
 Theme Name:   Twenty Twelve zh-CN
 Theme URI:    https://blog.swineson.me
 Description:  Twenty Twelve child theme, optimized for Simplified Chinese.
 Author:       James Swineson
 Author URI:   https://swineson.me
 Template:     twentytwelve
 Version:      1.1.5
 License:      ISC License (ISC)
 License URI:  https://opensource.org/licenses/ISC
 Tags:         light, gray, white, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
 Text Domain:  twentytwelve-child
*/

aside ul {
    padding-left: 0;
}
h1#enty-title {
    margin: auto;
}
h3.jp-relatedposts-headline em {
    font-weight: 700;
    -moz-text-emphasis: unset;
    -webkit-text-emphasis: unset;
    text-emphasis: unset;
    -moz-text-emphasis-position: unset;
    -webkit-text-emphasis-position: unset;
    text-emphasis-position: unset;
    font-style: unset;
    border-bottom: unset;
    padding-bottom: unset;
    border-bottom-width: unset;
    padding-bottom: unset;
}

/*
 Theme Name:   Twenty Twelve zh-CN
 Theme URI:    https://blog.swineson.me
 Description:  Twenty Twelve child theme, optimized for Simplified Chinese.
 Author:       James Swineson
 Author URI:   https://swineson.me
 Template:     twentytwelve
 Version:      1.1.5
 License:      ISC License (ISC)
 License URI:  https://opensource.org/licenses/ISC
 Tags:         light, gray, white, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
 Text Domain:  twentytwelve-child
*/

aside ul {
    padding-left: 0;
}
h1#enty-title {
    margin: auto;
}
h3.jp-relatedposts-headline em {
    font-weight: 700;
    -moz-text-emphasis: initial;
    -webkit-text-emphasis: initial;
    text-emphasis: initial;
    -moz-text-emphasis-position: initial;
    -webkit-text-emphasis-position: initial;
    text-emphasis-position: initial;
    font-style: initial;
    border-bottom: initial;
    padding-bottom: initial;
    border-bottom-width: initial;
    padding-bottom: initial;
}

Use initial for all values

Use initial for all values


@import "monokai.css";

.spacer {
  height: 80px;
}

@media (max-width: 768px) {
  .spacer {
    height: 50px;
  }
}

.post-preview {
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

@import "monokai.css";

.spacer {
  height: 80px;
}

.post-preview {
  font-size: 1.5em;
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

.posts {
  max-width: 85%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .spacer {
    height: 50px;
  }

  .posts {
    max-width: 96%;
  }
}

Add styling to the different elements of each post.


/* Custom style rules for ckanext-showcase */

.context-info .module-content .smallest {
    font-size: 13px;
}

.context-info .module-content .info .btn {
    margin-top: 18px;
}

.actions {
    top: 36px;
    right: 25px;
}

.ckanext-showcase-edit-wrapper {
    background-image: none;
}

.ckanext-showcase-image-container {
    text-align: center;
}

.ckanext-showcase-image {
    margin-bottom: 25px;
}

.ckanext-showcase-notes {
    margin-bottom: 25px;
}

.ckanext-showcase-launch {
    margin-bottom: 25px;
}

td.ckanext_showcase_pagination_footer {
    padding: 0;
}
.ckanext_showcase_pagination_footer .pagination {
    margin: 0;
    border-top: none 0;
}

.module-narrow .nav-item > a {
    word-break: break-word;
}

.ck-editor__editable_inline {
    min-height: 200px;
}

Add css style to increase height

Add css style to increase height


.CodeMirror, .CodeMirror-scroll {
    height: auto;
    min-height: 70px;
}

body {
    padding-top: 70px;
}

#console {
    font-family: monospace;
}

.CodeMirror, .CodeMirror-scroll {
    height: auto;
    min-height: 70px;
}

body {
    padding-top: 70px;
    margin: 0;
}

#console {
    font-family: monospace;
    width: 100%;
    height: 99vh;
}

Make the console fill the whole height

Make the console fill the whole height


.open-review {
	align-items: center;
	background: #449FF4;
	background: linear-gradient(180deg, #449FF4 0, #2E71EF);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	position: fixed;
	width: 100%;
	z-index: 99;
}

.open-review h2 {
	color: #FFF;
	margin-bottom: 60px;
	text-align: center;
}

.open-review h2 span {
	font-weight: bold;
}

.open-review .button {
	appearance: none;
	background: #FFF;
	border: none;
	border-radius: 33px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	color: #333;
	display: inline-block;
	font-size: 17px;
	font-weight: bold;
	padding: 14px 0;
	text-align: center;
	width: 280px;
}

.open-review .close {
	color: #FFF;
	margin-top: 50px;
}

.open-review {
	align-items: center;
	background: #449FF4;
	background: linear-gradient(180deg, #449FF4 0, #2E71EF);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	position: fixed;
	width: 100%;
	z-index: 99;
}

.open-review h2 {
	color: #FFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 26px;
	font-weight: normal;
	margin-bottom: 60px;
	text-align: center;
}

.open-review h2 span {
	font-family: inherit;
	font-weight: bold;
}

.open-review .button {
	appearance: none;
	background: #FFF;
	border: none;
	border-radius: 33px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	color: #333;
	display: inline-block;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	font-weight: bold;
	padding: 14px 0;
	text-align: center;
	width: 280px;
}

.open-review .close {
	color: #FFF;
	margin-top: 50px;
}

Set font family and font styles.

Set font family and font styles.


.zci--googleplus .tile--basic-image .tile__media {
    height: 12em;
}

.zci--googleplus .tile--basic-image .tile__media__img {
    margin-top: 2em;
    border-radius: 100%;
}

.zci--googleplus .tile--basic-image .tile__media__img {
    min-width: 0;
}

.zci--googleplus .tile--basic-image .tile__title {
    text-align: center;
    font-size: 1.4em;
    font-weight: 400;
    height: 2.5em;
}

.zci--googleplus .tile {
    width: 13.4em;
    height: 17.2em;
}

.zci--googleplus .has-tiles--grid .tile {
    width: 13.4em;
}

.zci--googleplus .tile--basic-image .tile__media {
    height: 12em;
}

.zci--googleplus .tile--basic-image .tile__media__img {
    margin-top: 1.6em;
    border-radius: 100%;
}

.zci--googleplus .tile--basic-image .tile__media__img {
    min-width: 0;
}

.zci--googleplus .tile--basic-image .tile__title {
    text-align: center;
    font-size: 1.4em;
    font-weight: 400;
    height: 2.5em;
}

.zci--googleplus .tile {
    width: 12.4em;
    height: 17.2em;
}

.zci--googleplus .has-tiles--grid .tile {
    width: 13.4em;
}

.zci--googleplus .tile--basic-image .tile__body {
    padding: .3em 1em;
}

Google+: Adjust the position of the image and the title.


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

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

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

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

Change second third block blog index css


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

div[data-role="editor-toolbar"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Disable text-selection on editor toolbar


body {
	font-family: "adelle-sans", sans-serif;
	font-weight: 100;
	font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 100;
}

/* nav */
nav {
	padding: 2em;
}
nav header h1 {
	margin: 0;
}
nav header h2 {
	margin: 0;
	color: rgba(0,0,0,0.5);
}
nav ul {
	padding: 0;
}

/* article */
article {
	padding: 1.5em 2em;
}
article h1 {
	font-size: 4em;
	margin-top: 0;
}

body {
	font-family: "adelle-sans", sans-serif;
	font-weight: 100;
	font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 100;
}

/* nav */
nav {
	padding: 2em;
}
nav header h1 {
	margin: 0;
}
nav header h2 {
	margin: 0;
	opacity: 0.5;
}
nav ul {
	padding: 0;
}

/* article */
article {
	padding: 1.5em 2em;
}
article h1 {
	font-size: 4em;
	margin-top: 0;
	color: #A1BBCC;
}

Add an accent color to H1

Add an accent color to H1


* {
    border-radius: 0 !important;
}

body {

    margin-top: 3.5rem;
}

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

.dropdown-item.active, .dropdown-item:hover {
    background-color: rgba(0, 128, 128, 0.2) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: rgba(0, 128, 128, 1) !important;
}

iframe {
    border: 0;
}

Add hover and active CSS to nav dropdowns, remove border from iframes


#map {
  position: relative;
  height: 120px;
}

#tagline {
  padding-left: 25%;
  margin-bottom: 10px;
}

#tagline p {
  font-size: 150%;
  font-style: italic;
}

#news {
  clear: both;
  border: 1px solid #eee;
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 1rem;
  margin: 0 1rem 0 1rem;
}

#news h1 {
  margin: 0;
}

img.thumb {
  float: right;
  margin-left: 10px;
}

/* ol customizations */

.ol-overlaycontainer-stopevent {
  opacity: 0;
  transition: opacity 300ms ease;
}

/* not done with :hover because the overlay blocks events and has no height */
.over .ol-overlaycontainer-stopevent {
  opacity: 1;
}

ul.sponsors {
  background-color: #f8f8f8;
}

#map {
  position: relative;
  height: 120px;
}

#map:fullscreen {
  height: 100%;
}

#map:-webkit-full-screen {
  height: 100%;
  margin: 0;
}

#tagline {
  padding-left: 25%;
  margin-bottom: 10px;
}

#tagline p {
  font-size: 150%;
  font-style: italic;
}

#news {
  clear: both;
  border: 1px solid #eee;
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 1rem;
  margin: 0 1rem 0 1rem;
}

#news h1 {
  margin: 0;
}

img.thumb {
  float: right;
  margin-left: 10px;
}

/* ol customizations */

.ol-overlaycontainer-stopevent {
  opacity: 0;
  transition: opacity 300ms ease;
}

/* not done with :hover because the overlay blocks events and has no height */
.over .ol-overlaycontainer-stopevent {
  opacity: 1;
}

ul.sponsors {
  background-color: #f8f8f8;
}

Make fullscreen map work in Safari

Make fullscreen map work in Safari


#set-password-group #password {
    border-color: #ddd;
    box-shadow: none;
}

#meter {
    margin: 3px 0 20px 0;
    display: flex;
}

#meter div {
    background: #ddd;
    height: 5px;
    flex: 1;
    border-radius: 2px;
    margin-right: 3px;
}

#meter div:last-child {
    margin-right: 0;
}

#meter.score-1 .s1 {
    background: #FF5252;
}

#meter.score-2 .s2 {
    background: #FFAB40;
}

#meter.score-3 .s3 {
    background: #9CCC65;
}

#meter.score-4 .s4 {
    background: #22bc66;;
}

#set-password-group #password {
    border-color: var(--border-color);
    box-shadow: none;
}

#meter {
    margin: 3px 0 20px 0;
    display: flex;
}

#meter div {
    background: var(--border-color);
    height: 5px;
    flex: 1;
    border-radius: 2px;
    margin-right: 3px;
}

#meter div:last-child {
    margin-right: 0;
}

#meter.score-1 .s1 {
    background: #FF5252;
}

#meter.score-2 .s2 {
    background: #FFAB40;
}

#meter.score-3 .s3 {
    background: #9CCC65;
}

#meter.score-4 .s4 {
    background: #22bc66;;
}

Fix dark mode bug in the "Set Password" screen


.date span:after {
	content: '2015-11-15' !important;
}

span.position:after {
	content: 'Senior Software Developer' !important;
}

span.company:after {
	content: 'Another Company' !important;
}

span.start-date:after {
	content: 'January 2016' !important;
}

.tech-systems {
	display: none !important;
}

.date span:after {
	content: '2015-11-15' !important;
}

span.position:after {
	content: 'Senior Software Developer' !important;
}

span.company:after {
	content: 'Another Company' !important;
}

span.city:after {
	content: 'Paris' !important;
}

span.start-date:after {
	content: 'January 2016' !important;
}

.tech-systems {
	display: none !important;
}

Add city to example company

Add city to example company


body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a {
  color: #00B7FF;
}

.row {
  clear: both;
}

.cell {
  height: 25px;
  width: 25px;
  float: left;
  cursor: pointer;
}

.emptyCell {
  cursor: default;
}

Add emptyCell class to CSS

Add emptyCell class to CSS


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

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

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

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

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

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

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

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

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

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

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

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

.ve-ui-rowWidget > .ve-ui-rowWidget-cells > .oo-ui-inputWidget > input,
.ve-ui-rowWidget > .ve-ui-rowWidget-delete-button > .oo-ui-buttonElement-button {
	margin: 0;
	border-radius: 0;
}

VisualEditor: Remove border-radii from TableWidget elements

Change-Id: I6806d130832ad265d2531d3d26cfa1b4678fe18c


/*^
  ===========================================================================
  Solvenius
  ===========================================================================
  Copyright (C) 2001-2017 Gianluca Costa
  ===========================================================================
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

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

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  ===========================================================================
*/

@media (orientation: landscape)  {
  #appBox {
    position: absolute;
    left: 30%;
    width: 40%;

    top: 0;
    min-height: 100%;
  }
}

@media (orientation: portrait)  {
  #appBox {
    position: absolute;
    left: 0;
    width: 100%;

    top: 0;
    min-height: 100%;
  }
}

@media (orientation: portrait) and (max-device-width: 420px) {
    body {
        font-size: 4.5vw;
    }
}

@media (orientation: portrait) and (min-device-width: 420px) {
    body {
        font-size: 3.5vw;
    }
}

/*^
  ===========================================================================
  Solvenius
  ===========================================================================
  Copyright (C) 2001-2017 Gianluca Costa
  ===========================================================================
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

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

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  ===========================================================================
*/

@media (orientation: landscape)  {
  #appBox {
    position: absolute;
    left: 30%;
    width: 40%;

    top: 0;
    min-height: 100%;
  }
}

@media (orientation: portrait)  {
  #appBox {
    position: absolute;
    left: 0;
    width: 100%;

    top: 0;
    min-height: 100%;
  }
}

@media (orientation: portrait) and (max-device-width: 420px) {
    body {
        font-size: 4.5vh;
    }
}

@media (orientation: portrait) and (min-device-width: 420px) {
    body {
        font-size: 3.5vh;
    }
}

Test with vh in lieu of vw

Test with vh in lieu of vw


html {
  font-size: 62.5%;
}
html, body, .app {
  height: 100%;
}

.title {
  font-size: 3.0rem;
}
.app {
  position: relative;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.body {
  height: 100%;
}
.source, .destination {
  display: inline-block;
  width: 50%;
  height: 70%;
  box-sizing: border-box;
}
.source {
  float: left;
}
.destination {
  float: right;
}

.caption {
  font-size: 2.0rem;
  line-height: 3.0rem;
}
.action {
  vertical-align: middle;
}
.text {
  width: 90%;
  height: 100%;
  resize: none;
}

html {
  font-size: 62.5%;
}
html, body, .app {
  height: 100%;
}

.title {
  font-size: 3.0rem;
}
.app {
  position: relative;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.body {
  height: 70%;
}
.source, .destination {
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
.source {
  float: left;
}
.destination {
  float: right;
}

.caption {
  font-size: 2.0rem;
  line-height: 3.0rem;
}
.action {
  vertical-align: middle;
}
.text {
  width: 90%;
  height: 100%;
  resize: none;
}

Set height of .source and .destination in .body


body, html {
    overflow: hidden;
}

#simulator-tab-view {
    display: none;
}

#editor-tab-view {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

#asm-editor {
    width: 100%;
    height: 88vh;
    max-height: 88vh;
    font-family: Courier New, Courier, monospace;
}

.section {
    padding: 0rem 1.5rem;
}

#mc-column {
    width: 20%;
}

#oc-column {
    width: 80%;
}

#program-listing {
    font-family: Courier New, Courier, monospace;
}

#program-listing-body {
    overflow: auto;
    height: 100%;
}

#program-listing-container {
    min-height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
}

#register-listing-container {
    min-height: 80vh;
    max-height: 80vh;
    overflow-y: auto;
}

#register-listing {
    font-family: Courier New, Courier, monospace;
}

#console-output {
    height: 100%;
}

body {
    height: 100vh;
}

#simulator-tab-view {
    display: none;
}

#editor-tab-view {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

#asm-editor {
    width: 100%;
    height: 88vh;
    max-height: 88vh;
    font-family: Courier New, Courier, monospace;
}

.section {
    padding: 0rem 1.5rem;
}

#mc-column {
    width: 20%;
}

#oc-column {
    width: 80%;
}

#program-listing {
    font-family: Courier New, Courier, monospace;
}

#program-listing-body {
    overflow: auto;
    height: 100%;
}

#program-listing-container {
    min-height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
}

#register-listing-container {
    min-height: 80vh;
    max-height: 80vh;
    overflow-y: auto;
}

#register-listing {
    font-family: Courier New, Courier, monospace;
}

#console-output {
    height: 100%;
}

Change to allow scrolling on small screens


@media screen and (min-width: 768px) and (max-width: 1024px) {
  .recent-title{
    font-size:3.5em;
  }
}

@media screen and (max-width: 320px){
  .navbar-inverse .navbar-brand{
    font-size: 35px;
  }
  .navbar-inverse .navbar-sub-brand{
    font-size: 14px;
  }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  .main{
    height: 700px;
  }
  .recent-title{
    font-size:2.5em;
  }
  .heading span{
    font-size: 0.6em;
    top:-20px;
  }
  .heading{
    font-size: 8em;
  }
}

Change iPad tagline text size

Change iPad tagline text size


#nova .w-sidebar {
    width: 14.75rem;
}
#nova .content {
    max-width: calc(100vw - 14.75rem);
}

#nova .w-sidebar {
    width: 14.75rem;
}
#nova .content {
    max-width: calc(100vw - 14.75rem);
    min-width: 65.25rem;
}

Fix Nova having sideways scroll

Fix Nova having sideways scroll


.aui-datatable-editable {
	cursor: pointer;
}

.aui-basecelleditor .aui-buttonitem-content {
	margin: 2px 0;
	padding: 3px 3px 1px 1px;
}

.aui-basecelleditor .aui-buttonitem-label-only {
	padding-bottom: 2px;
}

.webkit .aui-basecelleditor .aui-buttonitem-label-only {
	padding-bottom: 3px;
}

.aui-checkboxcelleditor .aui-celleditor-label,
.aui-radiocelleditor .aui-celleditor-label {
	padding-left: 3px;
}

.aui-checkboxcelleditor .aui-celleditor-wrapper,
.aui-radiocelleditor .aui-celleditor-wrapper {
	display: block;
	clear: both;
	padding: 2px 0;
}

.aui-celleditor-edit-dd-handle {
	cursor: move;
    display: inline-block;
    margin-top: -3px;
    vertical-align: middle;
}

.ie7 .aui-celleditor-edit-dd-handle {
	display: block;
	float: left;
}

Revert "AUI-789 Added code for datatable to work in IE7"

This reverts commit f32373e9e39421a616ce90a308e2b3a7e0713ec7.


/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vs .monaco-workbench .flip-editor-layout {
	background-image: url('layout-light.svg');
}

.vs-dark .monaco-workbench .flip-editor-layout {
	background-image: url('layout-dark.svg');
}

.vs .action-remove-from-recently-opened {
	background: url("remove-light.svg") center center no-repeat;
}

.vs-dark .action-remove-from-recently-opened,
.hc-black .action-remove-from-recently-opened {
	background: url("remove-dark.svg") center center no-repeat;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vs .monaco-workbench .flip-editor-layout {
	background-image: url('layout-light.svg');
}

.vs-dark .monaco-workbench .flip-editor-layout {
	background-image: url('layout-dark.svg');
}

.hc-black .monaco-workbench .flip-editor-layout {
	background-image: url('layout-hc.svg');
}

.vs .action-remove-from-recently-opened {
	background: url("remove-light.svg") center center no-repeat;
}

.vs-dark .action-remove-from-recently-opened,
.hc-black .action-remove-from-recently-opened {
	background: url("remove-dark.svg") center center no-repeat;
}

Add high contrast icon for editor layout


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

 Here is some stuff Paddy updated
 *
 *= require_self
 *= require_tree .
 *= require helpers
 */

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

 Here is some stuff Paddy updated
 *
 *= require_self
 *= require_tree .
 */

Remove helpers ref in applicaton.css manifest file


body {
  background-image: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/square_bg.png');
  color: black;
}

.title {
  font-family: 'Pacifico', cursive;
  font-size: 5em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 65%;
}

.desc {
  font-weight: 200;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  text-align: center;
  width: 65%;
}

.name-form {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 65%;
}

.sig {
  margin-top: 20px;
}

body {
  background-image: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/square_bg.png');
  color: black;
  overflow: hidden;
}

.title {
  font-family: 'Pacifico', cursive;
  font-size: 5em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 65%;
}

.desc {
  font-weight: 200;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  text-align: center;
  width: 65%;
}

.name-form {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 65%;
}

.sig {
  margin-top: 20px;
}

Hide overflow so touch doesn't mess with scrolling


/**
 * Variables (Custom Properties)
 * @project Kickstart
 * @author  Marc Görtz <https://marcgoertz.de/>
 */

@charset "utf-8";

:root {
	--font-stack: "Open Sans", freesans, arial, sans-serif;
	--font-stack-serif: palatino, "Times New Roman", serif;
	--font-stack-monospace: hack, "fira mono", "ubuntu mono", monospace, monospace; /* address odd `em`-unit font size rendering in all browsers */
	--color-gray: #333;
	--color-black: #000;
	--color-white: #fff;
	--color-magenta: #c36;
	--color-blue: #33b3cc;
	--color-red: #c00;
}

/**
 * Variables (Custom Properties)
 * @project Kickstart
 * @author  Marc Görtz <https://marcgoertz.de/>
 */

@charset "utf-8";

:root {
	--font-stack: system-ui;
	--font-stack-serif: serif;
	--font-stack-monospace: "fira code", monospace, monospace; /* address odd `em`-unit font size rendering in all browsers */
	--color-gray: #333;
	--color-black: #000;
	--color-white: #fff;
	--color-magenta: #c36;
	--color-blue: #33b3cc;
	--color-red: #c00;
}

Update font stack, use `system-ui`.

Update font stack, use `system-ui`.


body {
	text-align: center;
	padding:3% 0 0 0;
	min-width:1290px;
}
canvas {
	border: 3px solid black;
}
canvas:hover {
	cursor: none;
}

body {
	text-align: center;
	padding:3% 0 0 0;
	min-width:1290px;

	/* Scale pictures by using nearest-neighbor interpolation for real 8bit feeling */
	-ms-interpolation-mode: nearest-neighbor; /* Internet Explorer (non-standard property) */
	image-rendering: -moz-crisp-edges; /* Firefox does not support pixelated (yet) */
	image-rendering: -webkit-optimize-contrast; /* Safari, equals to crisp-edges (non-standard naming) */
	image-rendering: pixelated; /* Chrome, Opera */

}
canvas {
	border: 3px solid black;
}
canvas:hover {
	cursor: none;
}

Change interpolation of images and canvas to nearest-neighbor


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

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

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

  text-align: center;

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

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

  background: #b00;
}

/* Make images with ALT tag obvious */
img:not([alt]) {
  filter: invert(100%)
}

Make images without ALT tag obvious

Make images without ALT tag obvious


.akamai-content {
    margin: -14px 0 0 -20px;
    height: auto;
    min-height: 100%;
    left: 0;
    right: 0;
    -webkit-font-smoothing: antialiased;
}

.akamai-content .wrap {
    padding-left: 14px;
}

.akamai-content header {
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    height: 200px;
    background-size: cover !important;
    background: #133947 url(../../assets/banner-4632x1500.jpg) no-repeat 0 15px;
}

.akamai-content header h1 {
    display: none;
}

.akamai-content {
    margin: -14px 0 0 -20px;
    height: auto;
    min-height: 100%;
    left: 0;
    right: 0;
    -webkit-font-smoothing: antialiased;
}

.akamai-content .wrap {
    padding-left: 14px;
}

.akamai-content header {
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    height: 200px;
    background-size: cover !important;
    background-color: #133947;
    background-repeat: no-repeat;
    background-position: 0 15px;
}

.akamai-content header h1 {
    display: none;
}

@media only screen and (max-width: 772px) {
    .akamai-content header {
        background-image: url(../../assets/banner-772x250.jpg);
    }
}

@media only screen and (max-width: 1544px) and (min-width: 773px) {
    .akamai-content header {
        background-image: url(../../assets/banner-1544x500.jpg);
    }
}

@media only screen and (min-width: 1545px) {
    .akamai-content header {
        background-image: url(../../assets/banner-4632x1500.jpg);
    }
}

Fix banner display for different display widths


* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  color: #111;
  background-color: #fff;
}

.Button:hover {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.125);
}

Add rebass button hover style

Add rebass button hover style


.button {
  margin: 10px;
  display: inline-block;
  font-size: 15px;
  color: rgb(245, 245, 245);
  background-color: rgb(60, 60, 60);
  border: 1px solid rgb(140, 140, 140);
  width: 120px;
  cursor: pointer;
}

.button:hover, .button:focus {
  color: #33C3F0;
  background-color: rgb(30, 30, 30);
}

.button {
  margin: 10px;
  display: inline-block;
  font-size: 15px;
  color: rgb(245, 245, 245);
  background-color: rgb(60, 60, 60);
  border: 1px solid rgb(140, 140, 140);
  width: 120px;
  cursor: pointer;
}

.button:hover, .button:focus {
  color: #FC3A4A;
  background-color: rgb(30, 30, 30);
}

Change clear button hover text color to red


#second_1 {
display: block;
position: relative;
top: 340px;
left: 100px;

}

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

}

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

}
#second_5 {
display: block;
position: relative;
left: 100px;

}

Add section 5 week stylesheet

Add section 5 week stylesheet


@import url('https://fonts.googleapis.com/css?family=Monoton|Roboto:300,700');

#intro {
    background-color: transparent;
    text-align: center;
}

#intro h1 {
    font-family: 'Monoton', cursive;
}

.btn {
    border-color: rgb(92, 92, 92);
}

a.btn {
    color: rgb(92, 92, 92);
}

* {
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-size: 1.02em;
}

body {
    min-height: 900px;
}

strong {
    font-weight: 700;
}

.h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.5rem;
}

@import url('https://fonts.googleapis.com/css?family=Monoton|Roboto:300,700');
#intro {
    background-color: transparent;
    text-align: center;
}
#intro h1 {
    font-family: 'Monoton', cursive;
    animation-name: example;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    transform: rotate(-1.5deg);
    text-shadow: 8px 8px 8px rgba(128,128,128,.25);
}
.btn {
    border-color: rgb(92, 92, 92);
}
a.btn {
    color: rgb(92, 92, 92);
}
* {
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-size: 1.02em;
}
body {
    min-height: 900px;
}
strong {
    font-weight: 700;
}
.h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.5rem;
}
@keyframes example {
    0%   {color: red;}
    25%  {color: darkgoldenrod;}
    50%  {color: blue;}
    75%  {color: green;}
    100% {color: red;}
}

Add groove to grooves header

Add groove to grooves header


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

.build-snapshot {
  color: var(--primary);
  border-radius: 1rem;
  flex: 1;
  font-size: 1rem;
}

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

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

.header-toggle {
  height: 1.5rem;
  width: 1.5rem;
}

.snapshot-header {
  align-items: center;
  display: flex;
}

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

.build-snapshot {
  color: var(--primary);
  border-radius: 1rem;
  flex: 1;
  font-size: 1rem;
}

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

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

.header-toggle {
  height: 1.5rem;
  width: 1.5rem;
}

.snapshot-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

Add gap and justify header content with space between


/**
 * The following style rules affect Extension Infobars on the Mac.
 */

body {
  background: -webkit-gradient(linear, left top, left bottom,
              from(#EBEBEB), to(#CFCFCF));
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  font-size: 11px;
  height: 36px; /* Infobars are limited to 36-72px */
  margin: 0px;
  overflow: hidden;
}

/**
 * The following style rules affect Extension Infobars on the Mac.
 */

body {
  background: -webkit-gradient(linear, left top, left bottom,
              from(#EBEBEB), to(#CFCFCF));
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  font-size: 12px;
  height: 36px; /* Infobars are limited to 36-72px */
  margin: 0 38px;
  overflow: hidden;
}

[Mac] Tweak some CSS for extension infobars to have the correct text size and margin.

BUG=51124
TEST=none

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

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


/* From 'A list apart', 'dropdowns' */
body {
  background-color: #EBF0FA;
}
#nav {
  font-weight: bold;
  color: #2d58b7;
}
#nav a {
  text-decoration: none;
}
#nav a:hover {
  text-decoration: underline;
}
.menubar {
  font-size: 80%;
}
.menubar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menubar li {
  text-align: center;
  padding: 5px;
  list-style: none;
  float: left;
  position: relative;
  width: 11em;
  cursor: default;
  background-color: #EBF0FA;
}
.menubar li ul /* second level lists */ {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
}
.menubar li>ul {
  padding: 0;
  margin: 0;
  top:auto;
  left:auto;
  font-weight: normal;
}
.menubar li:hover ul, li.over ul { /* lists nested under hovered list items */
  display: block;
}
#content {
  clear: left;
  padding-top: 10px;
  background-color: #ffffff;
}

/* From 'A list apart', 'dropdowns' */
body {
  background-color: #EBF0FA;
}
#nav {
  font-weight: bold;
  color: #2d58b7;
  width:100%;
}
#nav a {
  text-decoration: none;
}
#nav a:hover {
  text-decoration: underline;
}
.menubar {
  font-size: 80%;
}
.menubar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menubar li {
  text-align: center;
  padding: 5px;
  list-style: none;
  float: left;
  position: relative;
  width: 11em;
  cursor: default;
  background-color: #EBF0FA;
}
.menubar li ul /* second level lists */ {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
}
.menubar li>ul {
  padding: 0;
  margin: 0;
  top:auto;
  left:auto;
  font-weight: normal;
}
.menubar li:hover ul, li.over ul { /* lists nested under hovered list items */
  display: block;
}
#content {
  clear: left;
  padding-top: 10px;
  background-color: #ffffff;
}

Increase width of nav bar.

Increase width of nav bar.

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


/*--- SETTINGS DIALOG ---*/
.php-lint-settings-dialog label {
    width: 100%;
    display: inline-block;
}

.php-lint-settings-dialog fieldset {
    margin-bottom: 1em;
}

.php-lint-settings-dialog legend {
    margin: 0 0 .25em;
    color: inherit;
}

.php-lint-settings-dialog input {
    vertical-align: middle;
    margin-bottom: 0;
}

.php-lint-settings-dialog .columns label {
    width: 33.333%;
    float: left;
}

.php-lint-settings-dialog .error {
    color: #c95353;
}

.php-lint-settings-dialog .input-php-location {
    width: 100%;
}

.php-lint-settings-dialog .php-location-error {
    font-size: 0.9em;
    color: #a33;
}

.php-lint-settings-dialog .tool-phpl label {
    box-sizing: border-box;
    padding: 0 6px 0 0;
}

Fix styling issue in settings dialog.

Fix styling issue in settings dialog.


#listADTCON1 {
  height: 200px;
}
#listADTCON1 .jsavnode{
  border: 0px;
  background-color: #eed;
  line-height: 60px;
  font-size: 20px;
  min-width: 65px;
}
#listADTCON2 {
  height: 200px;
}
#listADTCON2 .jsavnode{
  border: 0px solid;
  background-color: #eed;
  line-height: 50px;
  font-size: 20px;
  min-width: 40px;
}

#listADTCON2 .ssAV .jsavline{
	height: 30px;
}

.jsavcanvas{
  width: 850px;
}

#listADTCON1 {
  height: 200px;
}
#listADTCON1 .jsavnode{
  border: 0px;
  background-color: #eed;
  line-height: 60px;
  font-size: 20px;
  min-width: 65px;
  box-shadow:0px 0px 0px;
}
#listADTCON2 {
  height: 200px;
}
#listADTCON2 .jsavnode{
  border: 0px solid;
  background-color: #eed;
  line-height: 50px;
  font-size: 20px;
  min-width: 40px;
  box-shadow:0px 0px 0px;
}

#listADTCON2 .ssAV .jsavline{
	height: 30px;
}

.jsavcanvas{
  width: 850px;
}

Remove box-shadow in ListADT slidshows.

Remove box-shadow in ListADT slidshows.


body {
  background-image: url('/assets/img/kitchen.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: 0px -175px;
  background-repeat: no-repeat;
}

.navbar {
  position: relative;
}

.table {
  font-size: 115%;
}

#sub_layout {
  background-color: rgba(245, 241, 222, .78);
}

body {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%), url(/assets/img/kitchen.jpg), url(/assets/img/kitchen.jpg);
  background: -moz-linear-gradient(top, rgba(220,220,220,0.45) 0%, rgba(220,220,220,0.45) 100%), url(/assets/img/kitchen.jpg);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(220,220,220,0.45)), color-stop(100%, rgba(220,220,220,0.45))), url(/assets/img/kitchen.jpg);
  background: -webkit-linear-gradient(top, rgba(220,220,220,0.45) 0%, rgba(220,220,220,0.45) 100%), url(/assets/img/kitchen.jpg);
  background: -o-linear-gradient(top, rgba(220,220,220,0.45) 0%, rgba(220,220,220,0.45) 100%), url(/assets/img/kitchen.jpg);
  background: -ms-linear-gradient(top, rgba(220,220,220,0.45) 0%, rgba(220,220,220,0.45) 100%), url(/assets/img/kitchen.jpg);
  background: linear-gradient(to bottom, rgba(220,220,220,0.45) 0%, rgba(220,220,220,0.45) 100%), url(/assets/img/kitchen.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.navbar {
  position: relative;
}

.table {
  font-size: 115%;
}

#sub_layout {
  background-color: rgba(245, 245, 245, .78);
}

Add transparency to the background image for easier viewing


.Header-title {
    width: 455px;
}

.Header-buttonSection {
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid rgba(0,0,0,0.2);
}

.Header-buttonSection:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}

.EditHeader {
    background-color: #6CAFED;
}

.EditHeader-title {
    color: white;
}

.EditHeader-subtitle {
    color: rgba(255,255,255,0.5);
}

.EditHeader .Button {
    color: var(--brand-color);
    border: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    background-color: rgba(255,255,255,0.5);
    font-weight: normal;
    margin-left: 0.75em;
}

.EditHeader .Button--primary {
    background-color: white;
}

.EditHeader .Button:hover {
    background-color: white;
}

.EditHeader .Button.Button--primary:hover {
    background-color: var(--brand-color);
}

.Header-title {
    width: 455px;
}

.Header-buttonSection {
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid rgba(0,0,0,0.2);
}

.Header-buttonSection:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}

.EditHeader {
    background-color: #6CAFED;
}

.EditHeader-title {
    color: white;
}

.EditHeader-subtitle {
    color: rgba(255,255,255,0.5);
}

.EditHeader .Button {
    color: var(--brand-color);
    border: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    background-color: rgba(255,255,255,0.5);
    font-weight: normal;
    margin-left: 0.75em;
}

.EditHeader .Button--primary {
    background-color: white;
}

.EditHeader .Button:hover {
    color: white;
    background-color: var(--brand-color);
}

Fix edit header button hover states

Fix edit header button hover states


.ace_editor {
  font-family: "Bitstream Vera Sans Mono", "Ubuntu Mono", "Droid Sans Mono",
      monospace !important;
}

.ace-td .ace_gutter {
  background-color: #F0F0F0;
  color: #999;
}

.ace-td .ace_gutter-cell {
  padding: 0;
  text-align: center;
}

.ace-td .ace_gutter_active_line {
  background-color: #E0E0E0;
}

.ace-td .ace_cursor {
  border-left: 2px solid black;
}

.ace-td .ace_cursor.ace_overwrite {
  border-left: 0px;
  border-bottom: 1px solid black;
}

.ace-td .ace_marker-layer .ace_selection {
  background: #B5D5FF;
}

.ace-td .ace_marker-layer .ace_active_line {
  background: rgba(0, 0, 0, 0.07);
}

.ace_editor {
  font-family: "Bitstream Vera Sans Mono", "Ubuntu Mono", "Droid Sans Mono",
      "Menlo", monospace !important;
}

.ace-td .ace_gutter {
  background-color: #F0F0F0;
  color: #999;
}

.ace-td .ace_gutter-cell {
  padding: 0;
  text-align: center;
}

.ace-td .ace_gutter_active_line {
  background-color: #E0E0E0;
}

.ace-td .ace_cursor {
  border-left: 2px solid black;
}

.ace-td .ace_cursor.ace_overwrite {
  border-left: 0px;
  border-bottom: 1px solid black;
}

.ace-td .ace_marker-layer .ace_selection {
  background: #B5D5FF;
}

.ace-td .ace_marker-layer .ace_active_line {
  background: rgba(0, 0, 0, 0.07);
}

Add Menlo to textarea fonts.

Add Menlo to textarea fonts.


.editbox {
  margin: 5px;
  padding: 0;
  font-size: 12px;
  color: black;
}

.editbox {
  font-family: "Droid Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, "Lucida Console", monospace;
}

.editbox p {
  margin: 0;
}

/* Latex */
span.latex-text {
}

span.latex-command {
  color: #000084;
}

span.latex-comment {
  color: green;
}

span.latex-inline-math {
  color: #882288;
}

span.latex-braces {
  color: #346CB7;
}

/* R */

.bracket {
   color: brown;
}

.str,
.str-start-single,
.str-start-double,
.str-end-single,
.str-end-double {
   color: #555;
}

.comment {
   color: green;
   font-style: italic;
}

.number {
   color: navy;
}

.reserved {
   color: navy;
}

.identifier {
}

.operator {
   color: red;
}

.highlight {
   color: #99f;
}

.editbox {
  margin: 5px;
  padding: 0;
  font-size: 12px;
  color: black;
  line-height: 16px;
}

.editbox {
  font-family: "Droid Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, "Lucida Console", monospace;
}

.editbox p {
  margin: 0;
}

/* Latex */
span.latex-text {
}

span.latex-command {
  color: #000084;
}

span.latex-comment {
  color: green;
}

span.latex-inline-math {
  color: #882288;
}

span.latex-braces {
  color: #346CB7;
}

/* R */

.bracket {
   color: brown;
}

.str,
.str-start-single,
.str-start-double,
.str-end-single,
.str-end-double {
   color: #555;
}

.comment {
   color: green;
   font-style: italic;
}

.number {
   color: navy;
}

.reserved {
   color: navy;
}

.identifier {
}

.operator {
   color: red;
}

.highlight {
   color: #99f;
}

Make Source pane line spacing consistent with Console


/*
  TODO: Provide different styles (analoge to _button.css);
*/

.sc-input {
  max-width: 500px;
  font-size: 12px;
  height: 30px;
  border-radius: 15px;
  background: #fff;
  border: none;
  padding: 0 10px;
}

.sc-input.sm-centered {
  text-align: center;
}

/*
  TODO: Provide different styles (analoge to _button.css);
*/

.sc-input {
  max-width: 500px;
  min-width: 200px;
  font-size: 12px;
  height: 30px;
  border-radius: 15px;
  background: #fff;
  border: none;
  padding: 0 10px;
}

.sc-input.sm-centered {
  text-align: center;
}

Make input field bigger by default.

Make input field bigger by default.


ul.color-list-field {
  overflow: auto;
  list-style-type: none;
  padding: 15px 1.5em;
}
ul.color-list-field li {
  float: left;
  position: relative;
  margin: 0 0.75em 0.75em 0;
}
ul.color-list-field li input {
  display: none;
}
ul.color-list-field li input:checked + span {
  -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.8);
  border: 3px solid #e6e6e6;
  -webkit-transition: border 500ms;
  -moz-transition: border 500ms;
  -o-transition: border 500ms;
  transition: border 500ms;
}
ul.color-list-field li span {
  width: 50px;
  height: 50px;
  display: block;
  cursor: pointer;
  border: 10px solid #e6e6e6;
  border-radius: 50px;
}

ul.color-list-field {
  overflow: auto;
  list-style-type: none;
  padding: 15px 1.5em;
}
ul.color-list-field li {
  float: left;
  position: relative;
  margin: 0 0.75em 0.75em 0;
}
ul.color-list-field li input {
  display: none;
}
ul.color-list-field li input:checked + span {
  border: 5px solid rgba(0, 0, 0, 0.3);
  -webkit-transition: border 500ms;
  -moz-transition: border 500ms;
  -o-transition: border 500ms;
  transition: border 500ms;
}
ul.color-list-field li span {
  width: 50px;
  height: 50px;
  display: block;
  cursor: pointer;
  border: 12px solid #e6e6e6;
  border-radius: 50px;
}

Update box-shadow to transparent stroke

Update box-shadow to transparent stroke


.mdl-button {
  text-align: left;
}

#nonmdmrepos {
  border-top: 1px solid lightgrey;
}

header form {
  margin-bottom: 0;
}

header .mdl-radio,
header .mdl-button {
  margin-left: 24px;
}

header .mdl-radio.is-checked .mdl-radio__outer-circle {
  border-color: white;
}

.mdl-data-table tbody tr:hover {
  background-color: inherit;
}

header .mdl-button,
header .mdl-radio__inner-circle {
  background: white;
}

#container {
  margin-top: 24px;
  margin: 0 auto;
}

#container a {
  text-decoration: none;
}

#container a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header {
    display: inherit;
  }
  header .mdl-layout-title {
    display: none;
  }
  header .mdl-layout__header-row {
    padding-left: 0;
  }
  header .mdl-radio,
  header .mdl-button {
    margin-left: 8px;
  }
}

.mdl-button {
  text-align: left;
}

#nonmdmrepos {
  border-top: 1px solid lightgrey;
}

header form {
  margin-bottom: 0;
}

header .mdl-radio,
header .mdl-button {
  margin-left: 24px;
}

header .mdl-radio.is-checked .mdl-radio__outer-circle {
  border-color: white;
}

.mdl-data-table tbody tr:hover {
  background-color: inherit;
}

header .mdl-button,
header .mdl-radio__inner-circle {
  background: white;
}

#container {
  margin-top: 24px;
  margin: 0 auto;
}

#container a {
  text-decoration: none;
}

#container a:hover {
  text-decoration: underline;
}

#container .mdl-card__supporting-text {
  white-space: normal;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header {
    display: inherit;
  }
  header .mdl-layout-title {
    display: none;
  }
  header .mdl-layout__header-row {
    padding-left: 0;
  }
  header .mdl-radio,
  header .mdl-button {
    margin-left: 8px;
  }
}

Allow text to wrap in a milestone card.

Allow text to wrap in a milestone card.


/* Très petits écrans (smartphones, moins de 768px) */
/* Pas besoin de media-query, c'est le style par défaut */

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

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

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

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

 }

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

 }

Add position to adress to mobile

Add position to adress to mobile