123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- * {
- margin: 0;
- padding: 0;
- box-sizing:border-box;
- }
- html {
- height:100%;
- width:100%;
- }
- body {
- height:100%;
- width:100%;
- position:relative;
- font: bold 1rem sans, sans-serif;
- color:#ccc;
- background:#111;
- }
- a {
- outline: none;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- a, a:hover, a:focus, a:visited {
- color:#ccc;
- }
- a:focus {
- outline: 3px solid red;
- }
- .clearfix:before,
- .clearfix:after {
- content: " ";
- display: table;
- }
- .clearfix:after {
- clear: both;
- }
- .clearfix {
- *zoom: 1;
- }
- /*-------------------fullpage--------------------*/
- .fullpage .content {
- height:100%;
- width:100%;
- display:flex;
- align-items: center;
- }
- .fullpage img {
- display: block;
- }
- /*--------------header-------------*/
- .fullpage .head {
- width:100%;
- position:absolute;
- top:0;
- left:0;
- height:1.5rem;
- background:#333;
- opacity:0.5;
- padding:0 0.5rem;
- display:flex;
- }
- .fullpage .head .back {
- flex: 0 0 auto;
- }
- .fullpage .head .imagetext {
- flex: 1 1 auto;
- text-align: center;
- }
- .fullpage .head .title {
- flex: 0 0 auto;
- }
- .fullpage .head:hover {
- opacity:1;
- }
- /*-----------thumbnails-------------*/
- .fullpage .thumb {
- flex: 0 0 10%;
- padding:0.4rem;
- }
- .fullpage .thumb img {
- border: 0.15rem solid rgba(255,255,255,0.5);
- width:100%;
- opacity:0.9;
- }
- .fullpage .thumb img:hover {
- opacity:1;
- border-color:#ccc;
- }
- .fullpage .thumb img {
- width:100%;
- }
- /*-------------full image-------------*/
- .fullpage .full {
- flex: 1 1 80%;
- display:flex;
- align-items: center;
- width:100%;
- height:100%;
- padding:2rem 0.2rem 0.5rem 0.2rem;
- }
- .fullpage .full img {
- object-fit:contain;
- max-width:100%;
- max-height:100%;
- margin: 0 auto;
- box-shadow: 0 0 0.5rem 0.5rem black;
- }
- /*------------thumbnail page (index)-------------*/
- .thumbpage .content {
- padding: 2rem 0.5rem 0 0.5rem;
- }
- .thumbpage img {
- border: 0.2rem solid black;
- }
- .thumbpage .thumb {
- float:left;
- margin:0;
- padding:0;
- margin:0.2rem;
- }
- .thumbpage .head {
- width:100%;
- position:absolute;
- top:0;
- left:0;
- height:1.5rem;
- background:#333;
- padding:0 0.5rem;
- }
- .thumbpage .head .back {
- float:left;
- }
- .thumbpage .head .title {
- float: right;
- }
|