black_list.html

<link rel="stylesheet" type="text/css" href="popup.css">

<style>
    body {
        min-width:  525px; 
        margin: 0px; 
        /*background-color: #CDCECD;*/
        /*background-color: #438588;*/
        background-color: #EFE8DF;
        /*background-image: url('images/icon_128.png');        */
    }
    button { 
        /*margin: 2px;
        margin-right: 8px;  
        border: solid;*/
        font-weight: bold;
        border-width: 2px;
        border-radius: 6px;
        /*background: rgba(0,0,0,0.3);  
        background-color: #DDD;*/
        box-shadow: 1px 1px rgba(0,0,0,0.2);  }


  

    #content {
        width: 100%;
        display: inline-block;
        padding: 0px;
    }

    .unblock_item {
        padding: 0px;
        padding-bottom: 2px;
        height: 15px;
        width: 15px;
        line-height: 0.0;

        margin: 2px;
        margin-right: 8px;  
    }


    #blam_add_item, #highlight_add_item {
        border-color: #0DB10D;
        color: #E8E8E8;  
        background-color: #1A7F22;
        text-shadow: 1px 1px 2px #A02222;
    }

    .unblock_item {
        border-color: #C53535;
        color: #FFF;   
        background-color: #DC4040;
        text-shadow: 1px 1px 2px #296516;
    }

    #blam_add_me {
        background-color: black;
        color: #B5AFAF;      
        border-color: #948787;
    }

    #blam_add_me, #highlight_add_me {
        width: 300px;
        margin-bottom: 8px;
    }

    #black_list_btn, #a_list_btn {
        -webkit-filter:  grayscale(40%);
        margin: -6px;
        border-color: #888;
        /*border: none;*/
        position: relative;
        left: 5px;
        float: right;
        margin-right: 0px;
        margin-top: 0px;
        height: 120;
        width: 100;
        /*/*border-top-right-radius: 0px;*/
        /*border-bottom-right-radius: 0px;*/

        /*border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;*/
        border-radius: 0px;
        /*background-image: url("/images/blacklist.png");*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        text-align: bottom;

        background-color: transparent;
        border-style: none;
        box-shadow: none;
    }

    #black_list_btn.button_on, #a_list_btn.button_on {
        -webkit-filter: grayscale(0%);
        /*width: 105;*/
        /*top:-2px;*/
        border-style: dashed;
        /*top: 1px;*/
        /*left: 5px;*/
        z-index: 5;
        border-radius: 8px;
        /*background-color: #FAFAFA;*/
        /*box-shadow: -1px 1px rgba(0,0,0,0.2);*/
    }

    #black_list_btn {
        background-image: url("/images/blacklist_100x100.png");  }

    #a_list_btn {
        background-image: url("/images/A_list_150x150.png");  }

/*    #black_list_btn {
        color: #FAFAFA;
        background-color: #282827;
        text-shadow: -1px 0px 2px #222, 
            1px 0px 2px #222, 
            0px -1px 2px #222,  
            0px 1px 2px #222;
        border-top-style: none;
        background-image: url("/images/blacklist_100x100.png");
    }

    #a_list_btn {
        color: #222;
        background-color: #FAFAFA;
        text-shadow: -1px 0px 2px #FAFAFA, 
            1px 0px 2px #FAFAFA, 
            0px -1px 2px #FAFAFA,  
            0px 1px 2px #FAFAFA;
        background-image: url("/images/A_list_150x150.png");
    }*/

    #viewport {
        border-color: #888;
        /*z-index: 5;*/
        position: relative;
        /*float: left;*/
        width: 390px;
        min-height: 300px;
        overflow: auto;
        background-color: #FAFAFA;
        display: inline-block;
        border-left-style: solid;
        border-right-style: solid;
        border-width: 2px;
        margin-left: 15px;
        box-shadow: 0px 0px 34px rgb(255, 255, 255);
        /*border-radius: 6px;*/
        /*padding: 20px;*/
    }

    #sidebar {
        /*pointer-events: none;*/
        top: 0px;
        /*width: 106px;*/
        width: 100px;
        display: inline-block;
        float: left;
        padding-top: 5px;
        padding-right: 0px;
        /*position: absolute;*/
    }

    #the_black_list, #the_a_list  {
        overflow: auto;
        height: 300;
        padding: 10px;
        padding-top: 30px;
    }

    #the_black_list {
        color: #D24B4B;
        background-color: #282827;
        /*font-weight: bold;
        font-size: large;*/
    }

    #the_a_list {
        display: none;
        font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
        /*font-style: italic;*/
    }

    .good_link  {
        background: rgba(119, 197, 51, 0.43);
    }

    .big_text  {
        font-size: 40;
    }

    
</style>



<body>
    
    
    
    <div id="content">
        <a id='title_bar' href="popup.html">Black Lister</a>
        <div id="sidebar">
            <button id="black_list_btn" class="button_on"></button>
            <br>
            <button id="a_list_btn"></button>
        </div>
        
        <div id="viewport">
            <div id='bg_image'></div>
            <div id='the_black_list'>
                <span class="big_text">THE BLACK LIST</span><br>
                <button id="blam_add_item">+</button>
                <input type="text" id="blam_add_me" placeholder="add url to black list" />
            </div>
            <div id='the_a_list'>
                <span class="big_text">The A List</span><br>
                <button id="highlight_add_item">+</button>
                <input type="text" id="highlight_add_me" placeholder="add url to A List" />
            </div>
            
        </div>
    </div>
</body>




<script type="text/javascript" src="black_list.js"></script>