1/* Theme Variables 2 ------------------------------------------*/ 3@border-color: #a9a9a9; 4@background-color: #f5f5f5; 5 6/* Frame Mode Layout 7 ------------------------------------------*/ 8.note-editor { 9 border: 1px solid @border-color; 10 position: relative; 11 /* overflow: hidden; ODOO: removed for embedded editor */ 12 13 /* dropzone */ 14 @dropzone-color: lightskyblue; 15 @dropzone-active-color: darken(@dropzone-color, 30); 16 .note-dropzone { 17 position: absolute; 18 display: none; 19 z-index: 100; 20 color: @dropzone-color; 21 background-color: white; 22 opacity: 0.95; 23 pointer-event: none; 24 25 .note-dropzone-message { 26 display: table-cell; 27 vertical-align: middle; 28 text-align: center; 29 font-size: 28px; 30 font-weight: bold; 31 } 32 33 &.hover { 34 color: @dropzone-active-color; 35 } 36 } 37 38 &.dragover .note-dropzone { 39 display: table; 40 } 41 42 /* codeview mode */ 43 &.codeview { 44 .note-editing-area { 45 .note-editable { 46 display: none; 47 } 48 .note-codable { 49 display: block; 50 } 51 } 52 } 53 54 /* fullscreen mode */ 55 &.fullscreen { 56 position: fixed; 57 top: 0; 58 left: 0; 59 width: 100%; 60 z-index: 1050; /* bs3 modal-backdrop: 1030, bs2: 1040 */ 61 .note-editable { 62 background-color: white; 63 } 64 .note-resizebar { 65 display: none; 66 } 67 } 68 69 .note-editing-area { 70 position: relative; 71 overflow: hidden; 72 73 /* editable */ 74 .note-editable { 75 background-color: #fff; 76 color: #000; 77 padding: 10px; 78 overflow: auto; 79 outline: none; 80 81 &[contenteditable=true]:empty:not(:focus):before { 82 content:attr(data-placeholder); 83 } 84 &[contenteditable="false"] { 85 background-color: #e5e5e5; 86 } 87 } 88 89 /* codeable */ 90 .note-codable { 91 display: none; 92 width: 100%; 93 padding: 10px; 94 border: none; 95 box-shadow: none; 96 font-family: Menlo, Monaco, monospace, sans-serif; 97 font-size: 14px; 98 color: #ccc; 99 background-color: #222; 100 resize: none; 101 102 /* override BS2 default style */ 103 box-sizing: border-box; 104 border-radius: 0; 105 margin-bottom: 0; 106 } 107 } 108 109 /* statusbar */ 110 .note-statusbar { 111 background-color: @background-color; 112 .note-resizebar { 113 padding-top: 1px; 114 height: 8px; 115 width: 100%; 116 cursor: ns-resize; 117 .note-icon-bar { 118 width: 20px; 119 margin: 1px auto; 120 border-top: 1px solid @border-color; 121 } 122 } 123 } 124} 125 126/* Air Mode Layout 127------------------------------------------*/ 128.note-air-editor { 129 outline: none; 130} 131 132/* Popover 133------------------------------------------*/ 134.note-popover .popover { 135 max-width: none; 136 .popover-body { 137 a { 138 display: inline-block; 139 max-width: 200px; 140 overflow: hidden; 141 text-overflow: ellipsis; 142 white-space: nowrap; /* for FF */ 143 vertical-align: middle; /* for FF */ 144 } 145 } 146 & .arrow { 147 left: 20px; 148 } 149} 150 151/* Popover and Toolbar (Button container) 152------------------------------------------*/ 153.note-popover .popover .popover-body, .panel-heading.note-toolbar { 154 margin: 0; 155 padding: 0 0 5px 5px; 156 157 &>.btn-group { 158 margin-top: 5px; 159 margin-left: 0; 160 margin-right: 5px; 161 } 162 163 .btn-group { 164 .note-table { 165 min-width: 0; 166 padding: 5px; 167 .note-dimension-picker { 168 font-size: 18px; 169 .note-dimension-picker-mousecatcher { 170 position: absolute !important; 171 z-index: 3; 172 width: 10em; 173 height: 10em; 174 cursor: pointer; 175 } 176 .note-dimension-picker-unhighlighted { 177 position: relative !important; 178 z-index: 1; 179 width: 5em; 180 height: 5em; 181 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat; 182 } 183 .note-dimension-picker-highlighted { 184 position: absolute !important; 185 z-index: 2; 186 width: 1em; 187 height: 1em; 188 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat; 189 } 190 } 191 } 192 } 193 194 .note-style { 195 h1, h2, h3, h4, h5, h6, blockquote { 196 margin: 0; 197 } 198 } 199 200 .note-color { 201 .dropdown-toggle { 202 width: 20px; 203 padding-left: 5px; 204 } 205 .dropdown-menu { 206 min-width: 340px; 207 .btn-group { 208 margin: 0; 209 &:first-child { 210 margin: 0 5px; 211 } 212 213 .note-palette-title { 214 font-size: 12px; 215 margin: 2px 7px; 216 text-align: center; 217 border-bottom: 1px solid #eee; 218 } 219 220 .note-color-reset { 221 font-size: 11px; 222 margin: 3px; 223 padding: 0 3px; 224 cursor: pointer; 225 border-radius: 5px; 226 } 227 228 .note-color-row { 229 height: 20px; 230 } 231 232 .note-color-reset:hover { 233 background: #eee; 234 } 235 } 236 } 237 } 238 239 .note-para { 240 .dropdown-menu { 241 min-width: 216px; 242 padding: 5px; 243 &>div:first-child { 244 margin-right: 5px; 245 } 246 } 247 } 248 249 /* dropdown-menu for toolbar and popover */ 250 .dropdown-menu { 251 min-width: 90px; 252 253 /* dropdown-menu right position */ 254 /* http://forrst.com/posts/Bootstrap_right_positioned_dropdown-2KB */ 255 &.right { 256 right: 0; 257 left: auto; 258 &::before { right: 9px; left: auto !important; } 259 &::after { right: 10px; left: auto !important; } 260 } 261 /* dropdown-menu for selectbox */ 262 &.note-check { 263 li a i { 264 color: deepskyblue; 265 visibility: hidden; 266 } 267 li a.checked i { 268 visibility: visible; 269 } 270 } 271 272 } 273 274 .note-fontsize-10 { 275 font-size: 10px; 276 } 277 278 /* color palette for toolbar and popover */ 279 .note-color-palette { 280 line-height: 1; 281 div { 282 .note-color-btn { 283 width: 20px; 284 height: 20px; 285 padding: 0; 286 margin: 0; 287 border: 1px solid #fff; 288 } 289 .note-color-btn:hover { 290 border: 1px solid #000; 291 } 292 } 293 } 294} 295 296/* Dialog 297------------------------------------------*/ 298.note-dialog { 299 &>div { 300 display: none; /* BS2's hide pacth. */ 301 } 302 .form-group { /* overwrite BS's form-horizontal minus margins */ 303 margin-left: 0; 304 margin-right: 0; 305 } 306 .note-modal-form { 307 margin: 0; /* overwrite BS2's form margin bottom */ 308 } 309 .note-image-dialog { 310 .note-dropzone { 311 min-height: 100px; 312 font-size: 30px; 313 line-height: 4; /* vertical-align */ 314 color: lightgray; 315 text-align: center; 316 border: 4px dashed lightgray; 317 margin-bottom: 10px; 318 } 319 } 320 .note-help-dialog { 321 @note-shortcut-hl: #dd0; 322 font-size: 12px; 323 color: #ccc; 324 background-color: #222 !important; 325 opacity: 0.9; 326 .modal-content { 327 background: transparent; 328 border: 1px solid white; 329 box-shadow: none; 330 border-radius: 5px; 331 } 332 333 /* BS2's background pacth. */ 334 background: transparent; 335 border: none; 336 337 a { 338 font-size: 12px; 339 color: white; 340 } 341 342 .title { 343 color: white; 344 font-size: 14px; 345 font-weight: bold; 346 padding-bottom: 5px; 347 margin-bottom: 10px; 348 border-bottom: white 1px solid; 349 } 350 351 .modal-close { 352 font-size: 14px; 353 color: @note-shortcut-hl; 354 cursor: pointer; 355 } 356 357 .text-center { 358 margin: 10px 0 0; 359 } 360 361 .note-shortcut { 362 padding-top: 8px; 363 padding-bottom: 8px; 364 365 &-row { 366 margin-right: -5px; 367 margin-left: -5px; 368 } 369 370 &-col { 371 padding-right: 5px; 372 padding-left: 5px; 373 } 374 375 &-title { 376 font-size: 13px; 377 font-weight: bold; 378 color: @note-shortcut-hl; 379 } 380 381 &-key { 382 font-family: "Courier New"; 383 color: @note-shortcut-hl; 384 text-align: right; 385 } 386 } 387 } 388} 389 390/* Handle 391------------------------------------------*/ 392.note-handle { 393 /* control selection */ 394 .note-control-selection { 395 position: absolute; 396 display: none; 397 border: 1px solid black; 398 &>div { position: absolute; } 399 400 .note-control-selection-bg { 401 width: 100%; 402 height: 100%; 403 background-color: black; 404 opacity: 0.3; 405 } 406 407 .note-control-handle { 408 width: 7px; 409 height: 7px; 410 border: 1px solid black; 411 } 412 413 .note-control-holder { 414 .note-control-handle; 415 } 416 417 .note-control-sizing { 418 .note-control-handle; 419 background-color: white; 420 } 421 422 .note-control-nw { 423 top: -5px; 424 left: -5px; 425 border-right: none; 426 border-bottom: none; 427 } 428 429 .note-control-ne { 430 top: -5px; 431 right: -5px; 432 border-bottom: none; 433 border-left: none; 434 } 435 436 .note-control-sw { 437 bottom: -5px; 438 left: -5px; 439 border-top: none; 440 border-right: none; 441 } 442 443 .note-control-se { 444 right: -5px; 445 bottom: -5px; 446 cursor: se-resize; 447 } 448 449 .note-control-se.note-control-holder { 450 cursor: default; 451 border-top: none; 452 border-left: none; 453 } 454 455 .note-control-selection-info { 456 right: 0; 457 bottom: 0; 458 padding: 5px; 459 margin: 5px; 460 color: white; 461 background-color: black; 462 font-size: 12px; 463 border-radius: 5px; 464 opacity: 0.7; 465 } 466 } 467} 468