stop repetition in css

Playground/css/color_ts.css

@@ -0,0 +1,79 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
+#waitTitle {
+    color: rgb(208, 23, 211);
+}
+#exampleList #exampleBanner h1 {
+    color: #ae00ef;
+}
+#exampleList .horizontalSeparator {
+    border-top: 1px solid #ae00ef;
+}
+#exampleList .categoryContainer .itemLine .itemContent .itemLineDocLink {
+    color: #ae00ef;
+}
+#exampleList .categoryContainer .itemLine .itemContent .itemLinePGLink {
+    color: #ae00ef;
+}
+
+#fpsLabel {
+    background-color: #9147c9;
+}
+.navbar .title {
+    color: #bb47c9;
+}
+.navbar .version {
+    color: #9147c9;
+}
+
+.button {
+    background-color: #9147c9;
+}
+.button:hover {
+    background-color: #bb47c9;
+}
+.navbar .button.run {
+    background-color: #bb47c9;
+}
+.navbar .select .toDisplay {
+    border: 1px solid #9147c9;
+}
+.navbar .select .subSelect .toDisplaySub {
+    border: 1px solid #9147c9;
+}
+
+.navbar .select .toDisplay .option {
+    font-size: 0.9em;
+    height: 35px;
+    line-height: 35px;
+    padding: 0px 5px 0px 5px;
+    text-align: center;
+    border-bottom : 1px solid rgba(0,0,0,0.1);
+}
+
+.navbar .select .toDisplay .option.light:hover {
+    cursor: pointer;
+    background-color: #d9d9d9;
+}
+
+
+.navbar .select .toDisplay .option.dark {
+    background-color: #333;
+    color: white;
+}
+.navbar .select .toDisplay .option.light {
+    background-color: white;
+    color: #9147c9;
+}
+.navbar .select .toDisplayBig {
+    border: 1px solid #9147c9;
+}
+
+.navbar .select .toDisplayBig.light {    
+    color: #bb47c9;
+}
+.navbar .select .toDisplayBig a.light {
+    color: #9147c9;
+}
+
+

Playground/css/index_ts.css

@@ -1,625 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
-@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
-html,
-body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    font-family: sans-serif;
-}
-#waitDiv {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: black;
-    opacity: 0.8;
-    top:0px;
-    left:0px;
-    z-index: 10;
-    flex-direction: column;
-}
-
-#waitLogo {
-    -webkit-animation: spin1 2s infinite ease-in-out;
-    -moz-animation: spin1 2s infinite ease-in-out;
-    -o-animation: spin1 2s infinite ease-in-out;
-    -ms-animation: spin1 2s infinite ease-in-out;
-    animation: spin1 2s infinite ease-in-out;
-    -webkit-transform-origin: 50% 50%;
-    -moz-transform-origin: 50% 50%;
-    -o-transform-origin: 50% 50%;
-    transform-origin: 50% 50%;    
-}
-
-@-webkit-keyframes spin1 {
-0% { -webkit-transform: rotate(0deg);}
-100% { -webkit-transform: rotate(360deg);}
-}
-@-moz-keyframes spin1 {
-0% { -moz-transform: rotate(0deg);}
-100% { -moz-transform: rotate(360deg);}
-}
-@-o-keyframes spin1 {
-0% { -o-transform: rotate(0deg);}
-100% { -o-transform: rotate(360deg);}
-}
-@-ms-keyframes spin1 {
-0% { -ms-transform: rotate(0deg);}
-100% { -ms-transform: rotate(360deg);}
-}
-@keyframes spin1 {
-0% { transform: rotate(0deg);}
-100% { transform: rotate(360deg);}
-} 
-
-#waitTitle {
-    text-align: center;
-    font-size: 38px;
-    color: rgb(208, 23, 211);
-}
-.wrapper {
-    height: calc(100% - 40px - 30px); /* nvabar top and bottom*/
-    width: calc(100%);
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-direction: row;
-    flex-direction: row;
-}
-.wrapper .gutter {
-    background-color: #f7f7f7;
-    background-repeat: no-repeat;
-    background-position: 50%;
-}
-.wrapper .gutter.light {
-    background-color: #f7f7f7;
-}
-.wrapper .gutter.dark {
-    background-color: #333;
-}
-
-.wrapper .gutter:hover {
-    cursor: ew-resize;
-}
-.wrapper .gutter.gutter-vertical {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
-}
-.wrapper .gutter.gutter-horizontal {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
-}
-
-.pbt-fade {
-    opacity:0.5
-}
-
-.pbt-darken {
-    opacity:1
-}
-
-.pbt-back-highlight {
-    background-color:#CDC8F9;
-}
-
-.pbt-margin-decor-on {
-    background-color: #364249; 
-    width:5px;
-} 
-
-.pbt-back-highlight-dark {
-    background-color:#364249; 
-}
-
-.pbt-margin-decor-on-dark {
-    background-color: #CDC8F9;
-    width:5px;
-}      
-
-#exampleList {
-    padding-top: 5px;
-
-    display: none;
-    position: absolute;
-    top: 40px;
-    right: 0;
-    width: 400px;
-    height: calc(100% - 75px);
-    overflow-y: auto;
-
-    border-right: 1px solid #efefef;
-}
-#exampleList #exampleBanner {
-    background-image: url("../css/pattern_ban_1.png");
-    background-repeat: repeat;
-    text-align: center;
-    padding: 10px 0;
-    margin-left: 2px;
-}
-#exampleList #exampleBanner h1 {
-    text-align: center;
-    font-weight: 700;
-    color: #ae00ef;
-    font-size: 2em;
-    margin: .67em 0;
-}
-#exampleList .horizontalSeparator {
-    width: 80%;
-    height: 0;
-    display: block;
-    border-top: 1px solid #ae00ef;
-    margin: 0 auto 20px auto;
-}
-#exampleList #filterBar {
-    width: 80%;
-    margin-left: 10%;
-}
-#exampleList #filterBarClear {
-    display: none;
-    height: 10px;
-    margin-left: -19px;
-    cursor: pointer;
-}
-#exampleList #noResultsContainer p {
-    width: 100%;
-    text-align: center;
-    font-weight: 300;
-}
-#exampleList .categoryContainer p {
-    margin-left: 5px;
-    font-size: 20px;
-    font-weight: 200;
-    word-wrap: break-word;
-}
-#exampleList .categoryContainer .itemLine {
-    cursor: pointer;
-    background-color: #ebebeb;
-    height: 120px;
-    overflow: hidden;
-    clear: both;
-    margin: 5px;
-    margin-bottom: 10px;
-}
-#exampleList .categoryContainer .itemLine img {
-    display: inline-block;
-    max-height: 100%;
-    max-width: 120px;
-    border: 0;
-}
-#exampleList .categoryContainer .itemLine .itemContent {
-    display: inline-block;
-    width: calc(100% - 125px);
-    height: 100%;
-    vertical-align: top;
-    padding: 5px;
-    box-sizing: border-box;
-}
-#exampleList .categoryContainer .itemLine .itemContent .itemContentLink {
-    height: 100%;
-}
-#exampleList .categoryContainer .itemLine .itemContent .itemContentLink h3 {
-    margin: 0;
-    font-size: 18px;
-    margin-bottom: 5px;
-    text-decoration: none;
-}
-#exampleList .categoryContainer .itemLine .itemContent .itemContentLink p {
-    margin: 0;
-    font-size: 15px;
-    margin-bottom: 3px;
-}
-#exampleList .categoryContainer .itemLine .itemContent .itemLineDocLink {
-    position: relative;
-    bottom: 20px;
-    font-size: 15px;
-    text-decoration: underline;
-    color: #ae00ef;
-}
-#exampleList .categoryContainer .itemLine .itemContent .itemLinePGLink {
-    display: none;
-    position: relative;
-    float: right;
-    bottom: 20px;
-    text-align: right;
-    font-size: 15px;
-    text-decoration: underline;
-    color: #ae00ef;
-}
-
-.wrapper #jsEditor {
-    padding-top:5px;
-    height: calc(100% - 10px);
-}
-
-.wrapper #jsEditor.light {
-    background-color: white;
-}
-.wrapper #jsEditor.dark {
-    background-color: #1e1e1e;
-}
-.wrapper #canvasZone {
-    height: 100%;
-}
-#renderCanvas {
-    width: 100%;
-    height: 100%;
-    touch-action: none;
-}
-#fpsLabel {
-    position: absolute;
-    right: 10px;
-    top: 50px;
-    cursor: default;
-    z-index:10;
-    background-color: #9147c9;
-    color:white;
-    padding:5px;
-    border-radius: 3px;
-    font-family: 'Montserrat';
-    pointer-events: none;
-    user-select: none;
-}
-.navbar {
-    height: 40px;
-    width: 100%;
-    font-family: "Montserrat";
-    font-weight: 400;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    position: relative;
-    z-index:5;
-    line-height: 40px;
-}
-.navbar.dark {
-    background-color: #333;
-    box-shadow: 0 3px 10px #000;
-}
-.navbar.light {
-    background-color: #efefef;
-    box-shadow: 0 3px 10px #999;
-}
-.navbar .title {
-    height: 40px;
-    padding-left: 10px;
-    color: #bb47c9;
-    display: inline-block;
-}
-.navbar .version {
-    height: 40px;
-    display: inline-block;
-    color: #9147c9;
-    margin-right: 20px;
-}
-.navbar .category {
-    height: 40px;
-    margin: 0 15px 0 15px;
-    display: inline-block;
-}
-.navbar .category.right {
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-.button {
-    display: inline-block;
-    height: 25px;
-    line-height: 25px;
-    color: white;
-    background-color: #9147c9;
-    margin: 0 2px 0 2px;
-    padding: 0 10px 0 10px;
-    font-size: 0.85em;
-    border-radius: 3px;
-}
-
-.button i {
-    margin-left: 10px;
-}
-.button:hover {
-    cursor: pointer;
-    background-color: #bb47c9;
-}
-.navbar .button.run {
-    height: 30px;
-    line-height: 30px;
-    background-color: #bb47c9;
-    font-size: 1.0em;
-}
-.navbar .select {
-    position: relative;
-}
-
-.navbar .select .subSelect {
-    position: relative; 
-}
-.navbar .select:after {
-    font-family: 'FontAwesome', sans-serif;
-    content: "\00a0 \00a0 \00a0 \f078";
-}
-.navbar .select .toDisplay {
-    border: 1px solid #9147c9;
-    position: absolute;
-    z-index: 10;
-    left: 0;
-    top: 25px;
-    min-width: 100%;
-    width: 150px;
-    display: none;
-}
-
-.navbar .select .subSelect .toDisplaySub {
-    border: 1px solid #9147c9;
-    position: absolute;
-    z-index: 10;
-    left: 100%;
-    top: 0;
-    min-width: 100%;
-    display: none;
-}
-
-.navbar .select .toDisplay .option {
-    font-size: 0.9em;
-    height: 35px;
-    line-height: 35px;
-    padding: 0px 5px 0px 5px;
-    text-align: center;
-    border-bottom : 1px solid rgba(0,0,0,0.1);
-}
-
-.navbar .select .toDisplay .option.light:hover {
-    cursor: pointer;
-    background-color: #d9d9d9;
-}
-
-
-.navbar .select .toDisplay .option.dark {
-    background-color: #333;
-    color: white;
-}
-.navbar .select .toDisplay .option.light {
-    background-color: white;
-    color: #9147c9;
-}
-.navbar .select .toDisplay .option.dark:hover {
-    cursor: pointer;
-    background-color: #555;
-}
-
-.navbar .select .toDisplayBig {
-    border: 1px solid #9147c9;
-    border-radius: 5px;
-    position: absolute;
-    z-index: 10;
-    top: 32px;
-    width:550px;
-    max-height:390px;
-    overflow-y: auto;
-    right:0;
-    position:absolute;
-    font-size:0.8em;
-    display: none;
-    
-}
-
-.navbar .select .toDisplayBig.light {
-    background-color: white;    
-    color: #bb47c9;
-}
-
-.navbar .select .toDisplayBig.dark {
-    background-color: #333;    
-    color:white;
-}
-
-.navbar .select .toDisplayBig ul {
-    column-count: 3;        
-    padding:0;
-    margin:0;
-    list-style: none;
-}
-
-.navbar .select .toDisplayBig ul li {
-    padding:0 5px 0 5px;
-}
-
-.navbar .select .toDisplayBig ul li:hover {
-    cursor: pointer;
-}
-.navbar .select .toDisplayBig ul li.light:hover {
-    background-color: #d9d9d9;
-}
-.navbar .select .toDisplayBig ul li.dark:hover {
-    background-color: #555;
-}
-
-
-.navbar .select .toDisplayBig a {
-    text-decoration: none;
-}
-
-.navbar .select .toDisplayBig a.dark {
-    color: white;
-}
-
-.navbar .select .toDisplayBig a.light {
-    color: #9147c9;
-}
-
-
-
-.navbar .check:after {
-    font-family: 'FontAwesome', sans-serif;
-    content: "\00a0 \00a0 \00a0 \f14a";
-}
-.navbar .check.uncheck {
-    background-color: #8290aa;
-}
-.navbar .check.uncheck:after {
-    font-family: 'FontAwesome', sans-serif;
-    content: "\00a0 \00a0 \00a0 \f096";
-}
-#errorZone {
-    display:none;
-    position: absolute;
-    width: 50%;
-    left: 25%;
-    bottom: 40px;
-    background-color: #C73228;
-    padding:20px;
-    border-radius: 5px;
-    color:white;
-    font-family: 'Inconsolata';
-}
-#errorZone button {
-    position:absolute;
-    top : 3px;
-    right: 10px;
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    -webkit-appearance: none;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    opacity: .4;
-    font-size: 1.8em;
-}
-
-/* Navbar bottom */
-
-.navbarBottom {
-    height:30px;
-    width:100%;
-    line-height:30px;
-    position:relative;
-    font-family: 'Montserrat';
-}
-.navbarBottom.dark {
-    background-color: #333;
-}
-.navbarBottom.light {
-    background-color: #efefef;
-}
-
-.navbarBottom #statusBar {
-    line-height:30px;
-    color: #E74C3C;
-    font-family: 'Inconsolata';
-    padding-left:20px;
-}
-
-
-.navbarBottom .links {
-    position:absolute;
-    right : 0;
-    top:-1px;
-    height:30px;
-    padding-right:20px;
-}
-.navbarBottom .links .link{
-    height:30px;
-    display:inline-block;
-    color:#999;
-    padding: 0 10px 0 10px;
-    margin : 0 5px 0 5px;
-    font-size:0.8em;
-}
-.navbarBottom .links .link.light:hover{
-    color:#999;
-    background-color:#333;
-}
-.navbarBottom .links .link.dark:hover{
-    color:#333;
-    background-color:#eee;
-}
-.navbarBottom .links .link a{
-    text-decoration: none;
-    color:#999;
-    display: inline-block;
-}
-
-/* Save form & co */
-.save-layer {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(120, 120, 120, .5);
-    text-align: center;
-}
-.save-layer .save-form {
-    position: absolute;
-    top: 150px;
-    left: calc(50% - 205px);
-    width: 410px;
-    height: 370px;
-    padding-top: 15px;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    background-color: rgba(27, 27, 27, 0.75);
-    border-color: #252525;
-    color: white;
-    font-family: "Montserrat";
-    font-size: 14px;
-}
-.save-layer .save-form .separator {
-    width: 350px;
-    border-bottom: 1px solid #999;
-    margin: auto;
-    margin-bottom: 10px;
-}
-.save-layer .save-form input,
-.save-layer .save-form textarea {
-    display:block;
-    width: 350px;
-    margin:auto;
-    margin-bottom: 20px;
-    font-family: "Montserrat";
-    padding:5px;
-}
-
-/*Media queries*/
-
-@media (min-width: 1475px) {
-    .navBar1600 { display: block; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: none; }
-    .navBar750 { display: none; }
-
-    .navbar .select .toDisplayBig ul {
-        column-count: 3;
-    }
-}
-@media (max-width: 1475px) {
-    .navBar1600 { display: none; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: block; }
-    .navBar750 { display: none; }
-
-    .navbar .select .toDisplayBig ul {
-        column-count: 2;
-    }
-}
-@media (max-width: 750px) {
-    .navBar1600 { display: none; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: none; }
-    .navBar750 { display: block; }
-    .removeOnPhone {
-        display : none !important;
-    }
-    .navbar .select .toDisplayBig {
-        width:350px;
-    }    
-    .navbar .select .toDisplayBig ul {
-        column-count: 1;
-    }
-}
-

Playground/ts.html

@@ -55,7 +55,8 @@
         <script src="https://www.babylontoolkit.com/playground/scripts/babylon.navmesh.js"></script>
         <script src="https://www.babylontoolkit.com/playground/scripts/babylon.manager.js"></script>
                                
-        <link href="css/index_ts.css" rel="stylesheet" />
+        <link href="css/index.css" rel="stylesheet" />
+        <link href="css/color_ts.css" rel="stylesheet" />
     </head>
 
     <body>