#ismerosok_icon{ position: fixed; right: 1%; } .ismerosok_buttons label{ width: 100px; height:60px; } #barat_list{ position: fixed; right: 0; width: 20%; height: 100%; margin: 0; background-color: rgba(0, 0, 0, 0.7); border-top: 0px; border-right: 0px; border-bottom: 0px; border-color: #660000; z-index: 6; top:0; overflow-y: auto; border-style: groove; } .bopen_animation{ animation: ismeros_lista 1s linear forwards ; } .bclose_animation{ animation: ismeros_lista_close 1s linear forwards ; } .ismeros { display: inline-block; padding: 0; height: 50px; font-size: 16px; line-height: 50px; border-radius: 15px; background-color: #842525; color: yellow; padding-left: 5%; padding-right: 1%; width: 85%; margin-left: 5%; } .ismeros img { float: left; margin: 0 1% 0 -1%; height: 100%; width: auto; border-radius: 50%; } .ismeros:hover{ box-shadow: 0 0 10px #f32121, 0 0 40px white; background-color: red; color: white; } @keyframes ismeros_lista{ 0%{ display: none; opacity:0; transform: translateX(100%); } 100%{ display: block; opacity:1; transform: translateX(0%); } } @keyframes ismeros_lista_close{ 0%{ display: block; opacity:1; transform: translateX(0%); } 100%{opacity:0; transform: translateX(100%); display: none; } } .ismeros div{ /*padding-left: 10%;*/ white-space: nowrap; overflow: hidden; /*padding-right: 10%; position: absolute; left: 30%;*/ width: 50%; } .ismeros div span{ text-overflow:ellipsis; display: inline-block; } .ismeros div span:hover{ animation: text_animate 20s linear infinite; } .ismeros div span:active{ animation: text_animate 20s linear infinite; } @keyframes text_animate { 0%{ transform: translateX(0%); } 90%{ transform: translateX(-100%); } 100%{ transform: translateX(-1%); right: 1px; } } .uzi { border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0; } .enuzi { border-color: #ccc; background-color: #ddd; } .uzi::after { content: ""; clear: both; display: table; } .uzi img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } .uzi.enuzi img { float: right; margin-left: 20px; margin-right:0; } .enuzi .time { float: left; color: #aaa; } .time { float: right; color: #999; } #barat_list nav{ margin-bottom: 20%; } .ismeros .icon{ padding-left: 10px; color: #888; font-weight: bold; font-size: 20px; cursor: pointer; border-radius: 50%; position: fixed; right: 25%; } #chat_text{ width: 85%; height: 10%; left:2% } #kuld_button{ width: 12%; margin-left: 1%; right: 0.2%; } #chat_form{ margin: 0; position: sticky; bottom: 0; background-color: black; } #chat_body{ margin: 0 0.2%; width: 100%; height: 100%; overflow-x: hidden; } #ikeres_id{ width: 30px; } #ikeres_text_nev{ width: 60%; } #ikeres_form{ margin: 0; position: sticky; top: 0; background-color: black; padding-bottom: 10%; color:white; } #keres_button{ width: 100%; } #b_body iframe{ width: 100%; border: none; } #ikeres_body{ margin:0; }