MediaWiki:Vector-darkmode.less/messagebox.less

// <pre>
/* ====================
       messageboxes
   ==================== */

.messagebox {
    border-color: @dark-wikitable-header;
    background-color: @dark-wikitable-background;

    &.obsolete,
    &.info,
    &.disambig {
    	color: #ddd;
        background-color: #464646;
        border-color: #333;

        a,
        a:visited,
        a:active {
            color: #bbb;
        }

    }

    &.action {
        background-color: #45697d;
        border-color: #2d5266;

        a,
        a:visited,
        a:active {
            color: #b8d5e5;
        }

    }

    &.file {
        background-color: #617ebc;
        border-color: #4563a4;

        a,
        a:visited,
        a:active {
            color: #a6c2ff;
        }

    }

	&.warn {
		color: #f9fafa;
    	background-color: #9f261e;
    	border-color: #801c13;
    	
    	a,
        a:visited,
        a:active {
            color: #ffe3e0;
        }
	}
	
	&.warning {
    	background: @korma;
    	color: @lace;
    	border-color: darken( @korma, 5% );

    	a:not(.mw-selflink),
    	a:visited,
        a:active {
        	color: @corvette;
    	}
    }
	
    &.unsafe {
        color: #f9f6d0;
        background-color: #a48900;
        border-color: #7a6600;

        a,
        a:visited,
        a:active {
            color: #e8e3b3;
        }

    }

    &.safe {
        color: #e9f6e7;
        background-color: #1b8408;
        border-color: #126802;

        a,
        a:visited,
        a:active {
            color: #c1e0bb;
        }

    }
    
    &.easter {
		background-color: @san-felix;
		border-color: darken( @san-felix, 4%);
		
		a,
        a:visited,
        a:active {
        	color: lighten( @san-felix, 20%);
        }
    }
    
    &.halloween {
		background-color: @cosmic;
		border-color: darken( @cosmic, 4%);
		
		a,
        a:visited,
        a:active {
        	color: lighten( @cosmic, 30%);
        }
    }
    
    &.christmas {
		background-color: @venice-blue;
		border-color:@regal-blue;
		
		a,
        a:visited,
        a:active {
        	color: @curious-blue;
        }
    }
    
    &.bigRaffle {
		background-color: #5d5641;
		border-color: #631414;

        a,
        a:visited,
        a:active {
            color: #eccf6e;
        }
    }
    
    &.thanksgiving {
		background-color: @antique-bronze;
		border-color: darken( @antique-bronze, 4%);
		
		a,
        a:visited,
        a:active {
        	color: lighten( @antique-bronze, 30%);
        }
    }
    
    &.welcomenotice {
        
        .wordmark {
        	filter: none;
        }
    }
    
    &.alphabetical {
	    border-color: @dark-wikitable-header;
	    background-color: @dark-wikitable-background;
    }
}

/* *****************
       variants
   ***************** */

.messagebox-color(@header-color, @border-color) {

   .messagebox-header {
       background: @header-color;
       border-bottom-color: darken( @border-color, 3% );

       a,
       a:visited, 
       a:active {
           color: lighten( @border-color, 50% );
       }

   }


}

/* ************************
       new messageboxes
   ************************ */

.messagebox2 {
	background: @pickled-bluewood;
    box-shadow: @box-shadow-dark;
    
    .messagebox-title {
    	color: #f1f1f1;
    }

    // red
    &.warn {
        .messagebox-color(@old-brick, @mocaccino);
    }

    // orange
    &.action {
        .messagebox-color(@korma, @antique-bronze);
    }

    // green
    &.safe {
        .messagebox-color(@la-palma, @san-felix);
    }

    // blurple
    &.file {
        .messagebox-color(@jelly-bean, @chathams-blue);
    }

    // pink
    &.event {
        .messagebox-color(@cannon-pink, @cosmic);
    }

    // slate
    &.info {
        .messagebox-color(@shuttle-gray, @river-bed);
    }

    // grey
    &.obsolete {
        .messagebox-color(@tundora, @mineshaft);
    }
    
    // discord
    &.discord {
    	.messagebox-color(#7289DA, #5a6dad);
    }

}

.messagebox-header {
	background: @cloud-burst;
	border-width: 0 0 .3em 0;
	border-bottom-color: darken( @cloud-burst, 4% );
}

.messagebox-text {
	border: none;
}

/* ************************
   new message notification
   ************************ */
.usermessage {
	background-color: @river-bed;
	border-color: darken( @river-bed, 15% );
	color: white;
	a {
		color: lighten( @dark-links, 5% );
	}
}