@9

{{ define "main" }}
<style>

/* 弹窗样式 */
.custom-popup {
width: 500px;
padding: 20px;
background-color: #e9f3fb;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: ipx;
color: #8aa2d3;
margin: 0 auto;
}

.custom-popup input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}

.custom-popup button {
background-color: #34495e;
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.custom-popup button:hover {
background-color: #465b70; /* 鼠标悬停时的背景颜色 */
}

/* 密码错误提示样式 */
.error-message {
color: red;
font-size: 14px;
margin-top: 10px;
}

body[data-theme='dark'] .overlay {
background-color: #2f3136; /* 黑夜模式下的背景颜色 */
}

body[data-theme='dark'] .custom-popup {
background-color: #1e1e1e; /* 黑夜模式下的背景颜色 */
color: #8aa2d3; /* 黑夜模式下的文字颜色 */
}

body[data-theme='dark'] .custom-popup button {
background-color: #2c3e50; /* 黑夜模式下的按钮背景颜色 */
}

body[data-theme='dark'] .custom-popup button:hover {
background-color: #34495e; /* 黑夜模式下按钮悬停时的背景颜色 */
}
</style>

<div class="custom-popup">
<h2>请输入页面认证密钥</h2>
<input type="password" id="password" placeholder="密码">
<button id="submit-button">开启</button>
<div class="error-message" id="error-message"></div> <!-- 密码错误提示 -->
</div>

<script>
var passwordInput = document.getElementById('password');
var submitButton = document.getElementById('submit-button');
var errorMessage = document.getElementById('error-message');

passwordInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
submitButton.click(); // 模拟点击提交按钮
}
});

submitButton.addEventListener('click', function() {
var inputPassword = passwordInput.value;

if (inputPassword === '密码1) {
window.location.href = '/跳转页面';
} else if (inputPassword === '密码2') {
window.location.href = '跳转页面';
} else {
errorMessage.textContent = '认证失败！'; // 显示错误提示
}
});
</script>

{{ end }}

@9

{{ define "main" }}
<style>

/* 弹窗样式 */
.custom-popup {
width: 500px;
padding: 20px;
background-color: #e9f3fb;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: ipx;
color: #8aa2d3;
margin: 0 auto;
}

.custom-popup input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}

.custom-popup button {
background-color: #34495e;
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.custom-popup button:hover {
background-color: #465b70; /* 鼠标悬停时的背景颜色 */
}

/* 密码错误提示样式 */
.error-message {
color: red;
font-size: 14px;
margin-top: 10px;
}

body[data-theme='dark'] .overlay {
background-color: #2f3136; /* 黑夜模式下的背景颜色 */
}

body[data-theme='dark'] .custom-popup {
background-color: #1e1e1e; /* 黑夜模式下的背景颜色 */
color: #8aa2d3; /* 黑夜模式下的文字颜色 */
}

body[data-theme='dark'] .custom-popup button {
background-color: #2c3e50; /* 黑夜模式下的按钮背景颜色 */
}

body[data-theme='dark'] .custom-popup button:hover {
background-color: #34495e; /* 黑夜模式下按钮悬停时的背景颜色 */
}
</style>

<div class="custom-popup">
<h2>请输入页面认证密钥</h2>
<input type="password" id="password" placeholder="密码">
<button id="submit-button">开启</button>
<div class="error-message" id="error-message"></div> <!-- 密码错误提示 -->
</div>

<script>
var passwordInput = document.getElementById('password');
var submitButton = document.getElementById('submit-button');
var errorMessage = document.getElementById('error-message');

passwordInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
submitButton.click(); // 模拟点击提交按钮
}
});

submitButton.addEventListener('click', function() {
var inputPassword = passwordInput.value;

if (inputPassword === '密码1) {
window.location.href = '/跳转页面';
} else if (inputPassword === '密码2') {
window.location.href = '跳转页面';
} else {
errorMessage.textContent = '认证失败！'; // 显示错误提示
}
});
</script>

{{ end }}

Rosé pine (https://github.com/rose-pine/) but the background is transparent so it's the same as the terminal emulator background (#1e1e1e)

If anyone would like to make their gnome top bar closer match the default dark theme add this to ~/.themes/dark/gnome-shell and set in tweak tool #linux :

#panel {
background-color: #1e1e1e;
box-shadow: 0px 1px 0px #222;
}

@tomasino for now it's a script for the stylus add-on

Here is the code, might put it on github or figure out how to make it a proper theme later :). The column width code is also from elsewhere, have to attribute when proper publishing :)

@-moz-document domain("tilde.zone") {
/* Adjusts to remove horizontal scrollbar
   in smaller window size (e.g. 1280x1024) */
@media (min-width: 800px) {
    .wide .drawer {
        min-width: 280px;
    }
}

/* Adjusts to use up space in larger
   window size (e.g. 1920x1080)      */
@media (min-width: 1024px) {
    .columns-area > div {
        width: 25%;
        max-width: 25%;
    }
    .wide .drawer,
    .wide .column,
    .columns-area > div > .column,
    .columns-area > div > .mastodon-column-container > .column,
    .wide .columns-area:not(.columns-area--mobile) .column {
        max-width: 100%;
        flex: auto;
    }
}


.column,
.drawer {
    flex: 0 0 auto;
    padding: 20px 10px;
    padding-bottom: 0;
}

/*fix missing round corners*/
.drawer--header,
.drawer__pager {
    border-radius: 5px;
}

/* add dropshadows if content scrolls behind it*/
.column-header__wrapper:not(.column[data-column="notifications"] > .column-header__wrapper),
.notification__filter-bar {
    box-shadow: 0px 15px 11px -11px rgba(0, 0, 0, 1);
}
.notification__filter-bar {
    z-index: 1;
    /*the f?*/
}

html * {
    scrollbar-color: #2f2f2f rgba(0, 0, 0, .1);
    scrollbar-width: thin !important;
}


/* bright cards*/
.drawer--header,
.column-header__button,
.column-header__notif-cleaning-buttons button,
.column-header,
.column-header__back-button {
    background: #373737;
}

/* semi-bright*/
.column-subheading,
.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button,
.search__input,
.column-link {
    background: #242424;
}



/* dark cards*/
.drawer__inner,
.detailed-status__action-bar {
    background-color: #1e1e1e;
}

.detailed-status,
.status,
.notification {
    margin-bottom: 10px;
    margin-top: 10px;
    background-color: #1e1e1e;
    border: 1px solid #313131;
    border-radius: 3px;
}
.detailed-status {
    margin-bottom: 0;
    border-bottom: 0px;
}
.detailed-status__action-bar {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-top: 0;
}

.status.collapsed .status__content::after {
    background: linear-gradient(rgba(40, 44, 55, 0), #1e1e1e);
}

.status.collapsed .status__content {
    height: auto !important;
    max-height: 80px !important;
}


/* faint black*/
.item-list {
    background-color: transparent !important;
}

.column > .scrollable,
.drawer__inner__mastodon {
    background-color: #040404 !important;
}


/* blacked */
body {
    background-color: black !important;
}


/* lower visibility (logo too bright) */
.drawer__inner__mastodon {
    opacity: 0.6;
}

/*fixing blueish buttons*/
.icon-button,
.drawer--header > *,
.column-header__button,
.text-icon-button {
    /*color:#00abc6;*/
}

:root {
    --action-color: #4fe7ff;
}


/*ugly purple*/
.column-header.active .column-header__icon,
.text-icon-button.active,
.column-header__back-button,
.icon-button.active:not(.icon-button.bookmark-icon.active, .icon-button.star-icon.active) {
    color: var(--action-color) !important;
}


.compose-form__sensitive-button .checkbox.active {
    border-color: #6eff84 !important;
    background-color: var(--action-color) !important;
}

.button {
    background-color: #353535;
    color: var(--action-color);
}


/* the editor*/
.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea,
.spoiler-input input,
.privacy-dropdown.active .privacy-dropdown__value {
    background-color: black;
    color: white;
}
.compose-form__buttons-wrapper,
.compose-form__modifiers {

    background-color: #353535;
}



.button:disabled {
    background-color: #353535;
    color: grey;
}


.compose-form__upload__actions,
.compose-form__upload__warning {
    background-image: none;
    background-color: #00000082;
}
}