Taeluf.com

style.css

.wygHover {
    background:yellow;
}


[name=highlight_fix]:checked + #editor label[data-wyg-highlight="true"],
[name=highlight_fix]:checked + #editor input[data-wyg-highlight="true"]
[name=highlight_fix]:checked + #editor br[data-wyg-highlight="true"]
{
    display:inline-block;
}

[data-wyg-highlight="true"] {
    background:yellow;
    border:3px solid black;
    padding:8px;

    /* display:inline-block; */
}

.wyg-template {
    display:none;
}
.wyg-group {
    display:none;
}

.wyg-site.selected .wyg-group, .wyg-group.selected .wyg-template {

    display:inline-block;

}

.wyg-site h2, .wyg-site h3 {
    background:lightblue;
    display:inline-block;
    border:1px solid black;
    padding:0.5em;
}

.wyg-template {
    background: lightgrey;
    border: 1px solid black;
    padding: 6px;
}

.wyg-template-code {
    display:none;
}



#tabBar {
    padding:1em;
}

#wyg #tabBar {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    border-collapse:collapse;
    padding-bottom:0;
}

#tabBar .tab {
    display:inline-block;
    margin:0;
    padding:0.5em;
    border-left: 2px solid black;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-radius: 0.5em 0.5em 0 0;
    border-collapse:collapse;
    box-shadow:-1px -1px 5px 0px lightgrey;
    /* , 2px solid black, 2px solid black, 0px; */
    cursor:pointer;
}

#tabBar .tab.selected {
    background:lightgrey;
}


#wyg .panel {
    width:100%;
    height:100%;
    border:1px solid black;
    display:none;
}

#wyg .panel.selected {
    display:block;
}


.breadcrumb {
    margin:8px;
    display:inline-block;
    background:lightgrey;
    border:2px solid black;
    border-radius:1em;
    padding:0.5em;
}

#fields {
    border: 1px solid black;
    padding:1em;
    margin:0.3em;
    max-width:600px;
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}
#fields label {
    margin-right:1em;
    font-weight:bold;
}

#controls {
    padding:1em;
    max-width:600px;

}

#breadcrumbs {
    padding:1em;
    max-width:600px;

}

#editor {
    min-height:8px;
    border:1px solid black;
}