Difference between revisions of "User:Samburkeottawa"

From wiki
Jump to navigation Jump to search
m
Line 2: Line 2:
 
   <p><span class="header_icon" role="presentation" aria-hidden="true">[[File:Info.png|25px|middle|link=]]</span> Test.</p>
 
   <p><span class="header_icon" role="presentation" aria-hidden="true">[[File:Info.png|25px|middle|link=]]</span> Test.</p>
 
</div>
 
</div>
 +
 +
 +
<div class="square_box"></div>
 +
        <div class="alert fade alert-simple alert-primary alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show" role="alert" data-brk-library="component__alert">
 +
          <button type="button" class="close font__size-18" data-dismiss="alert">
 +
<span  aria-hidden="true"><i class="fa fa-times alertprimary"></i></span>
 +
<span class="sr-only">Close</span>
 +
</button>
 +
 +
          <i class="start-icon fa fa-thumbs-up faa-bounce animated"></i>
 +
          <strong class="font__weight-semibold">Well done!</strong> You successfullyread this important.
 +
        </div>
  
  
 
{{#css:
 
{{#css:
  
.alert {
+
body
    padding: 10px;
+
{
    margin-bottom: 23px;
+
  background: #000e29;
    border: 1px solid transparent;
 
 
}
 
}
  
.alert, .label {
+
.alert>.start-icon {
     border-radius: 0;
+
     margin-right: 0;
     border-style: solid;
+
     min-width: 20px;
     border-width: 0 0 0 4px;
+
     text-align: center;
 
}
 
}
  
 +
.alert>.start-icon {
 +
    margin-right: 5px;
 +
}
  
.alert-info {
+
.alert-simple.alert-success
     background: #d7faff;
+
{
     border-color: #269abc;
+
  border: 1px solid rgba(36, 241, 6, 0.46);
 +
     background-color: rgba(7, 149, 66, 0.12156862745098039);
 +
    box-shadow: 0px 0px 2px #259c08;
 +
     color: #0ad406;
 +
  text-shadow: 2px 1px #00040a;
 +
  transition:0.5s;
 +
  cursor:pointer;
 
}
 
}
 +
.alert-success:hover{
 +
  background-color: rgba(7, 149, 66, 0.35);
 +
  transition:0.5s;
 +
}
 +
.alert-simple.alert-info
 +
{
 +
  border: 1px solid rgba(6, 44, 241, 0.46);
 +
    background-color: rgba(7, 73, 149, 0.12156862745098039);
 +
    box-shadow: 0px 0px 2px #0396ff;
 +
    color: #0396ff;
 +
  text-shadow: 2px 1px #00040a;
 +
  transition:0.5s;
 +
  cursor:pointer;
 +
}
 +
 +
.alert-info:hover
 +
{
 +
  background-color: rgba(7, 73, 149, 0.35);
 +
  transition:0.5s;
 +
}
 +
 +
 +
.alert-simple.alert-warning
 +
{
 +
      border: 1px solid rgba(241, 142, 6, 0.81);
 +
    background-color: rgba(220, 128, 1, 0.16);
 +
    box-shadow: 0px 0px 2px #ffb103;
 +
    color: #ffb103;
 +
    text-shadow: 2px 1px #00040a;
 +
  transition:0.5s;
 +
  cursor:pointer;
 +
}
 +
 +
.alert-warning:hover{
 +
  background-color: rgba(220, 128, 1, 0.33);
 +
  transition:0.5s;
 +
}
 +
 +
.alert-simple.alert-primary
 +
{
 +
  border: 1px solid rgba(6, 241, 226, 0.81);
 +
    background-color: rgba(1, 204, 220, 0.16);
 +
    box-shadow: 0px 0px 2px #03fff5;
 +
    color: #03d0ff;
 +
    text-shadow: 2px 1px #00040a;
 +
  transition:0.5s;
 +
  cursor:pointer;
 +
}
 +
 +
.alert-primary:hover{
 +
  background-color: rgba(1, 204, 220, 0.33);
 +
  transition:0.5s;
 +
}
 +
 +
.alertprimary
 +
{
 +
      font-size: 18px;
 +
    color: #03d0ff;
 +
    text-shadow: none;
 +
}
 +
 +
.square_box {
 +
    position: absolute;
 +
    -webkit-transform: rotate(45deg);
 +
    -ms-transform: rotate(45deg);
 +
    transform: rotate(45deg);
 +
    border-top-left-radius: 45px;
 +
    opacity: 0.302;
 +
}
 +
 +
.square_box.box_four {
 +
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
 +
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
 +
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
 +
    opacity: 0.059;
 +
    left: 150px;
 +
    top: -25px;
 +
    width: 550px;
 +
    height: 550px;
 +
    border-radius: 45px;
 +
}
 +
 +
.alert:before {
 +
    content: '';
 +
    position: absolute;
 +
    width: 0;
 +
    height: calc(100% - 44px);
 +
    border-left: 1px solid;
 +
    border-right: 2px solid;
 +
    border-bottom-right-radius: 3px;
 +
    border-top-right-radius: 3px;
 +
    left: 0;
 +
    top: 50%;
 +
    transform: translate(0,-50%);
 +
      height: 20px;
 +
}
 +
 +
.fa-times
 +
{
 +
-webkit-animation: blink-1 2s infinite both;
 +
        animation: blink-1 2s infinite both;
 +
}
 +
 +
 +
/**
 +
* ----------------------------------------
 +
* animation blink-1
 +
* ----------------------------------------
 +
*/
 +
@-webkit-keyframes blink-1 {
 +
  0%,
 +
  50%,
 +
  100% {
 +
    opacity: 1;
 +
  }
 +
  25%,
 +
  75% {
 +
    opacity: 0;
 +
  }
 +
}
 +
@keyframes blink-1 {
 +
  0%,
 +
  50%,
 +
  100% {
 +
    opacity: 1;
 +
  }
 +
  25%,
 +
  75% {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
  
 
}}
 
}}

Revision as of 09:37, 30 July 2020

Test.