Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
loeasy68
GitHub Repository: loeasy68/loeasy68.github.io
 Path: blob/main/website/Drawing-app/style.css
2940 views
1
body{

2
    /* overflow: hidden; */

3
    overscroll-behavior-y: none; /* Disabling Pull Down To Refresh*/

4
    background-color: #e6cb00;

5
    color: black;

6
}

7


8
#draw{

9
  font-size: 34px;

10
  font-family: 'Raleway', sans-serif;

11
}

12


13
#sketchcontainer{

14
    width: 100%;

15
    margin-right: auto;

16
    touch-action: none;

17
}

18


19
.line1{

20
  /*

21
  display: flex;

22
  align-items: center;

23
  justify-content: center;

24
  */

25
  font-size: 38px;

26
  font-family: 'Raleway', sans-serif;;

27
  margin-bottom: 10px;

28
}

29


30
.line2{

31
  /*

32
  display: flex;

33
  align-items: center;

34
  justify-content: center;

35
  */

36
  font-size: 38px;

37
  font-family: 'Raleway', sans-serif;;

38
}

39


40
.line3{

41
  display: flex;

42
  align-items: center;

43
  justify-content: center;

44
  padding: 10px;

45
}

46


47
.sliderClass{

48
  -webkit-appearance : none;

49
  height: 13px;

50
  width: 50%;

51
  cursor: pointer;

52
  border-radius: 20px;

53
  outline: none;

54
  background: #d3d3d3;

55
  margin-left: 20px;

56
}

57


58
.sliderClass::-webkit-slider-thumb {

59
    -webkit-appearance: none;

60
    appearance: none;

61
    width: 25px;

62
    height: 25px;

63
    border-radius: 50%; 

64
    background: #4CAF50;

65
    cursor: pointer;

66
}

67
  

68
.sliderClass::-moz-range-thumb {

69
    width: 25px;

70
    height: 25px;

71
    border-radius: 50%;

72
    background: #4CAF50;

73
    cursor: pointer;

74
}

75


76
.undo{

77
  -webkit-appearance:none;

78
  border-radius: 5px;

79
  background-color: #ff0000;

80
  color: #FFFFFF;

81
  font-size: 34px;

82
  font-family: 'Raleway', sans-serif;

83
  margin-left: 20px;

84
}

85


86
.clear{

87
  -webkit-appearance: none;

88
  margin-left: 20px;

89
  border-radius: 5px;

90
  background-color: #ff0000;

91
  color: #FFFFFF;

92
  font-size: 34px;

93
  font-family: 'Raleway', sans-serif;

94
}

95


96
/* Color Selector Button Style : */

97
.ColorButtons{

98
  -webkit-appearance: none;

99
  margin-right: 20px;

100
  width: 50px;

101
  height: 40px;

102
  border-radius: 15%;

103
  border-color: black;

104
  border-style: solid;

105
}

106


107
/* Eraser And Brush Setters Style */

108
.eraserSettingsClass{

109
  margin-left: 10px;

110
  margin-right: 10px;

111
  -webkit-appearance: none;

112
  appearance: none;

113
  border-radius: 5px;

114
  background-color: deeppink;

115
  color: white;

116
  font-size: 38px;

117
  font-family: 'Raleway', sans-serif;;

118
}

119


120
.brushSettingsClass{

121
  margin-right: 10px;

122
  -webkit-appearance: none;

123
  appearance: none;

124
  border-radius: 5px;

125
  background-color: deeppink;

126
  color: white;

127
  font-size: 38px;

128
  font-family: 'Raleway', sans-serif;;

129
}

130


131
/* Submission Button Style */

132
.submitButtonClass{

133
  border-radius: 3px;

134
  -webkit-appearance: none;

135
  appearance: none;

136
  font-size: 38px;

137
  font-family: 'Raleway', sans-serif;;

138
  background-color: rgb(38, 180, 44);

139
  color: white;

140
  margin-right: 10px;

141
  font-style: oblique;

142
}

143


144
/* View Submissions Button Style */

145
.viewSubmissionsButtonClass{

146
  border-radius: 3px;

147
  -webkit-appearance: none;

148
  appearance: none;

149
  font-size: 38px;

150
  font-family: 'Raleway', sans-serif;;

151
  background-color: rgb(38, 180, 44);

152
  color: white;

153
  font-style: oblique;

154
}

155


156