CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/assets/dropzone/css/basic.css
Views: 687
1
/*

2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
.dropzone,

7
.dropzone *,

8
.dropzone-previews,

9
.dropzone-previews * {

10
  -webkit-box-sizing: border-box;

11
  -moz-box-sizing: border-box;

12
  box-sizing: border-box;

13
}

14
.dropzone {

15
  position: relative;

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

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

18
  padding: 1em;

19
}

20
.dropzone.dz-clickable {

21
  cursor: pointer;

22
}

23
.dropzone.dz-clickable .dz-message,

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

25
  cursor: pointer;

26
}

27
.dropzone.dz-clickable * {

28
  cursor: default;

29
}

30
.dropzone .dz-message {

31
  opacity: 1;

32
  -ms-filter: none;

33
  filter: none;

34
}

35
.dropzone.dz-drag-hover {

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

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

38
}

39
.dropzone.dz-started .dz-message {

40
  display: none;

41
}

42
.dropzone .dz-preview,

43
.dropzone-previews .dz-preview {

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

45
  position: relative;

46
  display: inline-block;

47
  margin: 17px;

48
  vertical-align: top;

49
  border: 1px solid #acacac;

50
  padding: 6px 6px 6px 6px;

51
}

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

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

54
  display: none;

55
}

56
.dropzone .dz-preview .dz-details,

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

58
  width: 100px;

59
  height: 100px;

60
  position: relative;

61
  background: #ebebeb;

62
  padding: 5px;

63
  margin-bottom: 22px;

64
}

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

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

67
  overflow: hidden;

68
  height: 100%;

69
}

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

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

72
  position: absolute;

73
  top: 0;

74
  left: 0;

75
  width: 100px;

76
  height: 100px;

77
}

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

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

80
  position: absolute;

81
  bottom: -28px;

82
  left: 3px;

83
  height: 28px;

84
  line-height: 28px;

85
}

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

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

88
  display: block;

89
}

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

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

92
  display: block;

93
}

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

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

96
  display: none;

97
}

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

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

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

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

102
  display: none;

103
  position: absolute;

104
  width: 40px;

105
  height: 40px;

106
  font-size: 30px;

107
  text-align: center;

108
  right: -10px;

109
  top: -10px;

110
}

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

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

113
  color: #8cc657;

114
}

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

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

117
  color: #ee162d;

118
}

119
.dropzone .dz-preview .dz-progress,

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

121
  position: absolute;

122
  top: 100px;

123
  left: 6px;

124
  right: 6px;

125
  height: 6px;

126
  background: #d7d7d7;

127
  display: none;

128
}

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

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

131
  position: absolute;

132
  top: 0;

133
  bottom: 0;

134
  left: 0;

135
  width: 0%;

136
  background-color: #8cc657;

137
}

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

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

140
  display: block;

141
}

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

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

144
  display: none;

145
  position: absolute;

146
  top: -5px;

147
  left: -20px;

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

149
  padding: 8px 10px;

150
  color: #800;

151
  min-width: 140px;

152
  max-width: 500px;

153
  z-index: 500;

154
}

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

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

157
  display: block;

158
}

159


160