MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

$primary-color: #4d4dff;
$secondary-color: #666666;
$danger-color: #ff3838;
$warning-color: #ffba00;
$success-color: #2ec946;

main {
  padding: 40px;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alert {
  width: 512px;
  padding: 16px;
  margin: 8px;
  max-width: 90%;
}

@mixin alert-1($color) {
  background-color: rgba($color, 0.05);
  
  .alert-title {
    color: $color;
  }
}

@mixin alert-2($color) {
  border-left: 4px solid $color;
  background-color: rgba($color, 0.05);
  
  .alert-title {
    color: $color;
  }
}

@mixin alert-3($color) {
  border: 1px solid lighten($color, 25%);
  border-radius: 8px;
  background-color: rgba($color, 0.05);
  
  .alert-title {
    color: $color;
  }
}

.alert-1-primary {
  @include alert-1($primary-color);
}

.alert-1-warning {
  @include alert-1($warning-color);
}

.alert-2-success {
  @include alert-2($success-color);
}

.alert-2-secondary {
  @include alert-2($secondary-color);
}

.alert-3-primary {
  @include alert-3($primary-color);
}

.alert-3-danger {
  @include alert-3($danger-color);
}

.alert-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
}

.alert-content {
  margin: 0;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  color: #555555;
}