git.r.bdr.sh - rbdr/forum/blob - 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 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