I'm trying to remove the dotted line above the grey node. It's a node with a 'TAG' styling.
I'm trying to remove the dotted line above the grey node. It's a node with a 'TAG' styling.
Please tell me what I am doing wrong. Here's my code:
span { font-family:Calibri;
}
.tag_社長コメント .userContent {
font-weight: 500;
color: grey;
border-top: none !important;
}
.topLevel .tag.tag_社長コメント {
display:none;
border-top:none !important;
}
.tag_社長コメント .userContent:before {
content: "社長コメント:";
font-size: 14px;
padding-right: 5px;
border-top:none !important;
}
ul.topLevel li.task {
font-size: 20px;
}
ul.topLevel ul li.task {
font-size: 16px;
padding-left: 10px;
}
ul.topLevel ul li.task span.editable {
border-top: 1px dotted;
border-top-color: darkgrey;
padding-top:4px;
}
ul.topLevel ul li.task ul li.task {
font-size: 14px;
padding-left: 30px;
}
ul.topLevel ul li.task ul li.task span.editable {
border-top:none;}
ul.topLevel ul li.task ul li.task ul li.task{
font-size: 14px;
padding-left: 40px;
}
ul ul ul li {
border:1px;
}
.tag_b .userContent {
font-size:30px;
border-top: 2px solid;
border-bottom: 2px solid;
padding-top: 2px; // or 3px
padding-bottom: 2px; // or 3px
}
As I understand the dotted border is created with style
ReplyDeleteul.topLevel ul li.task span.editable { ... }
To remove the border, you should use something like
ul.topLevel ul li.task.tag_社長コメント span.editable { border-top: none;}
But in fact, I'm not sure whether class names like tag_社長コメント would work at all.
I tried it but sadly it doesn't work. I tried with a roman-tag like "test" but I cannot remove the dotted line... =(
ReplyDeleteTry using Chrome inspector (Inspect element) to see why your new styles do not work. A more specific style should override the previous one, and given that you added the dotted line in your own CSS, there should be a way to remove it with a more specific CSS (I don't like !important modifier).
ReplyDelete