]> git.r.bdr.sh - rbdr/forum/blob - src/components/error_block/error_block.svelte
b85a2ea196af579dc4dae373badf0c063dda5544
[rbdr/forum] / src / components / error_block / error_block.svelte
1 <script>
2 import { _ } from 'svelte-i18n';
3 export let message;
4
5 import { blink } from '$/animations/blink';
6 </script>
7
8 <div transition:blink>
9 <h2>{$_('error.generic.title')}</h2>
10 <p>{message || $_('error.generic.message')}</p>
11 </div>
12
13 <style>
14 div {
15 background: repeating-linear-gradient( -45deg, red, red 5px, black 5px, black 10px );
16 border: 5px solid red;
17 color: yellow;
18 font-family: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'MS ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
19 margin: 0 10px 0 0;
20 text-align: center;
21 overflow: hidden;
22 }
23
24 h2, p {
25 background-color: black;
26 font-size: 1em;
27 }
28
29 h2 {
30 text-transform: uppercase;
31 margin: 100px 5px 10px;
32 }
33
34 p {
35 margin: 10px 5px 100px;
36 }
37 </style>
38