56 lines
1.0 KiB
CSS
56 lines
1.0 KiB
CSS
body {
|
|
margin: 0;
|
|
background-color: gray;
|
|
}
|
|
#top-bar {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 30px;
|
|
padding: 10px;
|
|
display: flex;
|
|
}
|
|
#image-canvas {
|
|
width: 2000px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 25px;
|
|
padding-top: 56px;
|
|
}
|
|
#image-canvas img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 25px;
|
|
margin-top: -6px;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
}
|
|
#image-canvas img:nth-child(80n+42) {
|
|
margin-left: -25px;
|
|
}
|
|
#selected-cap-circle {
|
|
width: 46px;
|
|
height: 46px;
|
|
border: 2px solid green;
|
|
border-radius: 25px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 25px;
|
|
display: none;
|
|
}
|
|
|
|
.top-button {
|
|
height: 20px;
|
|
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-size: 16px;
|
|
background-color: orange;
|
|
padding: 5px 10px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.top-button:hover {
|
|
background-color: rgb(255, 174, 26);
|
|
}
|