view public/viewer/form.css @ 119:aa5daf38f3e9 draft

viewer.html
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Thu, 18 Apr 2013 06:19:26 +0900
parents a405991e39d8
children
line wrap: on
line source

#popup_base{
    position:fixed;
    left:0;top:0;
    width:100%;height:100%;
}
#popup_background{
    position:absolute;background:black;
    opacity:0.8;
    left:0;top:0;
    width:100%;height:100%;
}
div.popup_center{
    position:fixed;left:50%;top:50%;width:0;height:0;
}
div.claiminfo{
    position:absolute;background:white;
    width:600px;
    height:400px;
    left:-200px;top:-300px;
}
div.mentioninfo{
    position:absolute;background:white;
    width:600px;
    height:400px;
    left:-300px;top:-200px;
    box-shadow:0 0 50px silver;
}
div.claim_title{
    position:absolute;
    left:0;top:0;
    width:600px;
    height:60px;
    background:#336;
}
div.mentioninfo div.claim_title{background:#366;}
div.claim_title input{
    position:absolute;left:5;top:5;width:590px;height:50px;
    font-size:40px;
    color:white;
    border:none;background:none;
}
div.claim_menu{
    position:absolute;
    left:0;top:60;width:100%;height:30px;
    border-bottom:2px solid #66a;
    background:#ddd;
}
div.mentioninfo div.claim_menu{border-color:#599}
div.menu_item{
    position:relative;
    display:inline-block;
    font-size:20px;
    background:white;
    border-radius:8px 8px 0 0;
    margin:2px 0 0 10px;
    padding:0 10px;
    background:silver;
    height:28px;
    line-height:28px;
    color:white;
    text-align:right;
    line-heigth:50px;
    cursor:default;
    webkit-user-select:none;
}
div.claim_main,div.mention_main{
    position:absolute;left:0;top:90;width:600;height:270;
}
div.claiminfo div.claim_main{
    background:-moz-linear-gradient(top,#66a,white 2%,white);
    background:-webkit-gradient(linear,left top,left bottom,from(#66a),to(white),color-stop(0.02,white));
}
div.mentioninfo div.mention_main{
    background:-moz-linear-gradient(top,#559,white 2%,white);
    background:-webkit-gradient(linear,left top,left bottom,from(#599),to(white),color-stop(0.02,white));
}
div.claim_main textarea,div.mention_main textarea{
    font-size:20px;
    position:absolute;
    width:590px;height:260px;
    left:5px;top:5px;
    max-width:590px;max-height:290px;
}
div.claim_footer{
    position:absolute;
    left:0;bottom:00;width:600;height:40px;
    background:#336;
}
div.mentioninfo div.claim_footer{
    background:#366;
}
.claim_contents .menu_contents{background:#66a;}
.claim_toulmin .menu_toulmin{background:#66a;}
.claim_users .menu_users{background:#66a;}
.claim_main{display:none;}
.claim_contents .main_contents{display:block;}
.claim_toulmin .main_toulmin{display:block;}
.claim_users .main_users{display:block;}

.mention_contents .menu_contents{background:#599;}
.mention_toulmin .menu_toulmin{background:#599;}
.mention_users .menu_users{background:#599;}
.mention_main{display:none;}
.mention_contents .main_contents{display:block;}
.mention_toulmin .main_toulmin{display:block;}
.mention_users .main_users{display:block;}

div.item_toulmin{
    position:relative;
    height:54px;
    width:100%;
}
div.item_toulmin span{
    position:absolute;left:10;top:10;width:90px;height:34px;font-size:24px;
}
div.item_toulmin input{
    position:absolute;left:100;top:10;width:480px;height:34;font-size:24px
}
#claim_cover,#mention_cover{
    position:absolute;left:0;top:0;
    width:100%;height:100%;
    background:black;
    opacity:0.5;
}

span.button{
    background:#eee;
    background:-moz-linear-gradient(top,#fff,#ddf);
    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddf));
    border:1px solid gray;
    border-radius:4px;
    text-align:center;
    cursor:default;
}
span.button:hover{
    background:#bbb;
    background:-moz-linear-gradient(top,#ccc,#aac);
    background:-webkit-gradient(linear,left top,left bottom,from(#ccc),to(#aac));
}
span.button:active{
    background:#bbb;
    background:-moz-linear-gradient(top,#bbb,#88b);
    background:-webkit-gradient(linear,left top,left bottom,from(#bbb),to(#88b));
}
div.claim_footer span.button{
    padding:0px 5px;
    height:28px;
    font-size:24px;
    line-height:28px;
}
span.save{
    position:absolute;right:10;top:4;
}
span.cancel{
    position:absolute;right:80;top:4;
}

.mention_button{
    position:absolute;left:10;top:4;
}

span.option{
    font-size:20px;
    line-height:28px;
    height:28px;
    border:1px solid gray;
    text-align:center;
    background:#eef;
    background:-moz-linear-gradient(top,#eef,#bbe);
    background:-webkit-gradient(linear,left top,left bottom,from(#eef),to(#bbe));
    color:#888;
}
.option1 .option1,.option2 .option2,.option3 .option3{
    color:black;
    background:#ccb;
    background:-moz-linear-gradient(top,#ccb,#88c);
    background:-webkit-gradient(linear,left top,left bottom,from(#ccb),to(#88c));

}
.agree1{position:absolute;right:130;top:4;width:60px;}
.agree2{position:absolute;right:70;top:4;width:60px;}
.agree3{position:absolute;right:10;top:4;width:60px;}

.mention1{position:absolute;left:10;top:4;width:60px;}
.mention2{position:absolute;left:70;top:4;width:60px;}
.mention3{position:absolute;left:130;top:4;width:60px;}

.vote1{width:100px;display:block;position:absolute;left:380;top:4;}
.vote2{width:100px;display:block;position:absolute;left:480;top:4;}

.author_label{position:absolute;left:10;top:4;font-size:20px;line-height:28px;height:28px;}
.author_name{position:absolute;left:80;top:4;font-size:20px;line-height:28px;height:28px;}

#claim_users,#mention_users{
    position:absolute;left:10;top:36;width:580;height:230;
    overflow-y:scroll;
}


#claim_status{
    position:absolute;
    right:20px;top:0px;
    font-size:26px;
    line-height:26px;
    height:26px;
    text-align:center;
}


div.userItem{
    background:white;
    padding-left:24px;
    font-size:24px;
    position:relative;
    border-radius:4px;
    font-size:24px;
    line-height:30px;
    margin-bottom:5px
}
div.userStatus{
    position:absolute;left:2px;top:5px;width:20px;height:20px;
    border-radius:10px;
}
div.claimNode{
    z-index:20;
    position:absolute;width:92px;height:40px;font-size:12px;padding:4px;
    background:white;
    padding-top:12px;
    border:2px solid silver;
    overflow:hidden;
    border-radius:5px;
    cursor:pointer;
}
div.nodeStatus{
    top:-5px;
    right:0px;
    z-index:40;
    position:absolute;width:60px;height:15px;font-size:15px;padding:2px;background:white;
    border:1px sold silver;
    overflow:hidden;
    border-radius:3px;
    cursor:pointer;
}
div.userList{
    position:fixed;
    z-index:30;
    right:0;top:0;
    width:160px;
}
div.header{
    position:absolute;
    left:0;top:0;
    z-index:5;
    height:50px;
    width:100%;
    background:#223;
    background:-moz-linear-gradient(top,#002,#223);
    background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223));
    color:silver;
    font-size:40px;
}
div.revision{
    position:absolute;
    left:0;top:50px;
    z-index:5;
    height:25px;
    width:100%;
    color:silver;
    font-size:20px;
}