wc_base.css

/*
Autor: Raphael Hoeser
Datum: 11.07.2017
Version: 1.1

WordClock Default Style

*/

/*@CHARSET "ISO-8859-1";*/
/* Begin: WC Design --- feel free to change */

:root{
  --on-color: #fff;
  --off-color: #333;
  --background-color: #000;
  --dot-padding: 4%;
  --fontSize: 2em;
}

.wc__row__letter{
	transition: color 1s;
}

.wc__row__letter{
	color: var(--off-color);
}

.wc__row__letter--bright{
  color: var(--on-color);
}

.wc__row__stencil{
  background: var(--off-color);
  display: block;
  width: calc(var(--fontSize) / 1);
  height: var(--fontSize);
}

.wc__row__stencil.wc__row__letter--bright{
	background: var(--on-color);
}

.wc__minute{
	transition: background-color 1s;
}

.wc__minute{
  background-color: var(--off-color);
}

.wc__minute--bright{
  background-color: var(--on-color);
}

/* End: WC Design */



/* !!!WARNING!!! Don't change without thinking from here */

/* Begin: WC Layout (this has to be here) */


.wc--hidden{
  display: none;
}

.wc__wrapper{
  position: relative;
}

.wc{
  width: calc(100% - 2*var(--dot-padding));
  height: calc(100% - 2*var(--dot-padding));
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: var(--fontSize);
  transform: translate(-50%,-50%);
  flex-direction: column;
  justify-content: space-around;
}

.wc--lettersOut{
  justify-content: space-between;
}

.wc__row{
	width: 100%;
	display: flex;
	justify-content: space-around;
}

.wc--lettersOut > .wc__row{
  justify-content: space-between;
}

.wc__minute{
  width: 1vh;
  height: 1vh;
  border-radius: 50%;
  position: absolute;
}

.wc__minute--stencil{
  width: var(--fontSize);
  height: var(--fontSize);
  border-radius: 0%;
}

.wc__minute__1{
  top: var(--dot-padding);
  left: var(--dot-padding);
  transform: translate(-50%, -50%);
}
.wc__minute__2{
  top: var(--dot-padding);
  right: var(--dot-padding);
  transform: translate(50%, -50%);
}
.wc__minute__3{
  bottom: var(--dot-padding);
  right: var(--dot-padding);
  transform: translate(50%, 50%);
}
.wc__minute__4{
  bottom: var(--dot-padding);
  left: var(--dot-padding);
  transform: translate(-50%, 50%);
}

/* End: WC Layout */