spatial-navigation-polyfill/demo/calendar/style.css

A polyfill for the spatial navigation

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

#optionField {
  width: 90%;
  margin: 10px;
}

.wrapper {
  background-color: #fff;
  color: #444;
  width: 100%;
}

.month {
  padding: 0px;
  margin-top: 5px;

  font-weight: 900;
  font-size: 140%;
}

.weekly {
  background-color: #fff;
  color: #111;
  border-radius: 1px;
  padding: 5px;
  font-size: 15px;
  text-align: center;
  width: calc(100% - 10px);
  border: 1px solid #5e98ff;
}

.schedule {
  background-color: #a83b1f;
  color: #fff;

  padding: 5px;
  border-radius: 1px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
}

.sidebar {
  grid-area: sidebar;
  font-size: 15px;
  text-align: center;
  background-color: #dbe8ff;
  border-left: 1px solid #5e98ff;
  border-top: 1px solid #5e98ff;
  border-bottom: 1px solid #5e98ff;
  padding: 5px;

  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(calc(17*7), 50px);
}

.date {
  font-size: 20px;
  font-style: bold;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  color: #333;
  border-bottom: 1px solid #5e98ff;
  padding: 5px;
}

.time {
  padding: 5px;
  font-size: 10px;
  font-family: 'Roboto', sans-serif;
  border-bottom: 1px solid #5e98ff;
  text-align: left;
  color: #000;
}

.extra{
  display: block;
}

.content {
  background-color: blue;
  color: #444;
  width: 100%;
}

.header {
  grid-area: header;
  color: black;
  background-color: #dbe8ff;
  border: 2px solid #5e98ff;
  height: 60px;
  padding: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 110%;
}

#s1 {
  grid-row: 10/13;
}

#s3 {
  grid-row: 6/8;
}

#s8 {
  grid-row: 8/10;
}

#s11 {
  grid-row: 8/9;
}

#s9, #s10 {
  grid-row: 9/14;
}

.mon {
  grid-area: mon;
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(17, 50px);
}

.tue {
  grid-area: tue;
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(17, 50px);
}

.wed {
  grid-area: wed;
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(17, 50px);
}

#s5 {
  grid-row: 10/12;
}

.thu {
  grid-area: thu;
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(17, 50px);
}

#s5 {
  grid-row: 3;
}

#s4 {
  grid-row: 11/15;
}

#s20 {
  grid-row: 11/13;
}

.fri {
  grid-area: fri;
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(17, 50px);
}

#s6 {
  grid-row: 8/10;
}

#s7 {
  grid-row: 17/18;
}

.sat {
  grid-area: sat;
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(17, 50px);
}

#s13 {
  grid-row: 5/6;
}

#s2 {
  grid-row: 14/16;
}

#s15 {
  grid-row: 8/9;
}

#s17 {
  grid-row: 2;
}

#s18 {
  grid-row: 5/6;
}

.sun {
  grid-area: sun;
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(17, 50px);
}

.wrapper {
  display: grid;
  grid-gap: 0em;
  grid-template-columns: 100px auto;
  grid-template-areas:
   "header header"
   "sidebar sun"
   "sidebar mon"
   "sidebar tue"
   "sidebar wed"
   "sidebar thu"
   "sidebar fri"
   "sidebar sat";
}


@media only screen and (min-width: 800px)   {
  .wrapper {
    grid-gap: 0em;
    grid-template-columns: 100px repeat(7, 100px);
    grid-template-areas:
    "header  header  header header header header header header"
    "sidebar sun mon tue wed thu fri sat";
    max-width: 800px;
  }

  .weekly {
    width: 90%;
  }

  .sidebar {
    grid-template-rows: repeat(13, 50px);
  }

  .extra{
    display: none;
  }
}

.work {
  background-color: orange;
  color: #000;
}

.private {
  background-color: purple;
}

.anniversary {
  background-color: violet;
}

.todo {
  background-color: #027dc5;
}

:focus {
  outline: 4px #3582ff solid;
}