Prepare games webpage for game samples

3 files changed, 58 insertions, 23 deletions

diff --git a/css/examples_style.css b/css/examples_style.css
index 923bef48..ccf44d1a 100644
--- a/css/examples_style.css
+++ b/css/examples_style.css
@@ -3,13 +3,29 @@
 
 #filter_menu { width: 820px; height: 80px; margin-left: 18px; }
 
-.fcore{ border: 1px solid #898888; margin-left: 12px; }
-.fshapes{ border: 1px solid #e66666; margin-left: 12px; }
-.ftextures{ border: 1px solid #75a06d; margin-left: 12px; }
-.ftext{ border: 1px solid #52b296; margin-left: 12px; }
-.fmodels{ border: 1px solid #5d9cbd; margin-left: 12px; }
-.fshaders{ border: 1px solid #a864d2; margin-left: 12px; }
-.faudio{ border: 1px solid #d3b157; margin-left: 12px; }
+.legendButton { padding:5px 15px; float:left; margin-left:10px; margin-right:10px; margin-bottom: 20px; }
+#core { cursor:pointer; background-color:#e1e1e1; color:#5c5a5a; border:3px solid #898888; }
+#shapes { cursor:pointer; background-color:#f0d6d6; color:#c55757; border:3px solid #e66666; }
+#textures { cursor:pointer; background-color:#c8eabf; color:#60815a; border:3px solid #75a06d; }
+#text { cursor:pointer; background-color:#bef0dd; color:#377764; border:3px solid #52b296; }
+#models { cursor:pointer; background-color:#bedce8; color:#417794; border:3px solid #5d9cbd; }
+#shaders { cursor:pointer; background-color:#e2c3f5; color:#a864d2; border:3px solid #a864d2; }
+#audio { cursor:pointer; background-color:#ebddae; color:#8c7539; border:3px solid #d3b157; }
+
+.core:hover { background-color:#e1e1e1; color:#5c5a5a; border:4px solid #898888; }
+.shapes:hover { background-color:#f0d6d6; color:#c55757; border:4px solid #e66666; }
+.textures:hover { background-color:#c8eabf; color:#60815a; border:4px solid #75a06d; }
+.text:hover { background-color:#bef0dd; color:#377764; border:4px solid #52b296; }
+.models:hover { background-color:#bedce8; color:#417794; border:4px solid #5d9cbd; }
+.audio:hover { background-color:#ebddae; color:#8c7539; border:4px solid #d3b157; }
+
+.fcore { border: 1px solid #898888; margin-left: 12px; }
+.fshapes { border: 1px solid #e66666; margin-left: 12px; }
+.ftextures { border: 1px solid #75a06d; margin-left: 12px; }
+.ftext { border: 1px solid #52b296; margin-left: 12px; }
+.fmodels { border: 1px solid #5d9cbd; margin-left: 12px; }
+.fshaders { border: 1px solid #a864d2; margin-left: 12px; }
+.faudio { border: 1px solid #d3b157; margin-left: 12px; }
 
 .fcore p { color:#5c5a5a!important; }
 .fshapes p { color:#c55757!important; }
diff --git a/css/games_style.css b/css/games_style.css
new file mode 100644
index 00000000..8fb93c6d
--- /dev/null
+++ b/css/games_style.css
@@ -0,0 +1,35 @@
+#container .mix{ position: relative;  display: none; }
+#container .extext { top: 160px!important; width: 400px!important; }
+
+#filter_menu { width: 820px; height: 80px; margin-left: 18px; }
+
+.legendButton { padding:5px 15px; float:left; margin-left:10px; margin-right:10px; margin-bottom: 20px; }
+#sample { cursor:pointer; background-color:#e1e1e1; color:#5c5a5a; border:3px solid #898888; }
+#game { cursor:pointer; background-color:#f0d6d6; color:#c55757; border:3px solid #e66666; }
+#user { cursor:pointer; background-color:#bedce8; color:#417794; border:3px solid #5d9cbd; }
+
+.sample:hover { background-color:#e1e1e1; color:#5c5a5a; border:4px solid #898888; }
+.game:hover { background-color:#f0d6d6; color:#c55757; border:4px solid #e66666; }
+.user:hover { background-color:#bedce8; color:#417794; border:4px solid #5d9cbd; }
+
+.fsample { border: 1px solid #898888; margin-left: 12px; }
+.fgame { border: 1px solid #e66666; margin-left: 12px; }
+.fuser { border: 1px solid #5d9cbd; margin-left: 12px; }
+
+.fsample p { color:#5c5a5a!important; }
+.fgame p { color:#c55757!important; }
+.fuser p { color:#417794!important; }
+
+#container .fsample a img, #container .fsample a { border: none; overflow: hidden; float: left; background-color: #e1e1e1; opacity: 1; }
+#container .fsample a:hover { border: 10px solid #898888; }
+#container .fsample a:hover img { margin: -10px; opacity: 0.4; }
+
+#container .fgame a img, #container .fgame a { border: none; overflow: hidden; float: left; background-color: #f0d6d6; opacity: 1; }
+#container .fgame a:hover { border: 10px solid #e66666; }
+#container .fgame a:hover img { margin: -10px; opacity: 0.3; }
+
+#container .fuser a img, #container .fuser a { border: none; overflow: hidden; float: left; background-color: #bedce8; opacity: 1; }
+#container .fuser a:hover { border: 10px solid #5d9cbd; }
+#container .fuser a:hover img { margin: -10px; opacity: 0.3; }
+
+#container .extext { position:absolute; top:140px; width:320px; text-align: center; display: none; }
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 9f0b9f26..5eaef0b3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -84,15 +84,6 @@ p a:hover{text-decoration: none; color:gray;}
 #newVersion{background-color:#f0d6d6; color:#e55757; border:1px solid #f66666; margin-top: 15px; margin-left: -5px; width:100%; height:30px; position: relative; margin: auto auto; line-height:30px; text-align: center;}
 #raylib13{position:relative; background-color:#222222; color:#f5f5f5; width:100vw; left:calc(-52vw + 50%); padding:30px; text-align:center; margin: 10px;}
 
-.legendButton{padding:5px 15px; float:left; margin-left:10px; margin-right:10px; margin-bottom: 20px;}
-#core{cursor:pointer; background-color:#e1e1e1; color:#5c5a5a; border:3px solid #898888;}
-#shapes{cursor:pointer; background-color:#f0d6d6; color:#c55757; border:3px solid #e66666;}
-#textures{cursor:pointer; background-color:#c8eabf; color:#60815a; border:3px solid #75a06d;}
-#text{cursor:pointer; background-color:#bef0dd; color:#377764; border:3px solid #52b296;}
-#models{cursor:pointer; background-color:#bedce8; color:#417794; border:3px solid #5d9cbd;}
-#shaders{cursor:pointer; background-color:#e2c3f5; color:#a864d2; border:3px solid #a864d2;}
-#audio{cursor:pointer; background-color:#ebddae; color:#8c7539; border:3px solid #d3b157;}
-
 #basicgrid{width:580px; margin-left:60px; float:left; position:relative; text-align: center}
 #advgrid{width:560px; margin-left:70px; float:left; position:relative; text-align: center}
 .exampleBox{cursor:pointer; margin:15px 20px; width:54px; padding-right:2px; height:56px; border:4px solid black; display:inline-block; text-align: right; font-weight: bold; vertical-align: bottom;}
@@ -106,13 +97,6 @@ p a:hover{text-decoration: none; color:gray;}
 .boxintextex{margin-bottom: 3px; margin-right: -2px; line-height:10px; font-size:6pt; width:54px!important; height:53px!important; font-weight: normal!important;}
 .boxtodo{margin-bottom: 13px; margin-right: 7px;}
 
-.core:hover, .coreHovered{background-color:#e1e1e1; color:#5c5a5a; border:4px solid #898888;}
-.shapes:hover, .shapesHovered{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
-.textures:hover, .texturesHovered{background-color:#c8eabf; color:#60815a; border:4px solid #75a06d;}
-.text:hover, .textHovered{background-color:#bef0dd; color:#377764; border:4px solid #52b296;}
-.models:hover, .modelsHovered{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
-.audio:hover, .audioHovered{background-color:#ebddae; color:#8c7539; border:4px solid #d3b157;}
-
 .help{font-size:8px; margin-left: 25px;}
 #paypalbox{width:200px; height:50px; border:12px solid; border-color:#d0d0d0; background-color:#e4e4e4; margin:0 auto;}
 #paypalform input {margin-top: 12px; margin-left: 50px;}