esefandClaude Opus 5.5
59d226f283
The Status tab embeds status.userevolt.app (VEGA) in an iframe that loads on first open, with a VEGA-coloured top bar. Old /yuukabot links go to /status. Removes the Firebase bot dashboard (yuukabot.js/css). Co-Authored-By: Claude Opus 5.5 <[email protected]>
258 lines
6.0 KiB
CSS
258 lines
6.0 KiB
CSS
.tab-content {
|
|
display: none;
|
|
padding: 20px;
|
|
color:aliceblue;
|
|
}
|
|
|
|
#about {
|
|
display: block;
|
|
}
|
|
|
|
html, body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
#background-video,
|
|
#calendar-background-video,
|
|
#bucketlist-background-video,
|
|
#yuukabot-background-video {
|
|
position: fixed;
|
|
right: 0%;
|
|
left: 0%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
z-index: -1;
|
|
object-fit: cover;
|
|
}
|
|
#top-line {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 115px; /* other tabs are spaced for this height */
|
|
box-sizing: border-box;
|
|
backdrop-filter: blur(2px);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items:center;
|
|
background-color: #1111;
|
|
padding: 10px;
|
|
}
|
|
|
|
#nav-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#nav-tabs button {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
border-bottom: 2px solid #5b6fde;
|
|
border-left: 2px solid #5b6fde;
|
|
border-right: 2px solid #5b6fde;
|
|
border-top: transparent;
|
|
color:#153dee;
|
|
font-size: large;
|
|
padding: 30px;
|
|
margin: 30px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
background-color: transparent;
|
|
transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.4s ease, color 0.4s ease;
|
|
}
|
|
|
|
#nav-tabs button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* calendar theme */
|
|
#top-line.cal-theme #nav-tabs button {
|
|
border-bottom-color: #FBC4CC;
|
|
border-left-color: #FBC4CC;
|
|
border-right-color: #FBC4CC;
|
|
color: #F4F2F5;
|
|
transition: border-color 0.4s ease, color 0.4s ease;
|
|
}
|
|
|
|
/* bucketlist theme */
|
|
#top-line.bucketlist-theme #nav-tabs button {
|
|
border-bottom-color: #B5B1C6;
|
|
border-left-color: #B5B1C6;
|
|
border-right-color: #B5B1C6;
|
|
color: #B84457;
|
|
transition: border-color 0.4s ease, color 0.4s ease;
|
|
}
|
|
|
|
/* status theme (VEGA colours) */
|
|
#top-line.status-theme {
|
|
background-color: #03070b;
|
|
border-bottom: 1px solid rgba(75, 187, 232, .28);
|
|
}
|
|
#top-line.status-theme #nav-tabs button {
|
|
border-bottom-color: #4bbbe8;
|
|
border-left-color: #4bbbe8;
|
|
border-right-color: #4bbbe8;
|
|
color: #a6e4ff;
|
|
transition: border-color 0.4s ease, color 0.4s ease;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
margin-top: 150px;
|
|
}
|
|
p {
|
|
font-size: 2rem;
|
|
color:rgb(0, 0, 0);
|
|
max-width: 800px;
|
|
margin: 0 auto 40px auto;
|
|
line-height: 1.5;
|
|
}
|
|
img {
|
|
display:block;
|
|
}
|
|
|
|
/* mobile only */
|
|
#nav-current,
|
|
#nav-hamburger {
|
|
display: none;
|
|
}
|
|
|
|
/* mobile, same setup as userevolt.app */
|
|
@media (max-width: 1300px) {
|
|
#nav-tabs button {
|
|
padding: 22px 18px;
|
|
margin: 30px 8px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
#top-line {
|
|
height: 56px;
|
|
padding: 0 8px 0 16px;
|
|
justify-content: space-between;
|
|
background: rgba(13, 17, 23, 0.75);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
#nav-current {
|
|
display: block;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
#nav-hamburger {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
width: 40px;
|
|
height: 40px;
|
|
flex-shrink: 0;
|
|
}
|
|
#nav-hamburger span {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: #fff;
|
|
border-radius: 1px;
|
|
transition: transform 0.25s, opacity 0.25s;
|
|
}
|
|
/* turns into an X */
|
|
#top-line.nav-open #nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
|
#top-line.nav-open #nav-hamburger span:nth-child(2) { opacity: 0; }
|
|
#top-line.nav-open #nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
|
|
|
#nav-tabs {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
background: rgba(13, 17, 23, 0.95);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
padding: 8px 0;
|
|
}
|
|
#top-line.nav-open #nav-tabs {
|
|
display: flex;
|
|
}
|
|
|
|
#nav-tabs button,
|
|
#top-line.cal-theme #nav-tabs button,
|
|
#top-line.bucketlist-theme #nav-tabs button,
|
|
#top-line.status-theme #nav-tabs button {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 12px 24px;
|
|
min-height: 44px;
|
|
border: none;
|
|
border-left: 3px solid transparent;
|
|
border-radius: 0;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 1rem;
|
|
text-align: left;
|
|
}
|
|
#nav-tabs button:hover {
|
|
text-decoration: none;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-left-color: #5b6fde;
|
|
}
|
|
#top-line.cal-theme #nav-tabs button:hover { border-left-color: #FBC4CC; }
|
|
#top-line.bucketlist-theme #nav-tabs button:hover { border-left-color: #B84457; }
|
|
#top-line.status-theme #nav-tabs button:hover { border-left-color: #4bbbe8; }
|
|
|
|
/* keep the video centered on tall screens */
|
|
#background-video,
|
|
#calendar-background-video,
|
|
#bucketlist-background-video,
|
|
#yuukabot-background-video {
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.tab-content { padding: 12px; }
|
|
|
|
h1 { font-size: 2.2rem; }
|
|
p { font-size: 1.2rem; }
|
|
}
|
|
|
|
/* status tab: VEGA page fills everything under the top line */
|
|
#status { padding: 0; }
|
|
#status-frame {
|
|
position: fixed;
|
|
top: 115px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100% - 115px);
|
|
border: 0;
|
|
background: #05080c;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
#status-frame {
|
|
top: 56px;
|
|
height: calc(100% - 56px);
|
|
}
|
|
}
|