MediaWiki:Common.css: Difference between revisions

From 7019
(Created page with "→‎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...")
 
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* 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 {
.alert {
   width: 512px;
   width: 100%;
   padding: 16px;
   padding: 12px 16px;
   margin: 8px;
  border-radius: 4px;
   max-width: 90%;
  border-style: solid;
  border-width: 1px;
   margin-bottom: 12px;
   font-size: 16px;
}
}


@mixin alert-1($color) {
.alert.alert-success {
   background-color: rgba($color, 0.05);
   background-color: rgba(227, 253, 235, 1);
    
   border-color: rgba(38, 179, 3, 1);
  .alert-title {
   color: rgba(60, 118, 61, 1);
    color: $color;
   }
}
}


@mixin alert-2($color) {
.alert.alert-info {
   border-left: 4px solid $color;
   background-color: rgba(217, 237, 247, 1);
   background-color: rgba($color, 0.05);
   color: rgba(49, 112, 143, 1);
    
   border-color: rgba(126, 182, 193, 1);
  .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 {
.alert.alert-warning {
   margin-top: 0;
   background-color: rgba(252, 248, 227, 1);
   margin-bottom: 8px;
   border-color: rgba(177, 161, 129, 1);
   font-size: 18px;
   color: rgba(138, 109, 59, 1);
  font-family: 'Poppins', sans-serif;
}
}


.alert-content {
.alert.alert-danger {
   margin: 0;
   background-color: rgba(248, 215, 218, 1);
  font-size: 14px;
   border-color: rgba(220, 53, 69, 1);
   font-family: 'Open Sans', sans-serif;
   color: rgba(114, 28, 36,1);
   color: #555555;
}
}

Latest revision as of 20:36, 6 March 2024

.alert {
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 12px;
  font-size: 16px;
}

.alert.alert-success {
  background-color: rgba(227, 253, 235, 1);
  border-color: rgba(38, 179, 3, 1);
  color: rgba(60, 118, 61, 1);
}

.alert.alert-info {
  background-color: rgba(217, 237, 247, 1);
  color: rgba(49, 112, 143, 1);
  border-color: rgba(126, 182, 193, 1);
}


.alert.alert-warning {
  background-color: rgba(252, 248, 227, 1);
  border-color: rgba(177, 161, 129, 1);
  color: rgba(138, 109, 59, 1);
}

.alert.alert-danger {
  background-color: rgba(248, 215, 218, 1);
  border-color: rgba(220, 53, 69, 1);
  color: rgba(114, 28, 36,1);
}