git.r.bdr.sh - rbdr/forum/blob - src/lib/components/error_block/error_block.svelte

   1 <script lang="ts">
   2         import { _ } from 'svelte-i18n';
   3         export let message = null;
   4
   5         import { blink } from '$lib/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', '游ゴシック', '游ゴシック体',
  19                         YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3,
  20                         'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
  21                 margin: 0 10px 0 0;
  22                 text-align: center;
  23                 overflow: hidden;
  24         }
  25
  26         h2,
  27         p {
  28                 background-color: black;
  29                 font-size: 1em;
  30         }
  31
  32         h2 {
  33                 text-transform: uppercase;
  34                 margin: 100px 5px 10px;
  35         }
  36
  37         p {
  38                 margin: 10px 5px 100px;
  39         }
  40 </style>