barwy, kolory, przezroczystość, tło i o strukturze danych elementów

Jak możecie zauważyć zabawa w modyfikację nie jest taka straszna. Wystarczy wiedzieć: jak zbudowane są moduły, jaka jest ich struktura, co jest od czego, po co dana rzecz jest lub od od czego ona jest (czyt. co robi).

Wiele elementów theme to powtarzające się struktury.
Ponieważ większość rzeczy nie opiera się na zasadzie: coś ma własne miejsce, ale dany plik służy tylko jednemu: wskazaniu innym elementom - jak ma coś wyglądać, jaki ma mieć kolor i czy to ma mieć zaokrąglone brzegi czy może być kanciaste.

Jest to o tyle trudne na początku, ponieważ budowa wyglądu gnome-shell opiewa na wyglądzie najmniejszych pierdów takich jak brzegi panelu.
I tak jak w gnome2 wszystko działało w oparciu o gtk2, tak w gnome3 wszystkie opiera się na gtk3, jeśli idzie o... programy. Zaś cały wygląd gnome-shell, czyli tego w czym operujemy oknami, uruchamiamy programy już podlega pod całkiem inny plik nakazujący gnome-shell wyglądać tak a nie inaczej.

I w tym miejscu zajmiemy się taką prozaiczną sprawą jak: wnętrze większości rzeczy w gnome-shell czyli: kolory, tła i inne wizualne pierdy ;)

Standardowo spotkamy się z takim wnętrzem danego elementu:
    background-image: url("scroll-vhandle.svg");
    background-color: #252525;
    border: 1px solid #080808;
    border-radius: 8px;


Jak już wyjaśniłem poprzednio:
background-image: url("scroll-vhandle.svg");
to odniesienie do pliku.

background-color: #252525
to oczywiście kolor tła danego elementu pulpitu.

border: 1px solid #080808
tu mamy składnię odnośnie brzegów.
A więc:
1px - to grubość danego brzegu
solid - linia ciągła
(ale można sprawdzić frazę: dasher - czyli linia przerywana)
#xxxxxx - kolor

border-radius: 8px;
zaokrąglenie danego elementu. Czyli że brzegi będzie opływowe, a nie kanciaste, a brzegi zostaną "ścięte".

Ale mamy też:
padding: 0px;
chodzi oczywiście o margines. Można określić w ten sposób nawet pozycję danego elementu w przestrzeni po przez dodanie 3 kolejnych wartości np. pading: 2px 2px 10px 10px - tak też można :)

Przezroczystość:
border: 1px solid rgba(255,255,255,0.6);
oznacza to, że obramowanie jest przezroczyste. Świadczy o tym fraza: rgba i wartość w nawiasie. Jest to bardzo ważne, dlatego że fraza w nawianie określa kolor danej przezroczystości :)

Przezroczyste może być: kolor czcionki, panel, tło, obramowanie - czyli wszystko w gnome-shell :D
I ważna informacja.
Wartości w nawiasie zaczynają się od (0,0,0,0) do (255,255,255,255).
Wspominam o tym, ponieważ nie musicie mieć wartości podanej w nawiasie. Ale nie może ona być wyższa niż 255.
Same 0 to kolor czarny, zaś 255 to kolor biały. Jeśli zastąpicie 255 np. 100 wyjdzie wam taki szarawy lub coś pomiędzy. Możecie się pobawić też zmianą różnych brzegów np. rgba(100, 50, 0, 10) - każda z tych cyfr określa kolor cienia na każdym z brzegów: button, top, left i right.

Czcionka:
font-size: 0.8em;
font-weight: normal;
text-align: center;

font-size: 0.8em;
to nic innego jak określenie wielkości czcionki. I w gnome-shell mamy ich kilka: px (pikseli), em albo pt (punkty).

font-weight: normal;
tu mamy określenie czcionki odnośnie: pogrubiona (bold), normalna lub mała. Wiem, że jest trochę tego więcej, ale czy taka paleta opcji i tak nie wprowadza pewnego zamieszania?

text-align: center;
umieszczenie napisów - prawo albo lewo, a może właśnie po środku - angielski to podstawa.

Spotkamy się też z różnymi wariacjami powyższych opcji np. padding-left - czyli chodzi o lewy margines. border-width: - szerokość obramowania, miejsca danego elementu.

O frazie w różnych elementach poleceń ::hover już pisałem wcześniej, ale myślę sobie że warto tu nadmienić o pewnej małej opcji graficznej, której zmiana może inaczej obrazować wam oryginalny element wyglądu gnome-shell. A mowa o: background-gradient-direction: i vertical i horizontal.
Jeśli widzicie taką frazę pod danym elementem gnome-shell to wiedzcie że chodzi o... słowo klucz: background (tło) :) Czyli ułożenie tła na danym elemencie. Zmieniając daną frazę odnośnie panelu powiadomień nasz pasek który pokazuje się po najechaniu na niego na dole w gnome-shell staje się przezroczysty z lewej i ciemny z prawej - co od razu moim zdaniem zmienia postać patrzenia na dany element w tym pulpicie.

I jeszcze słówko o strukturze elementów i ich budowie.
# - to oznaczenie głównego elementu w gnome-shell
. - to oznaczenie pozycji które są w pewien sposób podległe w ustawieniu danego elementu który został oznaczony #.
- (pod znacznikiem poprzedzonym . ) to elementy podlegające tylko pod dany elemencik.

Mamy też coś takiego:
-natural-hpadding: 12px;
-minimum-hpadding: 6px;

to nic innego jak określenie odległości między ikonkami na panelu tych po prawej. Pierwsza opcja określa normalną odległość, a druga w momencie zagęszczenia - czyli jaka być minimalna odległość między ikonkami.

Jeśli chodzi o tekst to możemy mu nadać kolor, ale i też cień.
określa się to: color: #xxxxxx
Zaś cień tworzy po przez: text-shadow: black 0px 0px 0px
Co oznacza, że narzucamy aby dany tekst miał czarny cień w centrum. Te trzy cyfry określają przesunięcie cienia względem oryginalnego tekstu.

Na koniec:
Zalecam wam przejrzenie całego pliku, oraz samodzielne zmiany.
Ważne!
Wiele elementów interpretuje o wiele więcej poleceń niż może się wam wydawać. Tam gdzie macie ustawienie tekstu to możecie mu nadać cień, wyznaczyć czy ma być oparte o lewy czy prawy brzeg, czy ma być przezroczysty, czy może jego tło ma być przezroczyste. A jeśli macie ochotę możecie skasować dany tekst lub kolor - oznaczając go jako: przezroczysty, a tekst jako 0. Tak samo jest z obramowaniem, jego kolorem czy jakie ono ma być duże itd.
To wszystko podlega pod wasz umiar, wyobraźnie itd. To że nie można przemieścić danego elementu gnome-shell nie oznacza, że nie może on wygląda tak jak wy tego chcecie :)