CSS на оболочке гнома, которая делает скошенную кнопку

Question

Я новичок в моддинг гном оболочки. я изо всех сил пытался внести некоторые изменения в мою тему оболочки gnome. мне нравится концепция старого доброго, простого * настольного компьютера. поэтому я попытался изменить мой gnome-shell, чтобы он выглядел как один.

Я попытался сделать скос на моей оболочке гнома, и оказалось, что это так. я не знаю, что не так с моим кодом, я пробовал много комбинаций.

я хочу сделать по крайней мере так, это возможно?

вот мой код

.panel-button {
        -natural-hpadding: 12px;
        -minimum-hpadding: 8px;
        font-weight: bold;
        color: #4A4A4A;
        border: 3px solid #000000;
        border-top: 3px solid transparent;
        border-bottom: 5px solid #000000;
        box-shadow: 
            1.5px 1.5px 0px rgba(0,0,0,1), /*bottom external highlight*/
            0px 0px 3px #666, /*top external shadow*/ 
            inset 0 -1px 1px #000000, /*bottom internal shadow*/ 
            -1px -1px 1px rgba(255,255,255,1); /*top internal highlight*/;
}

Извините за мой плохой английский.

Answer 1

Я не знаю, есть ли что-то особенное в оболочке gnome, когда дело доходит до стиля, но ожидаю, что это сработает.

JSFiddle

button {
    height: 25px;
    background: #ddd;
    border-bottom: solid 1px #aaa;
    border-right: solid 1px #aaa;
    border-top: solid 1px #fff;
    border-left: solid 1px #fff;
}

button.active {
    border-bottom: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #aaa;
    border-left: solid 1px #aaa;
}