less => css precompile

css/design.css

+@viewport {
+  width: device-width;
+  user-zoom: fixed;
+}
+body {
+  margin: 0;
+  background: #0a0a0a;
+  font-family: Arial, serif;
+  overflow: hidden;
+}
+[data-container=panel],
+[data-container=noscript] {
+  background-color: rgba(8, 8, 8, 0.68);
+  border: solid 1px #252525;
+  box-shadow: 0 2px 1px #000000;
+  padding: 6px;
+  float: left;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+[data-container=panelContainer] {
+  float: left;
+  width: 100%;
+  height: 100%;
+  /*padding: 4px;*/
+  padding: 0.2vw;
+  box-sizing: border-box;
+}
+[data-container=split] {
+  box-sizing: border-box;
+  /*	display: flex;
+	flex-direction: column;*/
+  height: 100%;
+  width: 100%;
+  float: left;
+}
+[data-container=cycler],
+[data-container=cycleContainer] {
+  width: 100%;
+  float: left;
+  height: 100%;
+  box-sizing: border-box;
+}
+[data-container=cycleContainer] {
+  display: none;
+}
+[data-container=noscript] {
+  color: white;
+  text-shadow: black 10px 0px 0px;
+  font-size: 40pt;
+}
+[data-container=main] {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  box-sizing: border-box;
+  padding: 0.2vw;
+  background: radial-gradient(black 15%, transparent 15%) 0 0, radial-gradient(black 15%, transparent 15%) 12px 12px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 12px 13px, #171717;
+  background-size: 24px 24px;
+}

css/marquee.css

+@keyframes marquee {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-20%);
+  }
+}
+@-webkit-keyframes marquee {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-20%);
+  }
+}

index.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="favicon.png" type="image/x-icon" rel="icon"/>
     <link rel="stylesheet" href="css/font.css"/>
-    <link rel="stylesheet" href="less/style.php?name=css/design.less"/>
-    <link rel="stylesheet" href="less/style.php?name=css/marquee.less"/>
+    <link rel="stylesheet" href="css/design.less"/>
+    <link rel="stylesheet" href="css/marquee.less"/>
     <link rel="stylesheet" href="css/jquery.ui.css"/>
     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui.min.js"></script>

panels/clock/style.css

+canvas {
+  position: relative;
+  display: inline;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}

panels/departure/style.css

+[data-departure-view] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  padding: 0px;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: display;
+}
+[data-departure-view] [data-departure] {
+  position: relative;
+  width: 100%;
+  background-color: rgba(33, 33, 134, 0.25);
+  color: #FFFFFF;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  padding: 0px;
+  box-sizing: border-box;
+}
+[data-departure-view] [data-departure] [data-transport] {
+  position: relative;
+  display: flex;
+  width: 100%;
+  white-space: nowrap;
+}
+[data-departure-view] [data-departure] [data-transport] [data-line] {
+  position: relative;
+  display: block;
+  background-color: #FFFFFF;
+  color: #0000A0;
+  /*width: 10%;*/
+  height: 100%;
+  text-align: right;
+  padding: 0px 5px;
+}
+[data-departure-view] [data-departure] [data-transport] [data-name] {
+  position: relative;
+  display: block;
+  flex: 1;
+  /*	background-color: #0000A0; */
+  color: #FFFFFF;
+  height: 100%;
+  padding: 0px 5px;
+}
+[data-departure-view] [data-departure] [data-stops] {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] {
+  position: relative;
+  display: flex;
+  list-style: none;
+  width: 100%;
+  margin: 1px 0px 0px 0px;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] [data-time] {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  text-align: right;
+  padding: 0px 5px 0px 0px;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] [data-delay] {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  text-align: left;
+  padding: 0px 5px 0px 0px;
+  font-weight: bold;
+  color: #B8860B;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] [data-name] {
+  position: relative;
+  flex: 1;
+  padding-left: 5px;
+  height: 100%;
+  overflow: hidden;
+}
+[data-departure-view] [data-msg] {
+  position: relative;
+  width: 100%;
+  background-color: #0000A0;
+  color: #FFFFFF;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  padding: 0px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  display: hidden;
+}
+[data-departure-view] [data-msg] [data-title] {
+  width: 100%;
+  background-color: #FFFFFF;
+  color: #0000A0;
+  text-align: center;
+}
+[data-departure-view] [data-msg] [data-message] {
+  width: 100%;
+}

panels/itworks/style.css

+span {
+  color: white;
+  font-size: 200pt;
+}

panels/lsfView/style.css

+/* Table */
+#lsfViewTable {
+  font-weight: bold;
+}
+#lsfViewTableBody {
+  background-color: #ffffff;
+  color: #000000;
+}
+#lsfViewTitleBar {
+  background-color: #ffffff;
+  text-align: center;
+}

panels/matekalypse/style.css

+#eins {
+  color: #C11010;
+  text-align: center;
+  background: linear-gradient(135deg, #fff200 0%, #ffff00 34%, #ffff00 34%, #070000 35%, #000000 47%, #070000 79%, #070000 79%, #ffff00 79%, #ffff00 100%);
+  background-size: 100% 100%;
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+  width: 100%;
+  height: 100%;
+}
+#zwei {
+  width: 100%;
+  word-break: break-all;
+  font-family: vrr;
+  font-size: 142px;
+  height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 5px;
+}
+#zwei span {
+  height: 100%;
+}

panels/mensaPlan/style.css

+/* Table */
+#mensaPlanTable {
+  font-weight: bold;
+}
+#mensaPlanTableHead {
+  background-color: #0000f0;
+  color: #000000;
+}
+#mensaPlanTableBody {
+  background-color: #ffffff;
+  color: #000000;
+}
+#mensaPlanTitleBar {
+  text-align: center;
+}

panels/ufc/style.css

+#title {
+  height: 20%;
+}
+#zeit {
+  height: 10%;
+}
+#zeit span {
+  background: #b00;
+  display: inline-block;
+  padding: 3px;
+}
+* {
+  box-sizing: border-box;
+}
+#container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+#background {
+  bottom: 0px;
+  height: 70% !important;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 50% 100%;
+  -webkit-filter: grayscale(30%);
+  filter: grayscale(30%);
+}
+#content {
+  font-family: NewCicle, Verdana, Arial, sans-serif;
+  text-transform: Capitalize;
+  color: white;
+}
+#background,
+#content {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}

panels/werbung/style.css

+#werbung_container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+#werbung_display {
+  height: 100%;
+  width: auto;
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+}