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

2
JavaScript Snake

3
By Patrick Gillespie

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

5
*/

6
@import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");

7


8
body {

9
  margin: 0px;

10
  padding: 0px;

11
  background-color: teal;

12
}

13


14
.snake-toolbar {

15
  font-family: Electrolize;

16
  color: white;

17
}

18


19
#game-area {

20
  margin: 10px;

21
  padding: 0px;

22
}

23


24
#game-area:focus {

25
  outline: none;

26
}

27


28
#mode-wrapper {

29
  font-family: Electrolize;

30
  font-size: 14px;

31
  color: whitesmoke;

32
}

33


34
a.snake-link,

35
a.snake-link:link,

36
a.snake-link:visited {

37
  color: white;

38
}

39


40
a.snake-link:hover {

41
  color: white;

42
}

43


44
.snake-pause-screen {

45
  font-family: Electrolize;

46
  font-size: 16px;

47
  position: absolute;

48
  width: 300px;

49
  height: 80px;

50
  text-align: center;

51
  top: 50%;

52
  left: 50%;

53
  margin-top: -40px;

54
  margin-left: -150px;

55
  display: none;

56
  background-color: #3e2e44;

57
  color: whitesmoke;

58
}

59


60
.snake-panel-component {

61
  position: absolute;

62
  font-family: Electrolize;

63
  font-size: 16px;

64
  color: #938996;

65
  text-align: center;

66
  background-color: #3e2e44;

67
  padding: 8px;

68
  margin: 0px;

69
}

70


71
.snake-snakebody-block {

72
  margin: 0px;

73
  padding: 0px;

74
  background-color: orange;

75
  position: absolute;

76
  border: 0px solid black;

77
  background-repeat: no-repeat;

78
}

79


80
.snake-snakebody-alive {

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

82
}

83
.snake-snakebody-dead {

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

85
}

86


87
.snake-food-block {

88
  margin: 0px;

89
  padding: 0px;

90
  background-color: red;

91
  border: 2px solid black;

92
  position: absolute;

93
}

94


95
.snake-playing-field {

96
  margin: 0px;

97
  padding: 0px;

98
  position: absolute;

99
  background-color: rgb(0, 180, 180);

100
  border: 3px solid black;

101
}

102


103
.snake-game-container {

104
  margin: 0px;

105
  padding: 0px;

106
  border-width: 0px;

107
  border-style: none;

108
  zoom: 1;

109
  background-color: #3e2e44;

110
  position: relative;

111
}

112


113
.snake-welcome-dialog {

114
  padding: 8px;

115
  margin: 0px;

116
  background-color: black;

117
  color: whitesmoke;

118
  font-family: Electrolize;

119
  font-size: 14px;

120
  position: absolute;

121
  top: 50%;

122
  left: 50%;

123
  width: 300px;

124
  /*height: 150px;*/

125
  margin-top: -100px;

126
  margin-left: -158px;

127
  text-align: center;

128
  display: block;

129
}

130


131
.snake-try-again-dialog,

132
.snake-win-dialog {

133
  padding: 8px;

134
  margin: 0px;

135
  background-color: black;

136
  color: whitesmoke;

137
  font-family: Electrolize;

138
  font-size: 16px;

139
  position: absolute;

140
  top: 50%;

141
  left: 50%;

142
  width: 300px;

143
  height: 100px;

144
  margin-top: -75px;

145
  margin-left: -158px;

146
  text-align: center;

147
  display: none;

148
}

149


150