[Summary view] [Print] [Text view]

   1  joomla-alert {
   2    --jui-alert-min-width: 250px;
   3    --jui-alert-padding: .5rem 1.25rem;
   4    --jui-alert-margin: 0 0 1rem 0;
   5    --jui-alert-border: 1px solid transparent;
   6    --jui-alert-border-radius: .25rem;
   7    --jui-alert-animation-duration: .5s;
   8    --jui-alert-animation-timing-function: ease-in-out;
   9    --jui-alert-button-color-dark: #000;
  10    --jui-alert-button-color-light: #fff;
  11    --jui-alert-success-color: #234423;
  12    --jui-alert-success-background-color: #d9e6d9;
  13    --jui-alert-success-border-color: #cadcca;
  14    --jui-alert-success-link-color: #122212;
  15    --jui-alert-info-color: #0c5460;
  16    --jui-alert-info-background-color: #d1ecf1;
  17    --jui-alert-info-border-color: #bee5eb;
  18    --jui-alert-info-link-color: #062c33;
  19    --jui-alert-warning-color: #7d5a29;
  20    --jui-alert-warning-background-color: #fcefdc;
  21    --jui-alert-warning-border-color: #fbe8cd;
  22    --jui-alert-warning-link-color: #573e1c;
  23    --jui-alert-danger-color: #712b29;
  24    --jui-alert-danger-background-color: #f7dddc;
  25    --jui-alert-danger-border-color: #f4cfce;
  26    --jui-alert-danger-link-color: #4c1d1b;
  27    display: block;
  28    min-width: var(--jui-alert-min-width, 250px);
  29    padding: var(--jui-alert-padding, 0.5rem 1.25rem);
  30    margin: var(--jui-alert-margin, 0 0 1rem 0);
  31    border: var(--jui-alert-border, 1px solid transparent);
  32    border-radius: var(--jui-alert-border-radius, 0.25rem);
  33    -webkit-animation-duration: var(--jui-alert-animation-duration, 0.5s);
  34    animation-duration: var(--jui-alert-animation-duration, 0.5s);
  35    -webkit-animation-timing-function: var(--jui-alert-animation-timing-function, ease-in-out);
  36    animation-timing-function: var(--jui-alert-animation-timing-function, ease-in-out);
  37  }
  38  
  39  joomla-alert .joomla-alert--close {
  40    position: relative;
  41    top: -0.5rem;
  42    right: -1.25rem;
  43    float: right;
  44    padding: 0.2rem 1rem;
  45    font-size: 1.5rem;
  46    font-weight: 700;
  47    line-height: 1;
  48    color: var(--jui-alert-button-color-dark, #000);
  49    text-shadow: 0 1px 0 var(--jui-alert-button-color-light, #fff);
  50    background: transparent;
  51    border: 0;
  52    opacity: 0.5;
  53  }
  54  
  55  joomla-alert .joomla-alert--close:hover,
  56  joomla-alert .joomla-alert--close:focus {
  57    color: var(--jui-alert-button-color-dark, #000);
  58    text-decoration: none;
  59    cursor: pointer;
  60    opacity: 0.75;
  61  }
  62  
  63  joomla-alert[type=success] {
  64    color: var(--jui-alert-success-color, #234423);
  65    background-color: var(--jui-alert-success-background-color, #d9e6d9);
  66    border-color: var(--jui-alert-success-border-color, #cadcca);
  67  }
  68  
  69  joomla-alert[type=success] hr {
  70    border-top-color: var(--jui-alert-success-border-color, #cadcca);
  71  }
  72  
  73  joomla-alert[type=success] .alert-link {
  74    color: var(--jui-alert-success-link-color, #122212);
  75  }
  76  
  77  joomla-alert[type=info] {
  78    color: var(--jui-alert-info-color, #0c5460);
  79    background-color: var(--jui-alert-info-background-color, #d1ecf1);
  80    border-color: var(--jui-alert-info-border-color, #bee5eb);
  81  }
  82  
  83  joomla-alert[type=info] hr {
  84    border-top-color: var(--jui-alert-info-border-color, #bee5eb);
  85  }
  86  
  87  joomla-alert[type=info] .alert-link {
  88    color: var(--jui-alert-info-link-color, #062c33);
  89  }
  90  
  91  joomla-alert[type=warning] {
  92    color: var(--jui-alert-warning-color, #7d5a29);
  93    background-color: var(--jui-alert-warning-background-color, #fcefdc);
  94    border-color: var(--jui-alert-warning-border-color, #fbe8cd);
  95  }
  96  
  97  joomla-alert[type=warning] hr {
  98    border-top-color: var(--jui-alert-warning-border-color, #fbe8cd);
  99  }
 100  
 101  joomla-alert[type=warning] .alert-link {
 102    color: var(--jui-alert-warning-link-color, #573e1c);
 103  }
 104  
 105  joomla-alert[type=danger] {
 106    color: var(--jui-alert-danger-color, #712b29);
 107    background-color: var(--jui-alert-danger-background-color, #f7dddc);
 108    border-color: var(--jui-alert-danger-border-color, #f4cfce);
 109  }
 110  
 111  joomla-alert[type=danger] hr {
 112    border-top-color: var(--jui-alert-danger-border-color, #f4cfce);
 113  }
 114  
 115  joomla-alert[type=danger] .alert-link {
 116    color: var(--jui-alert-danger-link-color, #4c1d1b);
 117  }
 118  
 119  html[dir=rtl] joomla-alert .joomla-alert--close,
 120  html[dir=rtl] joomla-alert .joomla-alert-button--close {
 121    right: auto;
 122    left: -1.25rem;
 123    float: left;
 124  }
 125  
 126  @-webkit-keyframes joomla-alert-fade-in {
 127    0% {
 128      opacity: 0;
 129    }
 130  }
 131  @keyframes joomla-alert-fade-in {
 132    0% {
 133      opacity: 0;
 134    }
 135  }
 136  @-webkit-keyframes joomla-alert-fade-out {
 137    0% {
 138      opacity: 1;
 139    }
 140    100% {
 141      opacity: 0;
 142    }
 143  }
 144  @keyframes joomla-alert-fade-out {
 145    0% {
 146      opacity: 1;
 147    }
 148    100% {
 149      opacity: 0;
 150    }
 151  }
 152  @media (prefers-reduced-motion: reduce) {
 153    joomla-alert {
 154      -webkit-animation-duration: 1ms !important;
 155      animation-duration: 1ms !important;
 156    }
 157  }
 158  #system-message-container joomla-alert {
 159    position: relative;
 160    display: flex;
 161    width: 100%;
 162    min-width: 16rem;
 163    padding: 0;
 164    margin-bottom: 1rem;
 165    color: var(--alert-accent-color, var(--template-bg-dark));
 166    background-color: var(--alert-bg-color, var(--white));
 167    border: 1px solid var(--alert-accent-color, var(--template-bg-dark));
 168    border-radius: 0.25rem;
 169    transition: opacity 0.15s linear;
 170  }
 171  #system-message-container joomla-alert .alert-heading {
 172    display: flex;
 173    flex-direction: column;
 174    justify-content: center;
 175    padding: 0.8rem;
 176    color: var(--white);
 177    background: var(--alert-accent-color, var(--template-bg-dark));
 178    align-content: center;
 179  }
 180  #system-message-container joomla-alert .alert-heading .message::before,
 181  #system-message-container joomla-alert .alert-heading .success::before {
 182    display: inline-block;
 183    width: 1em;
 184    height: 1em;
 185    content: "";
 186    background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
 187    background-size: 100%;
 188  }
 189  #system-message-container joomla-alert .alert-heading .notice::before,
 190  #system-message-container joomla-alert .alert-heading .info::before {
 191    display: inline-block;
 192    width: 1em;
 193    height: 1em;
 194    content: "";
 195    background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
 196    background-size: 100%;
 197  }
 198  #system-message-container joomla-alert .alert-heading .warning::before {
 199    display: inline-block;
 200    width: 1em;
 201    height: 1em;
 202    content: "";
 203    background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
 204    background-size: 100%;
 205  }
 206  #system-message-container joomla-alert .alert-heading .error::before,
 207  #system-message-container joomla-alert .alert-heading .danger::before {
 208    display: inline-block;
 209    width: 1em;
 210    height: 1em;
 211    content: "";
 212    background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
 213    background-size: 100%;
 214  }
 215  #system-message-container joomla-alert .alert-wrapper {
 216    width: 100%;
 217  }
 218  #system-message-container joomla-alert .alert-link {
 219    color: var(--template-link-color);
 220    text-decoration: underline;
 221  }
 222  #system-message-container joomla-alert[type=success], #system-message-container joomla-alert[type=message] {
 223    --alert-accent-color: #457d54;
 224    --alert-bg-color: #f2f8f4;
 225  }
 226  #system-message-container joomla-alert[type=info], #system-message-container joomla-alert[type=notice] {
 227    --alert-accent-color: var(--template-bg-dark-70);
 228    --alert-bg-color: var(--white);
 229  }
 230  #system-message-container joomla-alert[type=warning] {
 231    color: #996900;
 232    --alert-accent-color: #ffb514;
 233    --alert-bg-color: #fffcf4;
 234  }
 235  #system-message-container joomla-alert[type=warning] .joomla-alert--close {
 236    color: #996900;
 237  }
 238  #system-message-container joomla-alert[type=error], #system-message-container joomla-alert[type=danger] {
 239    --alert-accent-color: #c52827;
 240    --alert-bg-color: #fef8f8;
 241  }
 242  #system-message-container joomla-alert .joomla-alert--close,
 243  #system-message-container joomla-alert .joomla-alert-button--close {
 244    position: absolute;
 245    top: 0;
 246    inset-inline-end: 0;
 247    padding: 0.75rem 0.8rem;
 248    font-size: 2rem;
 249    line-height: 1rem;
 250    color: var(--alert-accent-color);
 251    background: none;
 252    border: 0;
 253    opacity: 1;
 254  }
 255  #system-message-container joomla-alert .joomla-alert--close:hover, #system-message-container joomla-alert .joomla-alert--close:focus,
 256  #system-message-container joomla-alert .joomla-alert-button--close:hover,
 257  #system-message-container joomla-alert .joomla-alert-button--close:focus {
 258    text-decoration: none;
 259    cursor: pointer;
 260    opacity: 0.75;
 261  }
 262  #system-message-container joomla-alert div {
 263    font-size: 1rem;
 264  }
 265  #system-message-container joomla-alert div .alert-message {
 266    padding: 0.15rem 0.3rem;
 267    -webkit-padding-end: 2rem;
 268            padding-inline-end: 2rem;
 269    margin: 0.5rem;
 270  }
 271  #system-message-container joomla-alert div .alert-message:not(:first-of-type) {
 272    border-top: 1px solid var(--alert-accent-color);
 273  }