new design
This commit is contained in:
Xeltica
parent
ee6e030b22
commit
dc2fffadb2
9 changed files with 234 additions and 175 deletions
|
|
@ -19,15 +19,15 @@ html
|
|||
link(rel='stylesheet' href='/assets/style.css')
|
||||
block style
|
||||
body
|
||||
.xd-main
|
||||
h1: a(href="/") みす廃あらーと
|
||||
.background
|
||||
.xd-container.xd-vstack
|
||||
block content
|
||||
footer.xd-footer.xd-container
|
||||
footer
|
||||
.xd-card
|
||||
a(href="/terms") 利用規約
|
||||
| ・
|
||||
+exta(href="https://github.com/Xeltica/misshaialert") リポジトリ
|
||||
p (C)2020 Xeltica -
|
||||
p (C)2020-2021 Xeltica -
|
||||
a(href="/about") version #{version}
|
||||
block footer
|
||||
block script
|
||||
script(defer src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js')
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@ mixin exta()
|
|||
mixin serverInfo()
|
||||
.xd-card
|
||||
.header
|
||||
h1.title
|
||||
i.fas.fa-info-circle
|
||||
| サービスの情報
|
||||
h1.title サービスの情報
|
||||
.body
|
||||
dl
|
||||
dt
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
extends _base
|
||||
|
||||
block content
|
||||
.xd-card
|
||||
h1: a(href="/") みす廃あらーと
|
||||
section
|
||||
h2 バージョン !{version}
|
||||
ul
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
extends _base
|
||||
|
||||
block content
|
||||
section
|
||||
h1: a(href="/") みす廃あらーと
|
||||
section.xd-card
|
||||
h2 エラー
|
||||
p= error
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
extends _base
|
||||
|
||||
block content
|
||||
.xd-card
|
||||
h1: a(href="/") みす廃あらーと
|
||||
h2 マイページ
|
||||
case from
|
||||
when "updateSettings"
|
||||
|
|
@ -10,14 +12,12 @@ block content
|
|||
default
|
||||
p おかえりなさい、@!{ user.username }@!{ user.host } さん。
|
||||
|
||||
section#scores
|
||||
.xd-cards.center
|
||||
section#scores.xd-vstack
|
||||
.xd-hstack
|
||||
+serverInfo()
|
||||
.xd-card
|
||||
.header
|
||||
h1.title
|
||||
i.fas.fa-chart-area
|
||||
| あなたの廃人度は…
|
||||
h1.title みす廃データ
|
||||
.body
|
||||
table
|
||||
thead
|
||||
|
|
@ -41,9 +41,7 @@ block content
|
|||
|
||||
section.xd-card#settings
|
||||
.header
|
||||
h1.title
|
||||
i.fas.fa-cog
|
||||
| 設定
|
||||
h1.title 設定
|
||||
.body
|
||||
.xd-alert.danger.mb-2 スコア通知方法に「Misskey に通知」を選んでいる場合、Groundpolis v3 および Misskey v12 の最新版以外では動作しません。めいすきーや古いバージョンをお使いの方は、「自動的にノートを投稿」をお使いください。
|
||||
form(method="post", action="/update-settings")
|
||||
|
|
@ -58,9 +56,7 @@ block content
|
|||
|
||||
section.xd-card#settings
|
||||
.header
|
||||
h1.title
|
||||
i.fas.fa-sliders-h
|
||||
| 操作
|
||||
h1.title 操作
|
||||
.body
|
||||
form.mb-2(action="/send", method="post"): button#send(style="display: inline-block") アラートをテスト送信
|
||||
form.mb-2(action="/logout", method="post"): button.danger#logout(style="display: inline-block") ログアウト
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
extends _base
|
||||
|
||||
block content
|
||||
.xd-card
|
||||
h1: a(href="/") みす廃あらーと
|
||||
section
|
||||
h2 利用規約
|
||||
ul
|
||||
|
|
|
|||
|
|
@ -1,36 +1,32 @@
|
|||
extends _base
|
||||
|
||||
block content
|
||||
section
|
||||
case from
|
||||
when 'logout'
|
||||
p: strong ログアウトしました。
|
||||
.xd-card: p: strong ログアウトしました。
|
||||
when 'optout'
|
||||
p: strong 連携を解除しました。
|
||||
.xd-card: p: strong 連携を解除しました。
|
||||
.xd-card
|
||||
h1: a(href="/") みす廃あらーと
|
||||
h2= welcomeMessage
|
||||
.xd-hstack
|
||||
section.xd-card
|
||||
p Misskey は楽しいものです。気がついたら1日中入り浸っていることも多いでしょう。
|
||||
strong みす廃あらーと
|
||||
| をあなたの Misskey アカウントにインストールして、今日のあなたの Misskey 活動を把握しましょう。
|
||||
p さあ、今すぐみす廃アラートをインストールして、今日のあなたの Misskey 活動を把握しよう。
|
||||
section.xd-card
|
||||
p 始める前に、
|
||||
a(href="/terms") 利用規約
|
||||
| を読んでください。
|
||||
strong ログインボタンを押した時点で、規約に従ったものとみなします。
|
||||
form(action="/login", method="get")
|
||||
.xd-inputs
|
||||
input.xd-input(type="text" placeholder="ホスト名(例: misskey.io)" name="host" required)
|
||||
input.xd-button.primary(type="submit", value="ログイン")
|
||||
p Misskey 以外のソフトウェアには対応していません。マストドンユーザーは
|
||||
+exta(href="https://donhaialert.herokuapp.com/") ドン廃あらーと
|
||||
| をお使いください。
|
||||
|
||||
section
|
||||
.xd-cards.center
|
||||
section.xd-hstack
|
||||
+serverInfo()
|
||||
.xd-card
|
||||
.header
|
||||
h1.title
|
||||
i.fas.fa-phone-alt
|
||||
| 開発者
|
||||
h1.title 開発者
|
||||
.body
|
||||
p 何か困ったことがあったら、以下のアカウントにメッセージを送ってください。
|
||||
ul
|
||||
|
|
@ -40,12 +36,10 @@ block content
|
|||
li: +exta(href="mailto:xeltica@gmail.com") xeltica@gmail.com
|
||||
.xd-card
|
||||
.header
|
||||
h1.title
|
||||
i.fas.fa-hashtag
|
||||
| タイムライン
|
||||
h1.title タイムライン
|
||||
.body
|
||||
p 近いうちに、ここで #misshaialert タグのタイムラインを表示します。まだ工事中です
|
||||
|
||||
<a href="https://github.com/xeltica/misshaialert" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
|
||||
block script
|
||||
script.
|
||||
|
|
|
|||
|
|
@ -1,55 +1,46 @@
|
|||
@import '_colors';
|
||||
|
||||
/*
|
||||
Xeltica Design CSS Framework
|
||||
(C)2020 Xeltica
|
||||
*/
|
||||
|
||||
$primary: rgb(134, 179, 0);
|
||||
$primary-light: lighten($primary, 5%);
|
||||
$primary-dark: darken($primary, 5%);
|
||||
$primary-fg: $md-white;
|
||||
$bg: $md-white;
|
||||
$bg-pale-1: darken($bg, 5%);
|
||||
$bg-pale-2: darken($bg-pale-1, 5%);
|
||||
$fg: $md-black;
|
||||
$card-bg: $bg;
|
||||
$card-header: $bg-pale-1;
|
||||
$card-footer: $bg-pale-1;
|
||||
$card-fg: $fg;
|
||||
$divider: rgba($fg, 0.25);
|
||||
$table-bg-header: $bg-pale-2;
|
||||
$table-bg-odd: $bg-pale-1;
|
||||
$table-bg-even: $bg;
|
||||
$alert-bg: $bg-pale-1;
|
||||
$alert-border: $divider;
|
||||
$alert-fg: $fg;
|
||||
$alert-bg-danger: $md-red-300;
|
||||
$alert-border-danger: $md-red-900;
|
||||
$alert-fg-danger: $md-red-50;
|
||||
|
||||
$barSize: 64px;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
html {
|
||||
$primary: rgb(134, 179, 0);
|
||||
$fg: rgba(255, 255, 255, 0.8);
|
||||
$bg: rgba(24, 24, 24, 0.8);
|
||||
$overlay: transparentize($bg, 0.5);
|
||||
$danger: #c72c2c;
|
||||
font-size: 18px;
|
||||
@media screen and (max-width: 640px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
--primary: #{$primary};
|
||||
--primary-light: #{lighten($primary, 5%)};
|
||||
--primary-dark: #{darken($primary, 5%)};
|
||||
--primary-fg: white;
|
||||
--bg: #{$bg};
|
||||
--bg-pale-1: #{darken($bg, 5%)};
|
||||
--bg-pale-2: #{darken($bg, 10%)};
|
||||
--overlay: #{$overlay};
|
||||
--fg: #{$fg};
|
||||
// --divider: rgba(70, 70, 70, 0.25);
|
||||
--radius: 0px;
|
||||
--margin: 16px;
|
||||
|
||||
--bg-danger: #{$danger};
|
||||
--fg-danger: white;
|
||||
--divider-danger: #400e0e;
|
||||
--bg-danger-lighten: #{lighten($danger, 5%)};
|
||||
--bg-danger-darken: #{darken($danger, 5%)};
|
||||
}
|
||||
|
||||
body {
|
||||
background: $bg;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
color: $fg;
|
||||
}
|
||||
|
||||
section:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
|
@ -80,15 +71,15 @@ h6 { font-size: 1.05rem; }
|
|||
|
||||
input.xd-input {
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
color: $fg;
|
||||
border-radius: var(--radius);
|
||||
color: var(--fg);
|
||||
background: transparent;
|
||||
border: 1px solid $fg;
|
||||
border: 1px solid var(--fg);
|
||||
padding: 2px 8px;
|
||||
font-size: 1rem;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -114,22 +105,25 @@ p {
|
|||
}
|
||||
|
||||
.xd-main {
|
||||
background: $bg;
|
||||
background: var(--bg);
|
||||
padding: 32px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid $divider;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--divider);
|
||||
max-width: 960px;
|
||||
margin: 24px auto;
|
||||
backdrop-filter: blur(32px) saturate(4);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(4);
|
||||
box-shadow: 0 0 16px black;
|
||||
}
|
||||
|
||||
button, .xd-button {
|
||||
display: flex;
|
||||
color: $fg;
|
||||
background: $bg;
|
||||
border: 1px solid $bg-pale-1;
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--bg-pale-1);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
padding: 2px 8px;
|
||||
|
|
@ -137,33 +131,33 @@ button, .xd-button {
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $bg-pale-1;
|
||||
background: var(--bg-pale-1);
|
||||
}
|
||||
&:active {
|
||||
background: $bg-pale-2;
|
||||
background: var(--bg-pale-2);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: $primary;
|
||||
color: $primary-fg;
|
||||
border-color: $primary-dark;
|
||||
background: var(--primary);
|
||||
color: var(--primary-fg);
|
||||
border-color: var(--primary-dark);
|
||||
&:hover {
|
||||
background: $primary-light;
|
||||
background: var(--primary-light);
|
||||
}
|
||||
&:active {
|
||||
background: $primary-dark;
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: $md-red-700;
|
||||
color: $md-white;
|
||||
border-color: $md-red-900;
|
||||
background: var(--bg-danger);
|
||||
color: white;
|
||||
border-color: var(--divider-danger);
|
||||
&:hover {
|
||||
background: $md-red-500;
|
||||
background: var(--bg-danger-lighten);
|
||||
}
|
||||
&:active {
|
||||
background: $md-red-800;
|
||||
background: var(--bg-danger-lighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -176,28 +170,25 @@ button, .xd-button {
|
|||
|
||||
a, .link {
|
||||
text-decoration: none;
|
||||
color: $primary;
|
||||
border-bottom: 1px solid $primary;
|
||||
color: var(--primary);
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid $divider;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--divider);
|
||||
border-radius: var(--radius);
|
||||
background: var(--overlay);
|
||||
width: 100%;
|
||||
|
||||
> thead {
|
||||
background: $table-bg-header;
|
||||
background: var(--overlay);
|
||||
margin-bottom: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
> tbody > tr {
|
||||
background: $table-bg-even;
|
||||
&:nth-child(odd) {
|
||||
background: $table-bg-odd;
|
||||
}
|
||||
border-bottom: 1px solid var(--overlay);
|
||||
}
|
||||
th, td {
|
||||
padding: 4px 8px;
|
||||
|
|
@ -205,23 +196,54 @@ table {
|
|||
}
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
border-radius: var(--radius);
|
||||
color: #0f0;
|
||||
background: #000;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.xd-container {
|
||||
padding: 32px;
|
||||
max-width: 960px;
|
||||
margin: 64px auto;
|
||||
}
|
||||
|
||||
.xd-hstack {
|
||||
display: flex;
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--margin);
|
||||
}
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
> * {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xd-vstack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *:not(:last-child) {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
}
|
||||
|
||||
.xd-card {
|
||||
background: $card-bg;
|
||||
color: $card-fg;
|
||||
border: 1px solid $divider;
|
||||
border-radius: 2px;
|
||||
background: var(--bg);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--divider);
|
||||
// backdrop-filter: blur(32px) saturate(4);
|
||||
// -webkit-backdrop-filter: blur(32px) saturate(4);
|
||||
box-shadow: 0 0 16px black;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
h1 { font-size: 2rem; }
|
||||
h2 { font-size: 1.5rem; }
|
||||
h3 { font-size: 1.3rem; }
|
||||
|
|
@ -244,18 +266,19 @@ code {
|
|||
}
|
||||
|
||||
> .header {
|
||||
background: $card-header;
|
||||
border-bottom: 1px solid $divider;
|
||||
> h1.title {
|
||||
font-size: 1rem;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
> .footer {
|
||||
background: $card-footer;
|
||||
border-top: 1px solid $divider;
|
||||
background: var(--bg-pale-1);
|
||||
border-top: 1px solid var(--divider);
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -422,17 +445,17 @@ img, .xd-responsive {
|
|||
|
||||
.xd-alert {
|
||||
padding: 8px 16px;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--radius);
|
||||
width: 100%;
|
||||
background: $alert-bg;
|
||||
border: 1px solid $alert-border;
|
||||
color: $alert-fg;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--bg-pale-2);
|
||||
color: var(--fg);
|
||||
font-size: 75%;
|
||||
|
||||
&.danger {
|
||||
background: $alert-bg-danger;
|
||||
border: 1px solid $alert-border-danger;
|
||||
color: $alert-fg-danger;
|
||||
background: var(--bg-danger);
|
||||
border: 1px solid var(--divider-danger);
|
||||
color: var(--fg-danger);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,52 @@
|
|||
@import '_xeltica-design.scss';
|
||||
|
||||
body {
|
||||
background: $bg-pale-1;
|
||||
background: var(--bg-pale-1);
|
||||
}
|
||||
|
||||
h1> a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: fixed;
|
||||
z-index: -50;
|
||||
inset: 0;
|
||||
|
||||
background: radial-gradient(
|
||||
farthest-corner at 0 0,
|
||||
#86b300 0%,
|
||||
#86b300 40%,
|
||||
#6900ba 90%,
|
||||
#6900ba 100%
|
||||
);
|
||||
}
|
||||
|
||||
.background:before {
|
||||
z-index: -200;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
60vw at 150vh 50vh,
|
||||
#ff9900 0%,
|
||||
#ff9900 20%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.background:after {
|
||||
z-index: -100;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
50vw at 120vw 120vh,
|
||||
rgba(0, 30, 190, 1) 0%,
|
||||
rgba(0, 30, 190, 0) 100%
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
details > summary {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue