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 }

64 // diffs

65 ins,

66 del {

67 text-decoration: none;

68 }

69 ins {

70 background: #dbffdb;

71 }

72 del {

73 background: #FFECEC;

74 }

75 }

77 // Page content pointers

78 .pointer-container {

79 position: relative;

80 display: none;

81 left: 0;

82 z-index: 10;

83 }

84 .pointer {

85 border: 1px solid #CCC;

86 display: inline-block;

87 padding: $-s $-s;

88 border-radius: 4px;

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

90 position: absolute;

91 top: -60px;

92 background-color:#FFF;

93 width: 272px;

94 z-index: 55;

95 &:before {

96 position: absolute;

97 left: 50%;

98 bottom: -9px;

99 width: 16px;

100 height: 16px;

101 margin-left: -8px;

102 content: '';

103 display: block;

104 background-color:#FFF;

105 transform: rotate(45deg);

106 transform-origin: 50% 50%;

107 border-bottom: 1px solid #CCC;

108 border-right: 1px solid #CCC;

109 z-index: 56;

110 }

111 input {

112 background-color: #FFF;

113 border: 1px solid #DDD;

114 color: #666;

115 width: 172px;

116 z-index: 40;

117 }

118 input, button {

119 position: relative;

120 border-radius: 0;

121 height: 28px;

122 font-size: 12px;

123 vertical-align: top;

124 }

125 > i {

126 color: #888;

127 font-size: 18px;

128 padding-top: 4px;

129 }

130 .button {

131 line-height: 1;

132 margin: 0 0 0 -4px;

133 box-shadow: none;

134 }

135 }

136

137 // Attribute form

138 .floating-toolbox {

139 background-color: #FFF;

140 border: 1px solid #DDD;

141 right: $-xl*2;

142 z-index: 99;

143 width: 48px;

144 overflow: hidden;

145 align-items: stretch;

146 flex-direction: row;

147 display: flex;

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

149 margin-top: -1px;

150 min-height: 0px;

151 &.open {

152 width: 480px;

153 }

154 [toolbox-toggle] i {

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

156 }

157 [toolbox-toggle] {

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

159 }

160 &.open [toolbox-toggle] {

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

162 }

163 &.open [toolbox-toggle] i {

164 transform: rotate(180deg);

165 }

166 > div {

167 flex: 1;

168 position: relative;

169 }

170 .tabs {

171 display: block;

172 border-right: 1px solid #DDD;

173 width: 54px;

174 flex: 0;

175 }

176 .tabs i {

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

178 padding: 0;

179 margin: 0;

180 }

181 .tabs > span {

182 display: block;

183 cursor: pointer;

184 padding: $-s $-m;

185 font-size: 13.5px;

186 line-height: 1.6;

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

188 }

189 &.open .tabs > span.active {

190 color: #444;

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

192 }

193 div[tab-content] {

194 padding-bottom: 45px;

195 display: flex;

196 flex: 1;

197 flex-direction: column;

198 min-height: 0px;

199 overflow-y: scroll;

200 }

201 div[tab-content] .padded {

202 flex: 1;

203 padding-top: 0;

204 }

205 h4 {

206 font-size: 24px;

207 margin: $-m 0 0 0;

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

209 }

210 .tags input {

211 max-width: 100%;

212 width: 100%;

213 min-width: 50px;

214 }

215 .tags td {

216 padding-right: $-s;

217 padding-top: $-s;

218 position: relative;

219 }

220 button.pos {

221 position: absolute;

222 bottom: 0;

223 display: block;

224 width: 100%;

225 padding: $-s;

226 height: 45px;

227 border: 0;

228 margin: 0;

229 box-shadow: none;

230 border-radius: 0;

231 &:hover{

232 box-shadow: none;

233 }

234 }

235 .handle {

236 user-select: none;

237 cursor: move;

238 color: #999;

239 }

240 form {

241 display: flex;

242 flex: 1;

243 flex-direction: column;

244 overflow-y: scroll;

245 }

246 }

247

248 [tab-content] {

249 display: none;

250 }

251

252 .tag-display {

253 margin: $-xl $-xs;

254 border: 1px solid #DDD;

255 min-width: 180px;

256 max-width: 320px;

257 opacity: 0.7;

258 z-index: 5;

259 position: relative;

260 table {

261 width: 100%;

262 margin: 0;

263 padding: 0;

264 }

265 span {

266 color: #666;

267 margin-left: $-s;

268 }

269 .heading {

270 padding: $-xs $-s;

271 color: #444;

272 }

273 td {

274 border: 0;

275 border-bottom: 1px solid #DDD;

276 padding: $-xs $-s;

277 color: #444;

278 }

279 .tag-value {

280 color: #888;

281 }

282 td i {

283 color: #888;

284 }

285 tr:last-child td {

286 border-bottom: none;

287 }

288 .tag {

289 padding: $-s;

290 }

291 }

292

293 .suggestion-box {

294 position: absolute;

295 background-color: #FFF;

296 border: 1px solid #BBB;

297 box-shadow: $bs-light;

298 list-style: none;

299 z-index: 100;

300 padding: 0;

301 margin: 0;

302 border-radius: 3px;

303 li {

304 display: block;

305 padding: $-xs $-s;

306 border-bottom: 1px solid #DDD;

307 &:last-child {

308 border-bottom: 0;

309 }

310 &.active {

311 background-color: #EEE;

312 }

313 }

314 }