Changeset 6615
- Timestamp:
- Nov 24, 2014, 8:10:02 AM (8 years ago)
- Location:
- trunk/www
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/www/biomaterials/bioplates/bioplates.js
r6400 r6615 178 178 var contentPos = Doc.getElementPosition('main.content'); 179 179 var pos = Doc.getElementPosition(wellTd); 180 wellInfo.style.left = (pos.left + pos.width - 5 - contentPos.left) + 'px'; 181 wellInfo.style.top = (pos.top + 10-contentPos.top) + 'px'; 180 var wiPos = Doc.getElementPosition('wellInfo'); 181 wellInfo.style.left = (pos.left + pos.width - contentPos.left - 5) + 'px'; 182 wellInfo.style.top = (pos.top - contentPos.top - 10) + 'px'; 182 183 Doc.show('wellInfo'); 183 184 -
trunk/www/biomaterials/bioplates/view_bioplate.jsp
r6611 r6615 239 239 <td rowspan="12" style="width: 50%; vertical-align: top;"> 240 240 241 <div class="postit" id="wellInfo" style="display:none; width: 20em; min-height: 3em;"></div>242 241 <table class="plate" style="margin-top: 1em;" id="bioplate"> 243 242 <% … … 247 246 WellCoordinateFormatter colF = new WellCoordinateFormatter(false); 248 247 %> 249 <tr><td class="bg-filled-100"></td> 248 <tr> 249 <td class="bg-filled-100"> 250 <div class="notify" id="wellInfo" style="display:none; width: 20em; min-height: 3em;"></div> 251 </td> 250 252 <% 251 253 for (int c = 0; c < columns; ++c) -
trunk/www/include/styles/main.css
r6613 r6615 334 334 } 335 335 336 /* A "postit" style message that is made visible when mouse is over an element */337 .postit338 {339 position: absolute;340 width: 20em;341 background: #F8F8E8;342 border: 1px solid #A0A0A0;343 padding: 2px;344 overflow: auto;345 }346 336 347 337 /* A notification with a small pointer to indicate an invalid form value */ … … 350 340 position: absolute; 351 341 width: 20em; 352 border: 2px solid #AA8844; 353 background: #FFD8D8; 342 background-color: #FFD8D8; 354 343 color: #000000; 344 border-color: #AA8844; 345 border-width: 2px; 355 346 font-weight: bold; 356 347 padding: 4px; 357 348 border-radius: 4px; 358 box-shadow: 0px 0px 1px 7px #FFFFFF; 349 box-shadow: 0px 0px 2px 5px #FFFFFF; 350 } 351 352 /* First child div is the outermost "pointer" */ 353 .notify > div:first-child 354 { 355 border-color: inherit; 356 border-width: 6px; 357 } 358 359 /* 360 Second child div is the innermost "pointer" and should use 361 the same color as the 'notify' background 362 */ 363 .notify > div:first-child > div 364 { 365 border-color: #FFD8D8; 366 border-width: 6px; 359 367 } 360 368 … … 366 374 367 375 /* The pointer is above the 'notify' message */ 368 .notify .pointer-above376 .notify > div.pointer-above 369 377 { 370 378 position: absolute; … … 373 381 top: -8px; 374 382 left: 10px; 375 background: none;376 border-left: 6px solid transparent;377 border-right: 6px solid transparent;378 border-bottom: 6px solid #AA8844;379 383 border-top-width: 0; 384 border-left-color: transparent !important; 385 border-right-color: transparent !important 380 386 } 381 387 382 388 /* Inner div is filling the pointer with the same background as the notification */ 383 .notify .pointer-abovediv389 .notify > div.pointer-above > div 384 390 { 385 391 position: absolute; … … 387 393 height: 0; 388 394 left: -6px; 389 top: 2px; 390 border-left: 6px solid transparent; 391 border-right: 6px solid transparent; 392 border-bottom: 6px solid #FFD8D8; 393 border-top-width: 0; 395 top: 3px; 396 border-top-width: 0; 397 border-left-color: transparent !important; 398 border-right-color: transparent !important; 394 399 } 395 400 396 401 /* The pointer is below the 'notify' message */ 397 .notify .pointer-below402 .notify > div.pointer-below 398 403 { 399 404 position: absolute; … … 402 407 bottom: -8px; 403 408 left: 10px; 404 background: none;405 border-left: 6px solid transparent;406 border-right: 6px solid transparent;407 border-top: 6px solid #AA8844;408 409 border-bottom-width: 0; 410 border-left-color: transparent !important; 411 border-right-color: transparent !important; 409 412 } 410 413 411 414 /* Inner div is filling the pointer with the same background as the notification */ 412 .notify .pointer-belowdiv415 .notify > div.pointer-below > div 413 416 { 414 417 position: absolute; … … 416 419 height: 0; 417 420 left: -6px; 418 bottom: 2px; 419 border-left: 6px solid transparent; 420 border-right: 6px solid transparent; 421 border-top: 6px solid #FFD8D8; 422 border-bottom-width: 0; 421 bottom: 3px; 422 border-bottom-width: 0; 423 border-left-color: transparent !important; 424 border-right-color: transparent !important; 423 425 } 424 426 425 427 /* The pointer is to the left the 'notify' message */ 426 .notify .pointer-left428 .notify > div.pointer-left 427 429 { 428 430 position: absolute; … … 431 433 top: 10px; 432 434 left: -8px; 433 background: none;434 border-top: 6px solid transparent;435 border-bottom: 6px solid transparent;436 border-right: 6px solid #AA8844;437 435 border-left-width: 0; 436 border-top-color: transparent !important; 437 border-bottom-color: transparent !important; 438 438 } 439 439 440 440 /* Inner div is filling the pointer with the same background as the notification */ 441 .notify .pointer-leftdiv441 .notify > div.pointer-left > div 442 442 { 443 443 position: absolute; … … 445 445 height: 0; 446 446 top: -6px; 447 left: 2px; 448 border-top: 6px solid transparent; 449 border-bottom: 6px solid transparent; 450 border-right: 6px solid #FFD8D8; 451 border-left-width: 0; 447 left: 3px; 448 border-left-width: 0; 449 border-top-color: transparent !important; 450 border-bottom-color: transparent !important; 452 451 } 453 452
Note: See TracChangeset
for help on using the changeset viewer.