*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:sans-serif;
height:100vh;
width:100vw;
overflow:hidden;
position:relative;
}
body.dark-theme{
color:#00ff41;
background-color:#0d1117;
}
body.light-theme{
color:#333;
background-color:#f5f5f5;
}
.ip-address{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:3em;
font-weight:bold;
font-family:consolas,monospace;
cursor:default;
user-select:none;
white-space:nowrap;
z-index:10;
}
.dark-theme .ip-address{
color:#00ff41;
}
.light-theme .ip-address{
color:#e74c3c;
}
.walrus-main{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, calc(-50% - 110px));
width:80px;
height:80px;
object-fit:contain;
cursor:pointer;
z-index:5;
}
.ip-details{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, calc(-50% + 45px));
font-size:0.9em;
font-family:consolas, monospace;
opacity:0.8;
text-align:center;
line-height:1.4;
z-index:5;
}
.dark-theme .ip-details{
color:#8b949e;
}
.light-theme .ip-details{
color:#666;
}
.copy-container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, calc(-50% + 95px));
display:flex;
flex-direction:column;
align-items:center;
z-index:5;
}
.copy-button{
background:transparent;
border:none;
cursor:pointer;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s ease;
}
.dark-theme .copy-button{
color:#00ff41;
}
.light-theme .copy-button{
color:#e74c3c;
}
.dark-theme .copy-button:hover{
opacity:0.7;
}
.light-theme .copy-button:hover{
opacity:0.7;
}
.copied-text{
position:absolute;
bottom:100%;
margin-bottom:5px;
font-size:0.8em;
font-weight:bold;
opacity:0;
visibility:hidden;
transition:all 0.2s ease;
white-space:nowrap;
}
.dark-theme .copied-text{
color:#00ff41;
}
.light-theme .copied-text{
color:#e74c3c;
}
.copied-text.show{
opacity:1;
visibility:visible;
}
.loading{
opacity:0.5;
}
.error{
font-weight:bold;
}
.dark-theme .error{
color:#ff6b6b;
}
.light-theme .error{
color:#e74c3c;
}
.pull-to-refresh{
position:fixed;
top:-60px;
left:50%;
transform:translateX(-50%);
padding:10px 20px;
border-radius:20px;
font-size:0.9em;
font-weight:bold;
opacity:0;
z-index:1000;
}
.dark-theme .pull-to-refresh{
background-color:rgba(0, 255, 65, 0.2);
color:#00ff41;
}
.light-theme .pull-to-refresh{
background-color:rgba(231, 76, 60, 0.2);
color:#e74c3c;
}