/*.lobby_root*/ /*rooms_dir*/ /*room_span*/ /*rx1*/ /*rx2*/ .lobby_root { /*opacity: .5;*/ /*opacity: 0;*/ /*display: none;*/ top: 0; left: 0; right: 0; bottom: 0; /*outline: 3px solid red;*/ outline-offset: -20px; position: absolute; z-index: 10; /*background-image: url("../../media/examples/lizard.png");*/ /*background-image: url("/ign/rf/img/image.png");*/ /*background-image: url("/ign/rf/img/img3.jpg");*/ /*background-image: url("/ign/rf/img/cropped_bak.jpg");*/ /*--vurlx:url("/ign/rf/artists/fisher.png");*/ /*background-position: 50% 100%; */ /*background-position: 20% 0%; */ /*background-position: 50% 50%; */ /*background-attachment: fixed;*/ /*background-repeat: no-repeat;*/ /*background-size: cover; */ /*background-image: url("/ign/rf/img/img3.jpg");*/ /*vertical-align: middle;*/ } html { scroll-behavior: smooth; } .tile_overlay{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; /*border-radius: 20px; */ /*background-image: #0004;*/ /*background-color: #0004;*/ /*background-color: linear-gradient(#0000 #0ff8 #0009);*/ /*background-image: linear-gradient(to bottom #0000, #0ff8, #0009);*/ /*background-image: linear-gradient( 10% #0000, 30% #0ff0, 60% #0009);*/ background-image: linear-gradient( #0000 , #0000, #000a); } .rooms_dir0{ top: 50%; transform: translate(0,-50%); position: relative; } .rooms_dir { /*padding-top: auto;*/ /*top: 50%;*/ top: 50%; vertical-align: middle; /*display: inline-block;*/ /*transform: translate(0,-50%);*/ width: calc(100% - 150px); height: 400px; position: relative; /*outline: 6px solid green;*/ margin: auto; overflow-x: scroll; } .rooms_dir_full{ /*position: relative;*/ /*display: inline;*/ /*width: 300%;*/ top: 0; /*left: 0;*/ width: auto; position: absolute; /*right: 0;*/ bottom: 0; } /*159/256*/ .room_span { /*top: 0;*/ /*bottom: 0;*/ height: 200px; height: calc(200px * (256/159)); /*width: 20%;*/ background-size: cover; /*margin: 20em;*/ margin: 20px; border-radius: 20px; width: 200px; /*outline: 2px solid #ff0;*/ position: relative; display: flex; display: inline; display: inline-block; overflow: hidden; /*style="--vurl:/ign/rf/artists/fisher.png; --vtitle:"Fisher";"*/ /*background-image: url(--vurlx);*/ background-image: var(--vurl); /*background-image: url("/ign/rf/artists/fisher.png");*/ /*display: inline-flex;*/ } .tile_title{ /*margin: auto 30px;*/ /*margin: 30px auto;*/ /*width: 100%;*/ text-align: center; position: relative; /*bottom: 20px;*/ /*top: 100%;*/ color: #fff; top: calc(100% - 40px - 2em); /*position: absolute;*/ /*display: inline;*/ font-size: 2em; } .tile_title:after{ top: 0; bottom: 0; left: 0; right: 0; position: absolute; content:var(--vtitle); } .tile_button{ /*top:40px;*/ bottom:40px; bottom:20px; /*margin: 20px;*/ left: 50%; --vcolor:#eee; color: var(--vcolor); outline: 2px solid var(--vcolor); line-height:25px; font-size: 15px; text-align: center; transform: translate(-50%,0); /*padding: 20px;*/ /*bottom:40px;*/ /*position: relative;*/ position: absolute; width: 125px; height: 25px; /*margin: 0 50%;*/ margin: 0 auto; } .tile_button:hover{ --vcolor:#fff; background-color: #0009; } .arrow { border: solid #bbb; width: 13px; height: 13px; border-width: 0 4px 4px 0; display: inline-block; padding: 3px; } .arrow:hover { border-color: #fff; } .right { position: absolute; transform: rotate(-45deg); right: 20px; top: 50%; /*transform: rotate(45);*/ } .left { left: 20px; position: absolute; top: 50%; transform: rotate(135deg); /*transform: rotate(45);*/ }