Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
Avatar for KuCalc : devops.
 Download
50640 views
Tweet
Share
Share
1
/* The MIT License */

2
.dropzone,

3
.dropzone *,

4
.dropzone-previews,

5
.dropzone-previews * {

6
  -webkit-box-sizing: border-box;

7
  -moz-box-sizing: border-box;

8
  box-sizing: border-box;

9
}

10
.dropzone {

11
  position: relative;

12
  border: 1px solid rgba(0,0,0,0.08);

13
  background: rgba(0,0,0,0.02);

14
  padding: 1em;

15
}

16
.dropzone.dz-clickable {

17
  cursor: pointer;

18
}

19
.dropzone.dz-clickable .dz-message,

20
.dropzone.dz-clickable .dz-message span {

21
  cursor: pointer;

22
}

23
.dropzone.dz-clickable * {

24
  cursor: default;

25
}

26
.dropzone .dz-message {

27
  opacity: 1;

28
  -ms-filter: none;

29
  filter: none;

30
}

31
.dropzone.dz-drag-hover {

32
  border-color: rgba(0,0,0,0.15);

33
  background: rgba(0,0,0,0.04);

34
}

35
.dropzone.dz-started .dz-message {

36
  display: none;

37
}

38
.dropzone .dz-preview,

39
.dropzone-previews .dz-preview {

40
  background: rgba(255,255,255,0.8);

41
  position: relative;

42
  display: inline-block;

43
  margin: 17px;

44
  vertical-align: top;

45
  border: 1px solid #acacac;

46
  padding: 6px 6px 6px 6px;

47
}

48
.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],

49
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {

50
  display: none;

51
}

52
.dropzone .dz-preview .dz-details,

53
.dropzone-previews .dz-preview .dz-details {

54
  width: 100px;

55
  height: 100px;

56
  position: relative;

57
  background: #ebebeb;

58
  padding: 5px;

59
  margin-bottom: 22px;

60
}

61
.dropzone .dz-preview .dz-details .dz-filename,

62
.dropzone-previews .dz-preview .dz-details .dz-filename {

63
  overflow: hidden;

64
  height: 100%;

65
}

66
.dropzone .dz-preview .dz-details img,

67
.dropzone-previews .dz-preview .dz-details img {

68
  position: absolute;

69
  top: 0;

70
  left: 0;

71
  width: 100px;

72
  height: 100px;

73
}

74
.dropzone .dz-preview .dz-details .dz-size,

75
.dropzone-previews .dz-preview .dz-details .dz-size {

76
  position: absolute;

77
  bottom: -28px;

78
  left: 3px;

79
  height: 28px;

80
  line-height: 28px;

81
}

82
.dropzone .dz-preview.dz-error .dz-error-mark,

83
.dropzone-previews .dz-preview.dz-error .dz-error-mark {

84
  display: block;

85
}

86
.dropzone .dz-preview.dz-success .dz-success-mark,

87
.dropzone-previews .dz-preview.dz-success .dz-success-mark {

88
  display: block;

89
}

90
.dropzone .dz-preview:hover .dz-details img,

91
.dropzone-previews .dz-preview:hover .dz-details img {

92
  display: none;

93
}

94
.dropzone .dz-preview .dz-success-mark,

95
.dropzone-previews .dz-preview .dz-success-mark,

96
.dropzone .dz-preview .dz-error-mark,

97
.dropzone-previews .dz-preview .dz-error-mark {

98
  display: none;

99
  position: absolute;

100
  width: 40px;

101
  height: 40px;

102
  font-size: 30px;

103
  text-align: center;

104
  right: -10px;

105
  top: -10px;

106
}

107
.dropzone .dz-preview .dz-success-mark,

108
.dropzone-previews .dz-preview .dz-success-mark {

109
  color: #8cc657;

110
}

111
.dropzone .dz-preview .dz-error-mark,

112
.dropzone-previews .dz-preview .dz-error-mark {

113
  color: #ee162d;

114
}

115
.dropzone .dz-preview .dz-progress,

116
.dropzone-previews .dz-preview .dz-progress {

117
  position: absolute;

118
  top: 100px;

119
  left: 6px;

120
  right: 6px;

121
  height: 6px;

122
  background: #d7d7d7;

123
  display: none;

124
}

125
.dropzone .dz-preview .dz-progress .dz-upload,

126
.dropzone-previews .dz-preview .dz-progress .dz-upload {

127
  position: absolute;

128
  top: 0;

129
  bottom: 0;

130
  left: 0;

131
  width: 0%;

132
  background-color: #8cc657;

133
}

134
.dropzone .dz-preview.dz-processing .dz-progress,

135
.dropzone-previews .dz-preview.dz-processing .dz-progress {

136
  display: block;

137
}

138
.dropzone .dz-preview .dz-error-message,

139
.dropzone-previews .dz-preview .dz-error-message {

140
  display: none;

141
  position: absolute;

142
  top: -5px;

143
  left: -20px;

144
  background: rgba(245,245,245,0.8);

145
  padding: 8px 10px;

146
  color: #800;

147
  min-width: 140px;

148
  max-width: 500px;

149
  z-index: 500;

150
}

151
.dropzone .dz-preview:hover.dz-error .dz-error-message,

152
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {

153
  display: block;

154
}

155


156