Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
patorjk
GitHub Repository: patorjk/JavaScript-Snake
 Path: blob/main/src/css/green-snake.css
163 views
1
/*

2
JavaScript Snake

3
By Patrick Gillespie

4
http://patorjk.com/games/snake

5
*/

6
body {

7
  margin: 0px;

8
  padding: 0px;

9
  background-color: darkgreen;

10
}

11


12
.snake-toolbar {

13
  background-color: rgba(255, 255, 255, 0.4);

14
  border-radius: 10px;

15
}

16


17
#game-area {

18
  margin: 10px;

19
  padding: 0px;

20
  background-color: lightgreen;

21
}

22


23
#mode-wrapper {

24
  color: #ffffff;

25
  font-family: Verdana, arial, helvetica, sans-serif;

26
  font-size: 14px;

27
}

28


29
#game-area:focus {

30
  outline: none;

31
}

32


33
a.snake-link,

34
a.snake-link:link,

35
a.snake-link:visited {

36
  color: black;

37
}

38


39
a.snake-link:hover {

40
  color: #ffff54;

41
}

42


43
.snake-pause-screen {

44
  font-family: Verdana, arial, helvetica, sans-serif;

45
  font-size: 14px;

46
  position: absolute;

47
  width: 300px;

48
  height: 80px;

49
  text-align: center;

50
  top: 50%;

51
  left: 50%;

52
  margin-top: -40px;

53
  margin-left: -150px;

54
  display: none;

55
  background-color: black;

56
  color: white;

57
}

58


59
.snake-panel-component {

60
  position: absolute;

61
  font-family: Verdana, arial, helvetica, sans-serif;

62
  font-size: 14px;

63
  color: black;

64
  text-align: center;

65
  background-color: white;

66
  padding: 8px;

67
  margin: 0px;

68
}

69


70
.snake-snakebody-block {

71
  margin: 0px;

72
  padding: 0px;

73
  background-color: #ff0000;

74
  position: absolute;

75
  border: 0px solid #000080;

76
  background-repeat: no-repeat;

77
}

78


79
.snake-snakebody-alive {

80
  background-image: url("src/css/images/snakeblock.png");

81
}

82
.snake-snakebody-dead {

83
  background-image: url("src/css/images/deadblock.png");

84
}

85


86
.snake-food-block {

87
  margin: 0px;

88
  padding: 0px;

89
  background-color: black;

90
  border: 0px solid #000080;

91
  position: absolute;

92
}

93


94
.snake-playing-field {

95
  margin: 0px;

96
  padding: 0px;

97
  position: absolute;

98
  background-color: white;

99
  border: 0px solid #0000a8;

100
}

101


102
.snake-game-container {

103
  margin: 0px;

104
  padding: 0px;

105
  border-width: 0px;

106
  border-style: none;

107
  zoom: 1;

108
  background-color: #fc5454;

109
  position: relative;

110
}

111


112
.snake-welcome-dialog {

113
  padding: 8px;

114
  margin: 0px;

115
  background-color: #000000;

116
  color: #ffffff;

117
  font-family: Verdana, arial, helvetica, sans-serif;

118
  font-size: 14px;

119
  position: absolute;

120
  top: 50%;

121
  left: 50%;

122
  width: 300px;

123
  /*height: 150px;*/

124
  margin-top: -100px;

125
  margin-left: -158px;

126
  text-align: center;

127
  display: block;

128
}

129


130
.snake-try-again-dialog,

131
.snake-win-dialog {

132
  padding: 8px;

133
  margin: 0px;

134
  background-color: #000000;

135
  color: #ffffff;

136
  font-family: Verdana, arial, helvetica, sans-serif;

137
  font-size: 14px;

138
  position: absolute;

139
  top: 50%;

140
  left: 50%;

141
  width: 300px;

142
  height: 100px;

143
  margin-top: -75px;

144
  margin-left: -158px;

145
  text-align: center;

146
  display: none;

147
}

148


149