61 lines
2.1 KiB
HTML
61 lines
2.1 KiB
HTML
<div class="tf_right_controls">
|
|
<button class="tf_signup_btn" onclick="openSignupModal()">Sign Up</button>
|
|
<button class="tf_login_btn" onclick="openLoginModal()">Login</button>
|
|
<button class="tf_theme_toggle" @click="document.documentElement.classList.toggle('light-theme')">
|
|
<svg class="theme-icon light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
<svg class="theme-icon dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<style>
|
|
.tf_right_controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.tf_signup_btn {
|
|
background: transparent;
|
|
border: 0.5px solid var(--text-color);
|
|
color: var(--text-color);
|
|
padding: 0 1rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
margin-right: 0.5rem;
|
|
height: 28px;
|
|
min-width: 80px;
|
|
line-height: 28px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tf_signup_btn:hover {
|
|
background: var(--text-color);
|
|
color: var(--body-background);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px #0000001A;
|
|
}
|
|
|
|
.tf_login_btn {
|
|
height: 28px;
|
|
margin-right: 0.5rem;
|
|
min-width: 80px;
|
|
line-height: 28px;
|
|
padding: 0 1rem;
|
|
}
|
|
</style>
|