BookStack Code Mirror - bookstack/blob - resources/assets/sass/

1 #page-show {

2 >.row .col-md-9 {

3 z-index: 2;

4 }

5 >.row .col-md-3 {

6 z-index: 1;

7 }

8 }

10 .page-editor {

11 display: flex;

12 flex-direction: column;

13 align-items: stretch;

14 .faded-small {

15 height: auto;

16 }

17 .edit-area {

18 flex: 1;

19 flex-direction: column;

20 }

21 }

23 .page-style.editor {

24 padding: 0 !important;

25 }

27 .page-content {

28 max-width: 840px;

29 overflow-wrap: break-word;

30 .align-left {

31 text-align: left;

32 }

33 img.align-left, table.align-left {

34 float: left !important;

35 margin: $-xs $-s $-xs 0;

36 }

37 .align-right {

38 float: right !important;

39 }

40 img.align-right, table.align-right {

41 text-align: right;

42 margin: $-xs 0 $-xs $-s;

43 }

44 .align-center {

45 text-align: center;

46 }

47 img {

48 max-width: 100%;

49 height:auto;

50 }

51 h1, h2, h3, h4, h5, h6, pre {

52 clear: left;

53 }

54 hr {

55 clear: both;

56 margin: $-m 0;

57 }

58 table {

59 word-break: break-all;

60 word-break: break-word;

61 hyphens: auto;

62 }

63 }

65 // Page content pointers

66 .pointer-container {

67 position: relative;

68 display: none;

69 left: 0;

70 z-index: 10;

71 }

72 .pointer {

73 border: 1px solid #CCC;

74 display: inline-block;

75 padding: $-s $-s;

76 border-radius: 4px;

77 box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);

78 position: absolute;

79 top: -60px;

80 background-color:#FFF;

81 width: 272px;

82 z-index: 55;

83 &:before {

84 position: absolute;

85 left: 50%;

86 bottom: -9px;

87 width: 16px;

88 height: 16px;

89 margin-left: -8px;

90 content: '';

91 display: block;

92 background-color:#FFF;

93 transform: rotate(45deg);

94 transform-origin: 50% 50%;

95 border-bottom: 1px solid #CCC;

96 border-right: 1px solid #CCC;

97 z-index: 56;

98 }

99 input {

100 background-color: #FFF;

101 border: 1px solid #DDD;

102 color: #666;

103 width: 172px;

104 z-index: 40;

105 }

106 input, button {

107 position: relative;

108 border-radius: 0;

109 height: 28px;

110 font-size: 12px;

111 vertical-align: top;

112 }

113 > i {

114 color: #888;

115 font-size: 18px;

116 padding-top: 4px;

117 }

118 .button {

119 line-height: 1;

120 margin: 0 0 0 -4px;

121 box-shadow: none;

122 }

123 }

124

125 // Attribute form

126 .floating-toolbox {

127 background-color: #FFF;

128 border: 1px solid #DDD;

129 right: $-xl*2;

130 z-index: 99;

131 width: 48px;

132 overflow: hidden;

133 align-items: stretch;

134 flex-direction: row;

135 display: flex;

136 transition: width ease-in-out 180ms;

137 margin-top: -1px;

138 min-height: 0px;

139 &.open {

140 width: 480px;

141 }

142 [toolbox-toggle] i {

143 transition: transform ease-in-out 180ms;

144 }

145 [toolbox-toggle] {

146 transition: background-color ease-in-out 180ms;

147 }

148 &.open [toolbox-toggle] {

149 background-color: rgba(255, 0, 0, 0.29);

150 }

151 &.open [toolbox-toggle] i {

152 transform: rotate(180deg);

153 }

154 > div {

155 flex: 1;

156 position: relative;

157 }

158 .tabs {

159 display: block;

160 border-right: 1px solid #DDD;

161 width: 54px;

162 flex: 0;

163 }

164 .tabs i {

165 color: rgba(0, 0, 0, 0.5);

166 padding: 0;

167 margin: 0;

168 }

169 .tabs > span {

170 display: block;

171 cursor: pointer;

172 padding: $-s $-m;

173 font-size: 13.5px;

174 line-height: 1.6;

175 border-bottom: 1px solid rgba(255, 255, 255, 0.3);

176 }

177 &.open .tabs > span.active {

178 color: #444;

179 background-color: rgba(0, 0, 0, 0.1);

180 }

181 div[tab-content] {

182 padding-bottom: 45px;

183 display: flex;

184 flex: 1;

185 flex-direction: column;

186 min-height: 0px;

187 overflow-y: scroll;

188 }

189 div[tab-content] .padded {

190 flex: 1;

191 padding-top: 0;

192 }

193 h4 {

194 font-size: 24px;

195 margin: $-m 0 0 0;

196 padding: 0 $-l $-s $-l;

197 }

198 .tags input {

199 max-width: 100%;

200 width: 100%;

201 min-width: 50px;

202 }

203 .tags td {

204 padding-right: $-s;

205 padding-top: $-s;

206 position: relative;

207 }

208 button.pos {

209 position: absolute;

210 bottom: 0;

211 display: block;

212 width: 100%;

213 padding: $-s;

214 height: 45px;

215 border: 0;

216 margin: 0;

217 box-shadow: none;

218 border-radius: 0;

219 &:hover{

220 box-shadow: none;

221 }

222 }

223 .handle {

224 user-select: none;

225 cursor: move;

226 color: #999;

227 }

228 form {

229 display: flex;

230 flex: 1;

231 flex-direction: column;

232 overflow-y: scroll;

233 }

234 }

235

236 [tab-content] {

237 display: none;

238 }

239

240 .tag-display {

241 margin: $-xl $-xs;

242 border: 1px solid #DDD;

243 min-width: 180px;

244 max-width: 320px;

245 opacity: 0.7;

246 z-index: 5;

247 position: relative;

248 table {

249 width: 100%;

250 margin: 0;

251 padding: 0;

252 }

253 span {

254 color: #666;

255 margin-left: $-s;

256 }

257 .heading {

258 padding: $-xs $-s;

259 color: #444;

260 }

261 td {

262 border: 0;

263 border-bottom: 1px solid #DDD;

264 padding: $-xs $-s;

265 color: #444;

266 }

267 .tag-value {

268 color: #888;

269 }

270 td i {

271 color: #888;

272 }

273 tr:last-child td {

274 border-bottom: none;

275 }

276 .tag {

277 padding: $-s;

278 }

279 }

280

281 .suggestion-box {

282 position: absolute;

283 background-color: #FFF;

284 border: 1px solid #BBB;

285 box-shadow: $bs-light;

286 list-style: none;

287 z-index: 100;

288 padding: 0;

289 margin: 0;

290 border-radius: 3px;

291 li {

292 display: block;

293 padding: $-xs $-s;

294 border-bottom: 1px solid #DDD;

295 &:last-child {

296 border-bottom: 0;

297 }

298 &.active {

299 background-color: #EEE;

300 }

301 }

302 }