@value sizeS, sizeXL, sizeXXL from "../../../../styles/size.css"
{}

.main {
    position: relative;
    height: 0;
}

.js,
.go,
.csharp,
.ts {
    position: absolute;
    display: flex;
    padding: sizeS;

    width: sizeXXL;
    height: sizeXXL;

    border-radius: 10%;

    font-size: 1.2rem;
    font-weight: bold;

    cursor: default;
}

.js {
    top: sizeXL;
    right: 0;
    justify-content: flex-end;
    align-items: flex-end;

    transform: rotate(-15deg);

    background: yellow;
    color: #333;
}

.go {
    top: sizeXL;
    left: 0;

    justify-content: center;
    align-items: center;

    transform: rotate(15deg);

    background: lightskyblue;
    color: #fff;
}

.csharp {
    top: 10rem;
    left: 0;

    justify-content: center;
    align-items: center;

    transform: rotate(-15deg);

    background: purple;
    color: #fff;
}

.ts {
    top: 10rem;
    right: 0;
    justify-content: flex-end;
    align-items: flex-end;

    transform: rotate(15deg);

    background: dodgerblue;
    color: #fff;
}

@value sizeS, sizeXL, sizeXXL from "../../../../styles/size.css"
{}

.main {
    position: relative;
    height: 0;
}

.js,
.go,
.csharp,
.ts {
    position: absolute;
    display: flex;
    padding: sizeS;

    width: sizeXXL;
    height: sizeXXL;

    border-radius: 10%;

    font-size: 1.2rem;
    font-weight: bold;

    cursor: default;
}

.js {
    top: sizeXL;
    right: 0;
    justify-content: flex-end;
    align-items: flex-end;

    transform: rotate(-15deg);

    background: gold;
    color: #333;
}

.go {
    top: sizeXL;
    left: 0;

    justify-content: center;
    align-items: center;

    transform: rotate(15deg);

    background: lightskyblue;
    color: #fff;
}

.csharp {
    top: 10rem;
    left: 0;

    justify-content: center;
    align-items: center;

    transform: rotate(-15deg);

    background: purple;
    color: #fff;
}

.ts {
    top: 10rem;
    right: 0;
    justify-content: flex-end;
    align-items: flex-end;

    transform: rotate(15deg);

    background: dodgerblue;
    color: #fff;
}

[styles] Change JS lang color from yellow to gold


#top {
display:block;
position: relative;
top: 170px;
}

#second_from_top {
display: block;
position: relative;

}

#top {
display:block;
position: absolute;
top: 170px;
}

#second_from_top {
display: block;
position: relative;

}

Change position blocks week stylesheet

Change position blocks week stylesheet


body {
    height: 100%;
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}

#legend {
  background-color: rgb(243, 244, 242);
  padding: 10px;
  padding-right: 25px;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  width: 20%;
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-block;
}

}

#legend, p {
  font-size: medium;
}

body {
    height: 100%;
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}

#legend {
  background-color: rgb(243, 244, 242);
  padding: 10px;
  padding-right: 25px;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  width: 20%;
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-block;
}

#legend, h4 {
  font-size: large;
}

#legend, p {
  font-size: medium;
}

Use larger font size for legend title

Use larger font size for legend title


.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #FAFAFA;
    border-bottom: solid 1px #EBEBEB;

    & .query {
        display: block;
        width: 100%;
        margin-right: 8px;
        margin-left: 8px;
        max-width: 700px;
        height: 37px;
        border: none;
        border-radius: 3.5px;
        font-size: large;
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.7);
        background-image: url('img/search-icon.png');
        background-repeat: no-repeat;
        background-size: 18px;
        background-position: 27px;
        padding-left: 60px;
        color:  #484848;

        &::placeholder {
            color: #B8B8B8;
        }

        &:focus {
            outline: none;
            border: none;
            box-shadow: 0px 2px 6px rgba(200, 200, 200, 0.8);
        }
    }
}

.main {
    margin-top: 100px;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #FAFAFA;
    border-bottom: solid 1px #EBEBEB;

.query {
    display: block;
    width: 100%;
    margin: 0 8px;
    max-width: 700px;
    height: 37px;
    border: none;
    border-radius: 3.5px;
    font-size: 16px;
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.7);
    background-image: url('img/search-icon.png');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 27px;
    padding-left: 60px;
    outline: none;
    color:  #484848;

    &::placeholder {
        color: #B8B8B8;
    }

    &:focus {
        outline: none;
        border: none;
        box-shadow: 0px 2px 6px rgba(200, 200, 200, 0.8);
    }
}

}

.main {
    margin-top: 100px;
}

Move query styles out of the navbar definitions.


html,body{margin:0;padding:0;}body{background:#101227 url("https://i.minus.com/iU5ss37QWCFf5.png") no-repeat fixed left top}.mainmenufooter a{color:#cccccc}.mainmenufooter a:hover{color:#e5e5e5}.menugroup .button{color:#f2f2f2;border:solid 1px #000000;background:#333333}.menugroup .button:hover{color:#f2f2f2;border:solid 1px #000000;background:#262626}.menugroup .button:active{color:#f2f2f2;border:solid 1px #000000;background:#262626}.broadcast-lobby{background-color:#101227;color:#cccccc;padding:5px}

Add the Lobby's intro CSS

Add the Lobby's intro CSS


/* Styles for the example script popup */

body {
  background:#fffff0;
  margin:10px;
  }

h1 {
  color: #516650;
  width: 100%;
  text-align: center;
}

.bodybox {
  background-color:white;
  border:1px solid black;
  text-align:left;
}

.bodyfloat	{
  padding:10px;
  color:black;
  text-align:left;
}

#close {
  width: 100%;
  text-align: center;
}

a:link {
  color:#516650;
  font-weight:bold;
}

/* Styles for the example script popup */

body {
  background:#fffff0;
  margin:10px;
  }

h1 {
  color: #663;
  width: 100%;
  text-align: center;
}

.bodybox {
  background-color:white;
  border:1px solid black;
  text-align:left;
}

.bodyfloat  {
  padding:10px;
  color:black;
  text-align:left;
}

#close {
  width: 100%;
  text-align: center;
}

a:link {
  color:#663;
  font-weight:bold;
}

Use same green color as main doc

Use same green color as main doc


/*
 Decorators
 */

body {
    font-family: 'Merriweather', serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
}

pre, code {
    font-family: 'Source Code Pro', monospace;
}

a {
    color: #FB7973;
}
    a:hover {
        color: #E06C67;
        text-decoration: none;
    }

/*
 Decorators
 */

body {
    font-family: 'Merriweather', serif;
}

h1, h2, h3 {
    color: #333331;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
}

pre, code {
    font-family: 'Source Code Pro', monospace;
}

a {
    color: #FB7973;
}
    a:hover {
        color: #E06C67;
        text-decoration: none;
    }

Set a different font colour for main headings


footer {
  border-top: 1px solid #efefef;
  margin-top: 5em;
}

.info {
  font-size: 1.5em;
  color: gray;
}

#page-title {
  font-size: 3em;
  margin-bottom: 0em;
}

#community {
  margin-top: 1em;
  padding: 1em;
  font-size: 1.3em;
  border-top: 2px solid #efefef;
  border-bottom: 2px solid #efefef;
}

#contributing {
  font-size: 1.3em;
}

.btn {
  margin-top: 1em;
}

h2 {
  font-size: 2.3em;
  letter-spacing: 0.14em;
}

h3 {
  font-size: 1.7em;
  letter-spacing: 0.05em;
}

footer {
  border-top: 1px solid #efefef;
  margin-top: 5em;
}

.header {
  border-bottom: 1px solid #efefef;
}

.info {
  font-size: 1.5em;
  color: gray;
}

#page-title {
  font-size: 3em;
  margin-bottom: 0em;
}

#community {
  margin-top: 1em;
  padding: 1em;
  font-size: 1.3em;
  border-top: 2px solid #efefef;
  border-bottom: 2px solid #efefef;
}

#contributing {
  font-size: 1.3em;
}

.btn {
  margin-top: 1em;
}

h2 {
  font-size: 2.3em;
  letter-spacing: 0.14em;
}

h3 {
  font-size: 1.7em;
  letter-spacing: 0.05em;
}

Add an underline to elements with the header class applied


.widget-baseswitch-{{id}} {
	position: relative;
}

.widget-baseswitch-{{id}} .title {
	position: absolute;
	top: 5px;
	width: 100%;
}

.widget-baseswitch-{{id}} .title2 {
	position: absolute;
	top: 23px;
	width: 100%;
}

.widget-baseswitch-{{id}} .state_text {
	position: absolute;
	bottom: -3px;
	width: 100%;
}

.widget-baseswitch-{{id}} .icon {
	position: absolute;
	top: 43px;
	width: 100%;
}

.widget-baseswitch-{{id}} .toggle-area {
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
}

.widget-baseswitch-{{id}} {
	position: relative;
}

.widget-baseswitch-{{id}} .title {
	position: absolute;
	top: 5px;
	width: 100%;
}

.widget-baseswitch-{{id}} .title2 {
	position: absolute;
	top: 23px;
	width: 100%;
}

.widget-baseswitch-{{id}} .state_text {
	position: absolute;
	bottom: -3px;
	width: 100%;
}

.widget-baseswitch-{{id}} .icon {
	position: absolute;
	top: 43px;
	width: 100%;
}

.widget-baseswitch-{{id}} .toggle-area {
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Make toggle area of switch 100% height

Make toggle area of switch 100% height


body {
	background-color: #eee;
  height: 100vh;
  line-height: 150%;
}

body {
	background-color: #eee;
  height: 100vh;
  line-height: 150%;
  box-sizing: border-box;
}

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

Add box-sizing for all elements

Add box-sizing for all elements


th[data-id=level_name] {
    min-width: 90px;
}

/* RAL 6017 */
.openerp .header,
.openerp .main_table,
.openerp .ui-widget-header,
.openerp .menu,
.openerp .menu a:hover,
.openerp .menu a:focus,
.openerp .menu a.active,
.openerp .secondary_menu a.oe_secondary_menu_item
{
    background-color: #468641 !important;
}

.openerp .menu a:hover,
.openerp .menu a:focus,
.openerp .menu a.active {
    color: #FAAB21;
}

Set RAL 6017 as background color, kind of yellow as color


.explorer-dashboard {

  &__hero {
    color: var(--color0);
    background-color: transparent;
    text-align: center;
  }

  .hero {

    &-container {
      @extend .hide;
    }

    @media (--md) {
      &-container {
        @extend .show;
        @extend .outer-container;
        lost-utility: clearfix;

        padding: 18px 48px 48px 48px;

        .logo__container {
          width: 100%;
          padding-bottom: 18px;
        }

        .logo__wrapper {
          height: 100%;
          box: horizontal center;
        }

        .logo__img {
          width: 49px;
          height: 45px;
        }

        .explorer-search {
          &__container {
            lost-column: 10/12;
            lost-offset: 1/12;
          }
        }
      }
    }

    &-headline {
      font-size: 26px;
      line-height: 1.25;
      color: var(--color3);
      font-family: var(--fontFamily0-Light);
    }

    &-subheadline {
      font-size: 13px;
      line-height: 1.4;
      font-family: var(--fontFamily0-Light);
      color: color(var(--color3) a(0.5));
      opacity: 0.5;
      margin:10px 0;
      padding-bottom: 15px;
    }

  }
}

.explorer-dashboard {

  &__hero {
    color: var(--color0);
    background-color: transparent;
    text-align: center;
  }

  .hero {

    &-container {
      @extend .hide;
    }

    @media (--md) {
      &-container {
        @extend .show;
        @extend .outer-container;
        lost-utility: clearfix;

        padding: 18px 48px 48px 48px;

        .logo__container {
          width: 100%;
          padding-bottom: 18px;
        }

        .logo__wrapper {
          height: 100%;
          box: horizontal center;
        }

        .logo__img {
          width: 49px;
          height: 45px;
        }

        .explorer-search {
          &__container {
            lost-column: 10/12;
            lost-offset: 1/12;
          }
        }
      }
    }

    &-headline {
      font-size: 26px;
      line-height: 1.25;
      color: var(--color3);
      font-family: var(--fontFamily0-Light);
    }

    &-subheadline {
      font-size: 13px;
      line-height: 1.4;
      font-family: var(--fontFamily0-Light);
      color: color(var(--color3) a(0.5));
      margin:10px 0;
      padding-bottom: 15px;
    }

  }
}

Fix transparency of Hero's subheadline

[CSE-95] Fix transparency of Hero's subheadline


/*
 *= require ./main
 *= require ./automate_import_export
 *= require ./dialog_fields
 *= require ./angular
 *= require ./notifications
 *= require ./schedule_editor
 *= require ./miq_tree
 *= require ./timeline
 *= require ./topology
 *= require ./container_topology
 *= require ./physical_infra_topology
 *= require ./metrics
 *= require ./service_dialogs
 *= require ./remote_console
 *= require ./piecharts
*/

/*
 *= require main
 *= require ./automate_import_export
 *= require ./dialog_fields
 *= require ./angular
 *= require ./notifications
 *= require ./schedule_editor
 *= require ./miq_tree
 *= require ./timeline
 *= require ./topology
 *= require ./container_topology
 *= require ./physical_infra_topology
 *= require ./metrics
 *= require ./service_dialogs
 *= require ./remote_console
 *= require ./piecharts
*/

Allow loading of main.scss from outside this repository

https://bugzilla.redhat.com/show_bug.cgi?id=1712933


.scroll.contains-table {
    margin-left: 0;
}

.scroll.contains-table > table {
    margin-left: auto;
    margin-right: auto;
}

p {
    text-align: center;
}

td p {
    text-align: left;
}

table th.name {
    text-align: center;
}

table .link-cell {
    min-width: 8em;
}

td {
    padding: 0;
}

th.name {
    text-align: center;
}

#introduction + section > h1 {
    margin-top: 0;
}

#custom-timelines {
    line-height: 1em;
}

#custom-timelines a {
    margin-left: 1em;
    text-decoration: none;
}

#custom-timelines a:first-child {
    margin-left: 0;
}

Accounts: Remove vestigial "custom timelines" CSS.


@value colorDividers from '../styles/colors.css';
@value fastOutSlowIn from '../material/curve-constants.css';
@value row, grow from '../styles/flex.css';

.container {
  composes: row;
  padding: 0;
  margin: 0 auto;
  height: calc(100vh - 64px);
  max-width: 884px;
}

.appBarContent {
  max-width: 884px;
  margin: 0 auto;
}

.messagesAndInput {
  composes: grow;
  min-width: 320px;
  height: 100%;
}

.messages {
  height: calc(100% - 44px);
}

.chatInput {
  margin: -1px 0 0 0;
  padding: 0 16px;
  /* Without this, Chrome flashes a frame+ of a pure white border when added */
  border-top: 1px solid rgba(0, 0, 0, 0);
  transition: border 250ms fastOutSlowIn;
}

.chatInputScrollBorder {
  composes: chatInput;
  border-top: 1px solid colorDividers;
}

.navCloseButton {
  min-height: 36px;
  width: 36px;
}

@value colorDividers from '../styles/colors.css';
@value row, grow from '../styles/flex.css';
@value fastOutSlowIn from '../material/curve-constants.css';

.container {
  composes: row;
  padding: 0;
  margin: 0 auto;
  height: calc(100vh - 64px);
  max-width: 884px;
}

.appBarContent {
  max-width: 884px;
  margin: 0 auto;
}

.messagesAndInput {
  composes: grow;
  min-width: 320px;
  height: 100%;
}

.messages {
  height: calc(100% - 44px);
}

.chatInput {
  margin: -1px 0 0 0;
  padding: 0 16px;
  /* Without this, Chrome flashes a frame+ of a pure white border when added */
  border-top: 1px solid rgba(0, 0, 0, 0);
  transition: border 250ms fastOutSlowIn;
}

.chatInputScrollBorder {
  composes: chatInput;
  border-top: 1px solid colorDividers;
}

.navCloseButton {
  min-height: 36px;
  width: 36px;
}

Fix ordering of CSS imports that was breaking production asset building.


Rebase of the basic branch

Rebase of the basic branch


body { display: grid; }
body > header { grid-area: header; }
body > main { grid-area: main; }
body > footer { grid-area: footer; }
body > nav { grid-area: nav; }

table { width: 100%; }
pre { max-width: 90vw; overflow-x: auto; }

@media screen and (max-width: 900px) {
  body {
    grid-template-areas:
      'header'
      'nav'
      'main'
      'footer';
    padding: 1vh 1vw;
  }

  body > nav > ul {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 901px) {
  body {
    grid-template-areas:
      'nav header'
      'nav main'
      'nav footer';
    column-gap: 2ch;
    margin: auto;
    max-width: 1000px;
    font-size: 1.5em;
  }

  header, main, footer {
    max-width: 800px;
  }
}

body { display: grid; }
body > header { grid-area: header; }
body > main { grid-area: main; }
body > footer { grid-area: footer; }
body > nav { grid-area: nav; }

table { width: 100%; }
pre { max-width: 90vw; overflow-x: auto; }

@media screen and (max-width: 900px) {
  body {
    grid-template-areas:
      'header'
      'nav'
      'main'
      'footer';
    padding: 1vh 1vw;
  }

  body > nav > ul {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 901px) {
  body {
    grid-template-areas:
      'nav header'
      'nav main'
      'nav footer';
    column-gap: 2ch;
    margin: auto;
    max-width: 1000px;
    font-size: 1.5em;
  }

  header, main, footer {
    max-width: 800px;
  }

  nav > ul {
    position: sticky;
    margin-top: 24px;
    top: 24px;
  }
}

Make navbar sticky on desktop

Make navbar sticky on desktop


.datepicker .datepicker-content {
  padding: 0;
}

.datepicker-calendar {
  padding: 0;
}

.calendar {
  width: 100%;
  overflow: auto;
}

.calendar th {
  font-size: 10px;
}
.calendar td a {
  font-size: 10px;
  padding: 3px;
}

.popover-content {
  padding: 0;
}

.tip-inner .datepicker-close a {
  position: absolute;
  right: 0px; top: 0px; width:20px;
  background-color: #FFF; color: #595959;
  margin-top:-10px; margin-right:-10px; border-radius: 20px;
  padding-left: 3px; padding-top: 1px;
  cursor:pointer; z-index: -1;
  font-size:16px;
  text-decoration: none;
}

.tip-inner .datepicker-close a:hover {
  color: black;
  font-weight: bold;
}

.tip-inner {
  max-width: none;
}
.popover-content {
  padding: 0;
}
.datepicker .datepicker-content {
  padding: 0;
}
.datepicker-calendar {
  padding: 0;
}
.calendar {
  width: 100%;
  overflow: auto;
}
.calendar td a {
  padding: 3px;
}
.tip-inner .datepicker-close a {
  position: absolute;
  right: 0px; top: 0px; width:20px;
  background-color: #FFF; color: #595959;
  margin-top:-10px; margin-right:-10px; border-radius: 20px;
  padding-left: 3px; padding-top: 1px;
  cursor:pointer; z-index: -1;
  font-size: 1.3em;
  text-decoration: none;
}
.tip-inner .datepicker-close a:hover {
  color: black;
  font-weight: bold;
}

Remove font-size styles - they should be left to theme


.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: $nav-height;
  box-shadow: 0 0 2px rgba(0,0,0,.5);
  padding: 1em;
  display: flex;
  align-items: center;
  background-color: #fff;
  z-index: 1;
}

.nav__wrapper {
  max-width: $max-width;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.nav__logo-wrapper {
  text-decoration: none;
}

.nav__logo {
  font-size: 1em;
  margin: 0;
  user-select: none;
  color: $text-color;
  text-decoration: none;
}

.btn--nav {
  font-size: 0.8em;
  text-transform: uppercase;
}

.btn--nav + .btn--nav {
  margin-left: 1em;
}

@media screen and (max-width: 400px) {
  .nav__wrapper {
    justify-content: none;
  }

  .nav__logo-wrapper {
    margin: 0 auto;
  }

  .btn--nav {
    display: none;
  }
}

Hide login/register buttons in navbar on small screens


:root {
  --popup-width: 450px;
  --popup-height: 600px;
  --popup-tiny-height: calc(var(--wrapper-tiny-height) + var(--header-height));
  --header-height: 42px;
  --header-color: #FFF;
  --wrapper-tiny-height: 52px;
  --padding-side: 12px;
  --image-width: 50px;
  --image-margin: 7px;
}

.popup {
  width: var(--popup-width);
  height: var(--popup-height);
  border-top: 1px solid transparent;
  box-sizing: border-box;
}

.popup-tiny {
  height: calc(var(--popup-tiny-height) - var(--header-height));
}

.popup-tiny .wrapper {
  height: var(--wrapper-tiny-height);
}

.wrapper {
  width: 100%;
  overflow: auto;
  height: calc(var(--popup-height) - var(--header-height));
}

.auth-wrapper {
  padding: 12px;
}

:root {
  --popup-width: 450px;
  --popup-height: 600px;
  --popup-tiny-height: calc(var(--wrapper-tiny-height) + var(--header-height));
  --header-height: 42px;
  --header-color: #FFF;
  --wrapper-tiny-height: 52px;
  --padding-side: 12px;
  --image-width: 50px;
  --image-margin: 7px;
}

.popup {
  width: var(--popup-width);
  height: var(--popup-height);
  border-top: 1px solid transparent;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
}

.popup-tiny {
  height: calc(var(--popup-tiny-height) - var(--header-height));
}

.popup-tiny .wrapper {
  height: var(--wrapper-tiny-height);
}

.wrapper {
  width: 100%;
  overflow: auto;
  height: calc(var(--popup-height) - var(--header-height));
}

.auth-wrapper {
  padding: 12px;
}

Fix bug when there was always a space for a scrollbar in popup


@import "fyndiq-styles-colors/colors.css";

.description {
  margin: 0;
  font-weight: 300;
}

.tagsWrapper {
  margin-bottom: 10px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 5px;
  font-size: 11px;
  border-radius: 100px;
  color: var(--color-white);
  background-color: var(--color-black);
}

@import "fyndiq-styles-colors/colors.css";

.description {
  margin: 0;
  font-weight: 300;
}

.tagsWrapper {
  margin-bottom: 10px;
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  margin: 0 5px 5px 0;
  font-size: 12px;
  border-radius: 2px;
  color: var(--color-white);
  background-color: var(--color-tags);
  white-space: nowrap;
}

Adjust Tags style for new design

:eyes: Adjust Tags style for new design


/*
    moment-timezone-diff.css
    version : 0.3.0
    authors : Martyn Davis
    license : MIT
*/
.mtzdCurrentTime {
    cursor: pointer;
}
.mtzdError {
    background-color: yellow;
}
.mtzdLink {
    cursor: pointer;
}
.mtzdLink:hover {
    text-decoration: underline;
}
.mtzdDatepicker {
    display: none;
}
.mtzdDatepickerImage {
    position: relative;
    cursor: pointer;
    height: 20px;
    width: 22px;
    top: 5px;
}
#mtzdFormats {
    display: none;
}

Add style for id mtzdFormats to be hidden


.description {
	position: absolute;
	bottom: 0;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
	padding-bottom: 20px;
}

.sticker-cast {
	position: absolute;
	bottom: 0;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}

.no-space {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

.sticker {
	display: inline-block;
	background-size: cover;
	margin-bottom: -5px;
}

.main-sticker {
	width: 492px;
	height: 277px;
}

.sticker-left {
	width: 246px;
	height: 140px;
}

.sticker-right {
	width: 246px;
	height: 140px;
}

.description {
	position: absolute;
	bottom: 0;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
	padding-bottom: 20px;
}

.sticker-cast {
	position: absolute;
	bottom: 0;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}

.no-space {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

.sticker {
	display: inline-block;
	background-size: cover;
	margin-bottom: -6px;
}

.main-sticker {
	width: 492px;
	height: 277px;
}

.sticker-left {
	width: 246px;
	height: 140px;
}

.sticker-right {
	width: 246px;
	height: 140px;
}

Fix homepage display on firefox

Fix homepage display on firefox


.right {
    float: right;
}

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

footer {
    padding-top: 2em;
    padding-bottom: 2em;
    border-top: 1px solid #E5E5E5;
}

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

.right {
    float: right;
}

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

footer {
    padding-top: 2em;
    padding-bottom: 2em;
    border-top: 1px solid #E5E5E5;
}

.logo, .logo:hover {
    color: #000000;
    text-decoration: none;
}

Remove hover effect on logo

Remove hover effect on logo


html, body, .clock-div, .digit, .bit {
    display: flex;
}

html, body {
    height: 100%;
    width: 100%;
}

.clock-div {
    flex: 1 1 auto;
    border: 2px solid black;
    z-index: 2;
}

.digit {
    flex: 1 1 auto;
    flex-direction: column;
}

.bit {
    border: 2px solid black;
    flex: 1 1 2px;
    text-align: center;
}

.bit.on {
    background: white;
    color: white;
}

.bit.off {
    background: black;
    color: black;
}

.clock-canvas {
    display: none;
    z-index: -1;
}

Remove irrelevant selector, all styling is done by JS.


.partition-indicator-avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}
.partition-indicator-avatar.running {
  background-color: #0572CE;
  color: #f5f5f5;
}
.partition-indicator-avatar.not-running {
  background-color: #AFBAC5;
  color: #FFF;
}

Change color of partition indicators.

Change color of partition indicators.


#imgcontainer {
  position:relative;
  width: 100%;
  height: 100%;
  overflow: clip;
}

#imgdistort {
  position: absolute;
  top: 0px;
  left: 0px;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
}

.corner {
  position: absolute;
  top: -10px; left: -10px;
}

#inputimage {
  position:absolute;
  top:-100px;
}

.leaflet-pane .leaflet-overlay-pane img {
  pointer-events: all !important;
}

.leaflet-toolbar-icon {
  box-sizing: initial;
}

.leaflet-toolbar-tip {
  box-sizing: border-box;
}

Fix for Toolbar stem height

Fix for Toolbar stem height


/* Tab options */
.maxwidth .name {
  width: 8em;
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidenames .name,
.hidenames .playercol {
  display: none;
}

.hideteamname .teamname,
.hideteamname .teamcol {
  display: none;
}

.hidefinished .matchtable.finished {
  display: none;
}

/* Tab options */
.maxwidth .name,
.maxwidth .teamname {
  width: 8em;
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidenames .name,
.hidenames .playercol {
  display: none;
}

.hideteamname .teamname,
.hideteamname .teamcol {
  display: none;
}

.hidefinished .matchtable.finished {
  display: none;
}

Make maxwidth act on teamname, too

Make maxwidth act on teamname, too


h1 {
    font-size: 32px;
    line-height: 44px;
}

h2 {
    font-size: 26px;
    line-height: 34px;
    opacity: 0.7;
}

h3 {
    font-size: 18px;
    line-height: 24px;
    opacity: 0.7;
}

@media (max-width: 768px) {
    body {
        margin-top: 40px;
        background-color: #eee;
    }

    button.xs-full {
        width: 100%;
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 18px;
    }
}

h1 {
    font-size: 32px;
    line-height: 44px;
}

h2 {
    font-size: 26px;
    line-height: 34px;
    opacity: 0.7;
}

h3 {
    font-size: 18px;
    line-height: 24px;
    opacity: 0.7;
}

/*
   Need background colour on opaqued items in IE otherwise it doesn't
   know what colour to anti-alias against.
 */
body.IE8 h2,
body.IE8 h3 {
    background-color: #fff;
}

@media (max-width: 768px) {
    body {
        margin-top: 40px;
        background-color: #eee;
    }

    button.xs-full {
        width: 100%;
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 18px;
    }
}

Add background colour for IE8 so that it knows what to anti-alias against


/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/
.button_to input[type=submit] {
  background: #fa5503;
  background-image: -webkit-linear-gradient(top, #fa5503, #ad2626);
  background-image: -moz-linear-gradient(top, #fa5503, #ad2626);
  background-image: -ms-linear-gradient(top, #fa5503, #ad2626);
  background-image: -o-linear-gradient(top, #fa5503, #ad2626);
  background-image: linear-gradient(to bottom, #fa5503, #ad2626);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #ffffff;
  font-size: 23px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

Make the button nicer by adding CSS

Make the button nicer by adding CSS


h1 {
  border-bottom: 1px solid #333333;
  color: #333333;
  font-size: 24pt; }

h2 {
  font-size: 22pt; }

h3 {
  font-size: 20pt; }

p, ul, ol {
  font-size: 12pt; }

table th, table td {
  font-size: 11pt;
  padding: 4px;
  text-align: left; }

h1 {
  border-bottom: 1px solid #333333;
  color: #333333;
  font-size: 20pt; }

h2 {
  font-size: 18pt; }

h3 {
  font-size: 16pt; }

p, ul, ol {
  font-size: 12pt; }

table th, table td {
  font-size: 11pt;
  padding: 4px;
  text-align: left; }

Reduce size of PDF heading fonts.

Reduce size of PDF heading fonts.


/* [XUL] Ample item on the bookmark bar */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.bookmark-item { margin: 0 3px !important; }

/* [XUL] Ample item on the bookmark bar */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.bookmark-item { margin: 0 2px !important; }

Move closer to the bookmark item in front of one


.root {
  display: inline-block;
  position: relative;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.root :global svg {
  width: inherit;
  height: inherit;
  line-height: inherit;
}

.pactH {
  height: 1.1em;
  width: calc(1.1em * 2.272727273);
}

/* Stroked */
.clock,
.coffee,
.recurring,
.cog,
.tick,
.chevron,
.bean,
.aeropressFilter,
.anDrip,
.pause,
.cross,
.plus,
.heart,
.pod,
.pod_long,
.pod_short,
.card,
.arrow,
.asap {
  fill: transparent;
  stroke: currentColor;
}

/* Filled */
.pactV,
.pactH,
.triangle,
.stamp,
.pin,
.play,
.thumb,
.voucher,
.drip,
.aeropress,
.cafetiere,
.wholebean,
.espresso,
.stovetop,
.calendar {
  fill: currentColor;
}

.twitter {
  fill: var(--color-twitter);
}
.facebook {
  fill: var(--color-facebook);
}
.instagram {
  fill: var(--color-instagram);
}

.root {
  display: inline-block;
  position: relative;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.root :global svg {
  width: inherit;
  height: inherit;
  line-height: inherit;
}

.pactH {
  height: 1.1em;
  width: calc(1.1em * 2.272727273);
}

/* Stroked */
.clock,
.coffee,
.recurring,
.cog,
.tick,
.chevron,
.bean,
.aeropressFilter,
.anDrip,
.pause,
.cross,
.plus,
.heart,
.pod,
.pod_long,
.pod_short,
.card,
.arrow,
.play,
.asap {
  fill: transparent;
  stroke: currentColor;
}

/* Filled */
.pactV,
.pactH,
.triangle,
.stamp,
.pin,
.thumb,
.voucher,
.drip,
.aeropress,
.cafetiere,
.wholebean,
.espresso,
.stovetop,
.calendar {
  fill: currentColor;
}

.twitter {
  fill: var(--color-twitter);
}
.facebook {
  fill: var(--color-facebook);
}
.instagram {
  fill: var(--color-instagram);
}

Change play icon to be stroked

Change play icon to be stroked


body {
  font-size: 180%;
}

.container {
  max-width: 680px;
}

button.geolocation,
button.report {
  /*font-size: 80%;*/
  font-size: 4vw;
  width: 100%;
  /*max-width: 680px;*/
}

div.row.landing p {
  margin-bottom: 15px;
}

div.row p.map img {
  width: 100%;
}

div.row.results h4,
div.row.detail h4 {
  font-weight: bold;
}

div.row.results div.result {
  border-bottom: 1px solid lightgray;
}

div.row.report {
  margin-top: 7.5px;
}

div.row.nav button {
  font-size: 90%;
}

body {
  font-size: 180%;
}

.container {
  max-width: 680px;
}

button.geolocation,
button.report {
  width: 100%;
  font-size: 4vw;
}

@media (min-width: 768px) {
  button.geolocation,
  button.report {
    font-size: 3vw;
  }
}

@media (min-width: 992px) {
  button.geolocation,
  button.report {
    font-size: 24px;
  }
}

div.row.landing p {
  margin-bottom: 15px;
}

div.row p.map img {
  width: 100%;
}

div.row.results h4,
div.row.detail h4 {
  font-weight: bold;
}

div.row.results div.result {
  border-bottom: 1px solid lightgray;
}

div.row.report {
  margin-top: 7.5px;
}

div.row.nav button {
  font-size: 90%;
}

Make button text display properly across devices


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

/* This is just "canary" css until the app has been styled to allow us to
ensure that the app's assets are loading correctly. */
body { font-family: Arial, Helvetica, sans-serif; }
h1 { color: red; }
textarea { background-color: cadetblue; }

Add "canary" CSS styling to test asset deployment


/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/
.p-Widget .jp-NotebookWidget {
  min-width: 50px;
  min-height: 50px;
}

.p-Widget .jp-NotebookContainer {
  overflow: auto;
}

.p-Widget .jp-NotebookWidget-body {
  padding: 0.5em;
  font-size: 11px;
}

Make css more specific than phosphor css


.wrapper .main-content{
    width: 100%;
  -webkit-animation: glitch 10s infinite;
  /* position:relative; */
}

@-webkit-keyframes glitch {
  30% {  }
  40% { opacity:1; top:0; left:0;  -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(50deg,0);}
  42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(-80deg,0);}
  43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  65% { }
}

.wrapper .main-content{
    width: 100%;
  -webkit-animation: glitch 10s infinite 3s;
  /* position:relative; */
}

@-webkit-keyframes glitch {
  30% {  }
  40% { opacity:1; top:0; left:0;  -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(50deg,0);}
  42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(-80deg,0);}
  43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  65% { }
}

Add slight delay to secondary glitch

Add slight delay to secondary glitch


.footer {
    padding: 2rem 0;
    font: 1rem/1.5 Georgia;
    text-align: center;
}

.footer {
    padding: 2rem 0;
    text-align: center;
}

Remove serif font from the footer.

Remove serif font from the footer.


/* Custom styling for tool box */
toolitemgroup > button {
    border-width: 1px 0px 0px 0px;
    border-radius: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-image: none;
    box-shadow: none;
}

toolitemgroup:first-child > button {
    border-width: 0px;
}

#diagrams {
    border-top-width: 0px;
}

diagramview {
    background: white;
}

@binding-set expand-collapse-row {
  bind "Left" { "expand-collapse-cursor-row" (1, 0, 0) };
  bind "Right" { "expand-collapse-cursor-row" (1, 1, 0) };
}

treeview {
  -gtk-key-bindings: expand-collapse-row;
}

Use left/right arrow keys to expand/collapse tree view

Fixes #641.


body {
  display: grid;
}

#calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  width: 320px;
  height: 568px;
}

#response-pane {
  display: grid;
  grid-area: response-pane;
  grid-column: 1/5;
  grid-row: 1/2;
}

#modifier-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/4;
  grid-row: 2/3;
}

#operation-buttons {
  display: grid;
  grid-area: operation-buttons;
  grid-column: 4/5;
  grid-row: 2/7;
}

#digit-buttons {
  display: grid;
  grid-area: digit-buttons;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column: 1/4;
  grid-row: 3/7;
}

.digits:nth-last-child(2) {
  grid-column: 1/3;
}

/* BEGIN CALCULATOR STYLING */

body {
  display: grid;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 75%;
}

#calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  width: 320px;
  height: 568px;
}

#response-pane {
  display: grid;
  grid-area: response-pane;
  grid-column: 1/5;
  grid-row: 1/2;
  background-color: #292929;
  color: #FFFFFF
}

#modifier-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/4;
  grid-row: 2/3;
}

.modifiers {
  background-color: #D6D6D6;
}

#operation-buttons {
  display: grid;
  grid-area: operation-buttons;
  grid-column: 4/5;
  grid-row: 2/7;
}

.operations {
  background-color: #FF7F00;
  color: #FFFFFF;
}

#digit-buttons {
  display: grid;
  grid-area: digit-buttons;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column: 1/4;
  grid-row: 3/7;
}

.digits:nth-last-child(2) {
  grid-column: 1/3;
}

.digits {
  background-color: #E0E0E0;
}

Add colors and font family

Add colors and font family


a {
	color: #AC1F24;
}

.authors {
	color: gray;
	font-size: 12px;
}

h3 {
	color:#27ae60;
	font-family:  Geneva, Tahoma, Verdana, sans-serif;
}

Change H3 color and font

Change H3 color and font


body {
    background: url('/Users/allisonbrett/Projects/Therapy3/1918.jpeg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.test {
  color: red;
}

body {
    background: url('https://github.com/allisonPlusPlus/therapy3/blob/master/1918.jpeg?raw=true') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Add full path to background image

Add full path to background image


/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

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

.contentPane {
  margin: 9px 8px 5px 8px;
}

.actionButtons {
  margin: 0px 3px 6px 3px !important;
}

treechildren::-moz-tree-image(siteCol) {
  list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png);
  width: 16px;
  height: 16px;
  -moz-margin-end: 5px;
}

Fix favicon sizes in password manager

Fix favicon sizes in password manager


/* Body Styling properties example */
body {
    font-family; Garamond, 'Book Antiqua', Palatino, serif;
    font-size: 16px;
}

h1 {
    font-style: oblique;
    font-size: 48px;
}

h3 {
    font-family: 'Franklin Gothic', sans-serif;
    font-size: 24px;
}

a {
    color: #34576d;
}

a:hover {
    color: #333333;
}

/* Navigation Bar styling */
.navbar-inverse .navbar-brand {
    color: #ffffff;
    font-size: 28px;
}

.navbar-inverse {
    background-color: #34576d;
    border-color: #666666;
    -moz-box-shadow: 2px 2px 7px #000;
    -webkit-box-shadow: 2px 2px 7px #000;
}

.navbar-inverse .navbar-nav>li>a {
    color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a:hover {
    color: #999999;
}

Change the color of the header and add a drop shadow


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

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

Split background colors of jumbotron and body


@import url('sphinxdoc.css');

.section h1 {
  font-size: 1.7em;
}

.section h2 {
  font-size: 1.4em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-top: 0.2em;
  padding-bottom: 0.3em;
  padding-left: 0.3em;
  border-bottom: thin solid gray;
  border-left: thick solid gray;
}

.section h3 {
  font-size: 1.3em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-bottom: 0.2em;
  border-bottom: thin solid gray;
}

.section h4 {
  font-size: 1.2em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-bottom: 0.1em;
  border-bottom: thin dotted gray;
}

.section h5 {
  font-size: 1.1em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-bottom: 0.1em;
  border-bottom: thin dotted lightgrey;
}

.section caption {
  margin-top: 1em;
  margin-bottom: 0.3em;
}

div.attention p.admonition-title {
  background-color: #EE9816;
}

Modify attention directive block color

Modify attention directive block color


#search{
  padding: 7px;
  user-select: none;
}

#search .search-bar{
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: fill-available;
  margin-bottom: 2px;
}

#search .result,
#search .toggle-button{
  cursor: pointer;
}

#search .switches{
  width: fit-content;
  margin-left: auto;
  font-size: 12px;
}

#search .toggle-button{
  display: inline-block;
  margin-left: 2px;
  border: 1px solid gray;
  padding: 1px;
  color: grey;
  text-align: center;
}

#search .toggle-button:hover{
  color: lightgray;
}

#search .toggle-button.selected{
  color: black;
  border-color: #3399ff;
}

#search .loading{
  text-align: center;
}

#search{
  padding: 7px;
  width: 100%;
  overflow: auto;
  user-select: none;
}

#search .search-bar{
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: fill-available;
  margin-bottom: 2px;
}

#search .result,
#search .toggle-button{
  cursor: pointer;
}

#search .switches{
  width: fit-content;
  margin-left: auto;
  font-size: 12px;
}

#search .toggle-button{
  display: inline-block;
  margin-left: 2px;
  border: 1px solid gray;
  padding: 1px;
  color: grey;
  text-align: center;
}

#search .toggle-button:hover{
  color: lightgray;
}

#search .toggle-button.selected{
  color: black;
  border-color: #3399ff;
}

#search .loading{
  text-align: center;
}

Update styling for the search panel

Update styling for the search panel


@import url("chrome://browser/skin/browser-common.css");

@media not all and (-moz-os-version: windows-xp) { /* Not Windows XP and not Classic theme */
	@media not all and (-moz-windows-classic) {
		#context-back[_moz-menuactive=true],
		#context-forward[_moz-menuactive=true],
		#context-reload[_moz-menuactive=true],
		#context-stop[_moz-menuactive=true],
		#context-bookmarkpage[_moz-menuactive=true] {
		  list-style-image: url("chrome://browser/skin/Toolbar.png"); /* remain black */
		}
	}
}

@import url("chrome://browser/skin/browser-common.css");

@media not all and (-moz-os-version: windows-xp) { /* Not Windows XP and not Classic theme */
  @media not all and (-moz-windows-classic) {
    #context-back[_moz-menuactive=true],
    #context-forward[_moz-menuactive=true],
    #context-reload[_moz-menuactive=true],
    #context-stop[_moz-menuactive=true],
    #context-bookmarkpage[_moz-menuactive=true] {
      list-style-image: url("chrome://browser/skin/Toolbar.png"); /* remain black */
    }

    #context-navigation {
      background-color: -moz-dialog;
    }
  }
}

Improve context menu background in Windows


#top {
display:block;
display: absolute;
background-color:;
top: 100px;
}

#second_from_top {
display: block;
position: relative;

}

#top {
display:block;
display: absolute;
background-color:;
top: 150px;
}

#second_from_top {
display: block;
position: relative;

}

Change top block technical stylesheet

Change top block technical stylesheet


.search-field {
    width: 267px;
}
@media only screen and (max-width: 400px) {
    .search-field {
        width: 200px;
    }
}
@media only screen and (max-width: 320px) {
    .search-field {
        width: 160px;
    }
}

Adjust width of search control for smaller screens

Refs #228


/* styles.css */
html, body {
    height: 100%;
}

#app, .map {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
}

#app, .map {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
}

.map-panel {
  width: 300px;
  z-index: 1005;
}

#menu-panel {
  width: 500px;
  max-width: 500px;
  top: 15px;
  left: 15px;
  position: fixed;
}

#menu-panel .brand-logo {
  margin-left: 10px;
}

#menu-panel textarea {
  resize: none;
}

/* styles.css */
html, body {
    height: 100%;
}

#app, .map {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
}

#app, .map {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
}

.map-panel {
  width: 300px;
  z-index: 1005;
}

#menu-panel {
  width: 500px;
  max-width: 500px;
  top: 15px;
  left: 15px;
  position: fixed;
  margin: 0;
}

#menu-panel .brand-logo {
  margin-left: 10px;
}

#menu-panel textarea {
  resize: none;
}

Fix margin around menu panel

Fix margin around menu panel


#content img {
  max-width: 100%;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
  padding-bottom: 10px;
  margin: 44px 0 22px;
  border-bottom: 1px solid #eee;
}

#content kbd {
  display: inline-block;
  padding: 3px 5px;
  line-height: 12px;
  color: #555;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
}

#content img {
  max-width: 100%;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
  padding-bottom: 10px;
  margin: 44px 0 22px;
  border-bottom: 1px solid #eee;
}

#content code {
  white-space: nowrap;
}

#content kbd {
  display: inline-block;
  padding: 3px 5px;
  line-height: 12px;
  color: #555;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
  white-space: nowrap;
}

Fix <code> & <kbd> line wrapping

:bug: Fix <code> & <kbd> line wrapping