DVZ shoutbox przybliżenie avatarów do nicku i wpisu

**PowstaniecGanru** · (Ten post był ostatnio modyfikowany: 25.08.2015, 17:17 przez PowstaniecGanru.)

wersja skryptu MyBB:1.8.5
adres forum:holyfrag.xaa.pl
na czym polega problem (screen, opis, komunikaty, nazwa i wersja wtyczki): chciałbym przybliżyć nick i wpis do avataru i wyrównać shoutboxa (chodzi o avatary)

global.css

.hint, [data-hint] {

  position: relative;

  display: inline-block;

  /**

   * tooltip arrow

   */

  /**

   * tooltip body

   */ }

  .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {

    position: absolute;

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    visibility: hidden;

    opacity: 0;

    z-index: 1000000;

    pointer-events: none;

    -webkit-transition: 0.3s ease;

    -moz-transition: 0.3s ease;

    transition: 0.3s ease;

    -webkit-transition-delay: 0ms;

    -moz-transition-delay: 0ms;

    transition-delay: 0ms; }

  .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {

    visibility: visible;

    opacity: 1; }

  .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {

    -webkit-transition-delay: 100ms;

    -moz-transition-delay: 100ms;

    transition-delay: 100ms; }

  .hint:before, [data-hint]:before {

    content: '';

    position: absolute;

    background: transparent;

    border: 6px solid transparent;

    z-index: 1000001; }

  .hint:after, [data-hint]:after {

    content: attr(data-hint);

    background: #383838;

    color: white;

    padding: 8px 10px;

    font-size: 12px;

    line-height: 12px;

    white-space: nowrap; }

/**

 * source: hint-position.scss

 *

 * Defines the positoning logic for the tooltips.

 *

 * Classes added:

 *     1) hint--top

 *     2) hint--bottom

 *     3) hint--left

 *     4) hint--right

 */

/**

 * set default color for tooltip arrows

 */

.hint--top:before {

  border-top-color: #383838; }

.hint--bottom:before {

  border-bottom-color: #383838; }

.hint--left:before {

  border-left-color: #383838; }

.hint--right:before {

  border-right-color: #383838; }

/**

 * top tooltip

 */

.hint--top:before {

  margin-bottom: -12px; }

.hint--top:after {

  margin-left: -18px; }

.hint--top:before, .hint--top:after {

  bottom: 100%;

  left: 50%; }

.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {

  -webkit-transform: translateY(-8px);

  -moz-transform: translateY(-8px);

  transform: translateY(-8px); }

/**

 * bottom tooltip

 */

.hint--bottom:before {

  margin-top: -12px; }

.hint--bottom:after {

  margin-left: -18px; }

.hint--bottom:before, .hint--bottom:after {

  top: 100%;

  left: 50%; }

.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {

  -webkit-transform: translateY(8px);

  -moz-transform: translateY(8px);

  transform: translateY(8px); }

/**

 * right tooltip

 */

.hint--right:before {

  margin-left: -12px;

  margin-bottom: -6px; }

.hint--right:after {

  margin-bottom: -14px; }

.hint--right:before, .hint--right:after {

  left: 100%;

  bottom: 50%; }

.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {

  -webkit-transform: translateX(8px);

  -moz-transform: translateX(8px);

  transform: translateX(8px); }

/**

 * left tooltip

 */

.hint--left:before {

  margin-right: -12px;

  margin-bottom: -6px; }

.hint--left:after {

  margin-bottom: -14px; }

.hint--left:before, .hint--left:after {

  right: 100%;

  bottom: 50%; }

.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {

  -webkit-transform: translateX(-8px);

  -moz-transform: translateX(-8px);

  transform: translateX(-8px); }

/**

 * source: hint-theme.scss

 *

 * Defines basic theme for tooltips.

 *

 */

.hint, [data-hint] {

  /**

   * tooltip body

   */ }

  .hint:after, [data-hint]:after {

    text-shadow: 0 -1px 0px black;

    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

.hint--error:after {

  background-color: #b34e4d;

  text-shadow: 0 -1px 0px #592726; }

.hint--error.hint--top:before {

  border-top-color: #b34e4d; }

.hint--error.hint--bottom:before {

  border-bottom-color: #b34e4d; }

.hint--error.hint--left:before {

  border-left-color: #b34e4d; }

.hint--error.hint--right:before {

  border-right-color: #b34e4d; }

.hint--warning:after {

  background-color: #c09854;

  text-shadow: 0 -1px 0px #6c5328; }

.hint--warning.hint--top:before {

  border-top-color: #c09854; }

.hint--warning.hint--bottom:before {

  border-bottom-color: #c09854; }

.hint--warning.hint--left:before {

  border-left-color: #c09854; }

.hint--warning.hint--right:before {

  border-right-color: #c09854; }

.hint--info:after {

  background-color: #3986ac;

  text-shadow: 0 -1px 0px #193b4d; }

.hint--info.hint--top:before {

  border-top-color: #3986ac; }

.hint--info.hint--bottom:before {

  border-bottom-color: #3986ac; }

.hint--info.hint--left:before {

  border-left-color: #3986ac; }

.hint--info.hint--right:before {

  border-right-color: #3986ac; }

.hint--success:after {

  background-color: #458746;

  text-shadow: 0 -1px 0px #1a321a; }

.hint--success.hint--top:before {

  border-top-color: #458746; }

.hint--success.hint--bottom:before {

  border-bottom-color: #458746; }

.hint--success.hint--left:before {

  border-left-color: #458746; }

.hint--success.hint--right:before {

  border-right-color: #458746; }

.hint--always:after, .hint--always:before {

  opacity: 1;

  visibility: visible; }

.hint--always.hint--top:after, .hint--always.hint--top:before {

  -webkit-transform: translateY(-8px);

  -moz-transform: translateY(-8px);

  transform: translateY(-8px); }

.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {

  -webkit-transform: translateY(8px);

  -moz-transform: translateY(8px);

  transform: translateY(8px); }

.hint--always.hint--left:after, .hint--always.hint--left:before {

  -webkit-transform: translateX(-8px);

  -moz-transform: translateX(-8px);

  transform: translateX(-8px); }

.hint--always.hint--right:after, .hint--always.hint--right:before {

  -webkit-transform: translateX(8px);

  -moz-transform: translateX(8px);

  transform: translateX(8px); }

.hint--rounded:after {

  border-radius: 4px; }

.hint--no-animate:before, .hint--no-animate:after {

  -webkit-transition-duration: 0ms;

  -moz-transition-duration: 0ms;

  transition-duration: 0ms; }

.hint--bounce:before, .hint--bounce:after {

  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }

/* DVZ Shoutbox */

#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); }

#shoutbox .head { padding: 8px; }

#shoutbox.front .head { cursor: pointer; }

#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }

#shoutbox.collapsed .head { opacity: 0.6; }

#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }

#shoutbox input.text { margin: 0; padding: 10px 8px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #D9D9F3; }

#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }

#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }

#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }

#shoutbox .panel p { margin: 0; }

#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; }

#shoutbox .data { display: table; width: 100%; border-top: solid 2px rgba(0,0,0,0.1); font-family: Arial, sans-serif; font-size: 12px; }

#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; }

#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }

#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }

#shoutbox .entry > div { border-bottom: dashed 1px rgba(0,0,0,0.05); }

#shoutbox .entry:last-child > div { border-bottom: none; }

#shoutbox .entry > div { display: table-cell; padding: 6px; }

#shoutbox .avatar img { margin: 0 auto; vertical-align: middle; max-height: 20px; max-width: 20px; border: solid 1px rgba(255,255,255,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; }

#shoutbox .user { border-right: solid 1px rgba(0,0,0,0.05); text-align: right; white-space: nowrap; }

#shoutbox .text { width: 100%; color: #555; }

#shoutbox .info { font-size: 11px; color: #AAA; white-space: nowrap; text-align: right; }

#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }

#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }

#shoutbox  .ip { margin-right: 10px; color: #CECECE; }

Już tłumaczenie dodane do stopki samo się usunęło.

Snake_ napisał 25.08.2015, 17:09:
Kasujesz link do MyBB PL? Nie licz na nasze wsparcie techniczne!

Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

DVZ shoutbox przybliżenie avatarów do nicku i wpisu

PowstaniecGanru

Użytkownicy przeglądający ten wątek:

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie