Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
Ryan778
GitHub Repository: Ryan778/Ryan778.github.io
 Path: blob/master/final-grade-calculator/styles.css
574 views
1
html{

2
  font-family: 'Open Sans', sans-serif;

3
  font-size: 16px;

4
  margin: 0;

5
  cursor: default;

6
}

7
body{

8
  margin: 0;

9
}

10
a{

11
  cursor: pointer;

12
  text-decoration: none;

13
}

14
a:hover{

15
  text-decoration: underline;

16
}

17
button{

18
  padding: 2px 3px;

19
  font-size: 14px;

20
  vertical-align: text-bottom;

21
  transition: all 0.2s;

22
}

23
button:not([disabled]){

24
  cursor: pointer;

25
}

26
input, select{

27
  border-radius: 0; /*bc iOS doesn't like me*/

28
  padding: 1px 2px;

29
  font-size: 14px;

30
  vertical-align: text-bottom;

31
  transition: all 0.2s;

32
}

33
option{

34
  line-height: 0;

35
  min-height: 1em;

36
}

37
.p_q{ /*Line up the input fields to look nicer*/

38
  display: inline-block;

39
  text-align: right;

40
  width: 240px;

41
}

42
.blk{

43
  display: block;

44
}

45
.halert{

46
  padding: 10px;

47
  margin-bottom: 4px;

48
}

49
.halert p{

50
  margin: 0;

51
}

52
.btn-close{

53
  float: right;

54
  cursor: pointer;

55
  color: #888;  

56
}

57
#i-toggleTheme{

58
  float: right; 

59
  color: #888;

60
  transition: color 0.2s;

61
}

62
#i-toggleTheme:hover{

63
  cursor: pointer;

64
}

65
#main-outer{

66
  padding: 20px 10px 10px;

67
}

68
#main{

69
  padding: 15px 20px;

70
  max-width: 800px;

71
  margin: auto;

72
}

73
#main h1{

74
  margin: 0;

75
  margin-bottom: 10px;

76
}

77
#header span{

78
  text-align: right;

79
}

80
#calc{

81
  padding: 5px 10px;

82
}

83
#calcRes, #calcErr{

84
  margin: 10px 0px;

85
  padding: 4px 8px;

86
  border-width: 1px;

87
  border-style: solid;

88
}

89
#footer{

90
  margin-top: 15px;

91
  font-size: 14px;

92
  text-align: center;

93
}

94
.ns, h1, #footer, #calc{

95
  -moz-user-select: none;

96
  -webkit-user-select: none;

97
  user-select: none;

98
}

99
.material-icons{

100
  font-size: 24px;

101
  vertical-align: bottom;

102
}

103
.spin{

104
  animation: 2000ms anm_spin infinite linear;

105
}

106
@keyframes anm_spin{

107
  0% {transform: rotate(0)}

108
  100% {transform: rotate(360deg)}

109
}

110


111
/*Stuff part of calc box*/

112
#calc p{

113
  margin: 0;

114
  margin-bottom: 4px;

115
  line-height: 1.5;

116
}

117
#calc input{

118
  width: 80px;

119
}

120
#calc-loadErr{

121
  display: none;

122
}

123
.res_return{

124
  display: none;

125
}

126


127
.alertify .alert>*, .alertify .dialog>*{

128
  width: 600px; /*400px is way too small*/

129
}

130


131
/*Responsive design stuff*/

132
@media only screen and (max-width: 720px) {

133
  #main-outer{

134
    padding: 0;

135
  }

136
  #main{

137
    padding: 10px;

138
  }

139
}

140
@media only screen and (max-width: 600px) {

141
  .p_q{

142
    display: inline;

143
    text-align: left;

144
  }

145
  .rln{ /*Responsive Line*/

146
    display: block;

147
  }

148
  input, select{

149
    font-size: 16px;

150
  }

151
  #calc input{

152
    width: 90px;

153
  }

154
  #calc p{

155
    margin-bottom: 15px;

156
  }

157
  .res_return{

158
    display: inline-block;

159
  }

160
}

161


162