wcfsetup/install/files/style/ui/alert.scss

   1 .error,
   2 .info,
   3 .success,
   4 .warning {
   5         border-left: 5px solid transparent;
   6         margin-top: 20px;
   7
   8         @include screen-md-up {
   9                 padding: 10px 20px;
  10         }
  11
  12         @include screen-sm-down {
  13                 padding: 10px;
  14         }
  15
  16         a {
  17                 @include wcfFontBold;
  18
  19                 &:hover {
  20                         text-decoration: underline;
  21                 }
  22         }
  23 }
  24
  25 .error {
  26         background-color: $wcfStatusErrorBackground;
  27         border-color: $wcfStatusErrorBorder;
  28         color: $wcfStatusErrorText;
  29
  30         a {
  31                 color: $wcfStatusErrorLink;
  32
  33                 &:hover {
  34                         color: $wcfStatusErrorLinkActive;
  35                 }
  36         }
  37 }
  38
  39 .info {
  40         background-color: $wcfStatusInfoBackground;
  41         border-color: $wcfStatusInfoBorder;
  42         color: $wcfStatusInfoText;
  43
  44         a {
  45                 color: $wcfStatusInfoLink;
  46
  47                 &:hover {
  48                         color: $wcfStatusInfoLinkActive;
  49                 }
  50         }
  51 }
  52
  53 .success {
  54         background-color: $wcfStatusSuccessBackground;
  55         border-color: $wcfStatusSuccessBorder;
  56         color: $wcfStatusSuccessText;
  57
  58         a {
  59                 color: $wcfStatusSuccessLink;
  60
  61                 &:hover {
  62                         color: $wcfStatusSuccessLinkActive;
  63                 }
  64         }
  65 }
  66
  67 .warning {
  68         background-color: $wcfStatusWarningBackground;
  69         border-color: $wcfStatusWarningBorder;
  70         color: $wcfStatusWarningText;
  71
  72         a {
  73                 color: $wcfStatusWarningLink;
  74
  75                 &:hover {
  76                         color: $wcfStatusWarningLinkActive;
  77                 }
  78         }
  79 }
  80
  81 .innerError,
  82 .innerInfo,
  83 .innerSuccess,
  84 .innerWarning {
  85         display: table;
  86         line-height: 1.5;
  87         margin-top: 8px;
  88         padding: 5px 10px;
  89         position: relative;
  90
  91         /* pointer */
  92         &::before {
  93                 border: 6px solid transparent;
  94                 border-top-width: 0;
  95                 content: "";
  96                 display: inline-block;
  97                 left: 10px;
  98                 position: absolute;
  99                 top: -6px;
 100                 z-index: 99;
 101         }
 102 }
 103
 104 /* inline messages */
 105 .innerError {
 106         background-color: rgb(242, 222, 222);
 107         color: rgb(169, 68, 66);
 108
 109         &::before {
 110                 border-bottom-color: rgb(242, 222, 222);
 111         }
 112
 113         a {
 114                 color: $wcfStatusErrorLink;
 115
 116                 &:hover {
 117                         color: $wcfStatusErrorLinkActive;
 118                 }
 119         }
 120 }
 121 .innerSuccess {
 122         background-color: $wcfStatusSuccessBackground;
 123         color: $wcfStatusSuccessText;
 124
 125         &::before {
 126                 border-bottom-color: $wcfStatusSuccessBackground;
 127         }
 128
 129         a {
 130                 color: $wcfStatusSuccessLink;
 131
 132                 &:hover {
 133                         color: $wcfStatusSuccessLinkActive;
 134                 }
 135         }
 136 }
 137 .innerWarning {
 138         background-color: $wcfStatusWarningBackground;
 139         color: $wcfStatusWarningText;
 140
 141         &::before {
 142                 border-bottom-color: $wcfStatusWarningBackground;
 143         }
 144
 145         a {
 146                 color: $wcfStatusWarningLink;
 147
 148                 &:hover {
 149                         color: $wcfStatusWarningLinkActive;
 150                 }
 151         }
 152 }
 153
 154 /* sticky footer notices */
 155 .pageFooterStickyNotice {
 156         bottom: 0;
 157         left: 0;
 158         right: 0;
 159         position: fixed;
 160         z-index: 600;
 161
 162         .error,
 163         .info,
 164         .success,
 165         .warning {
 166                 border-left-width: 0;
 167                 border-top-width: 1px;
 168                 border-top-style: solid;
 169                 margin-top: 0;
 170                 padding: 10px 0;
 171
 172                 @include screen-sm-down {
 173                         @include wcfFontSmall;
 174                 }
 175         }
 176
 177         .cookiePolicyNotice {
 178                 .layoutBoundary {
 179                         display: flex;
 180                         align-items: center;
 181
 182                         @include screen-sm-down {
 183                                 flex-wrap: wrap;
 184                         }
 185                 }
 186
 187                 .cookiePolicyNoticeText {
 188                         flex: 1 1 auto;
 189
 190                         @include screen-sm-down {
 191                                 flex-basis: 100%;
 192                                 margin-bottom: 5px;
 193                         }
 194                 }
 195
 196                 .cookiePolicyNoticeMoreInformation,
 197                 .cookiePolicyNoticeDismiss {
 198                         flex: 0 0 auto;
 199                 }
 200
 201                 .cookiePolicyNoticeDismiss {
 202                         margin-left: 5px;
 203                 }
 204         }
 205 }
 206
 207 /* inline infos */
 208 .innerInfo {
 209         background-color: $wcfStatusInfoBackground;
 210         color: $wcfStatusInfoText;
 211
 212         &::before {
 213                 border-bottom-color: $wcfStatusInfoBackground;
 214         }
 215
 216         a {
 217                 color: $wcfStatusInfoLink;
 218
 219                 &:hover {
 220                         color: $wcfStatusInfoLinkActive;
 221                 }
 222         }
 223 }
 224
 225 /* dismiss icon */
 226 .noticeDismissible > .jsDismissNoticeButton {
 227         float: right;
 228
 229         @include screen-md-down {
 230                 font-size: 18px;
 231                 height: 24px;
 232                 line-height: 24px;
 233                 width: 24px;
 234         }
 235 }
 236
 237 .userExceptionMessage {
 238         align-self: center;
 239 }