# 在 A1 Team Work 新增主題的說明書
<article class="background"></article>
<article class="userContainer"></article>
<style>
.background {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-image: linear-gradient(to right, #a7a0ad, #eae6ed, #eae6ed, #a7a0ad);
z-index: -1;
}
.userContainer {
position: fixed;
width: 758px;
height: 100vh;
top: 0;
margin: auto;
margin-left: -15px;
background-color: #FFF;
box-shadow: 0 0 8px #938899;
z-index: -1;
}
#doc.comment-enabled {
padding-right: 35px !important;
}
.ui-toc-dropdown .nav .nav > li > a {
color: #570a91;
transition: 0.2s;
}
.ui-toc-dropdown .nav .nav > li > a:hover {
color: #d49ffc;
animation: dropdown_nav_a 0.3s;
}
.expand-toggle, .back-to-top, .go-to-bottom {
position: relative !important;
}
.expand-toggle::before, .back-to-top::before, .go-to-bottom::before {
content: "—";
position: absolute;
opacity: 0;
left: -6px;
top: 50%;
transform: translate(0px, -60%);
}
.expand-toggle:hover, .back-to-top:hover, .go-to-bottom:hover {
animation: dropdown_a 0.5s forwards;
}
.expand-toggle:hover::before, .back-to-top:hover::before, .go-to-bottom:hover::before {
animation: dropdown_a_before 0.5s forwards;
}
@keyframes dropdown_nav_a {
0% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
100% { transform: translateY(0px); }
}
@keyframes dropdown_a {
0% { transform: translateX(0px); }
100% { transform: translateX(5px); }
}
@keyframes dropdown_a_before {
0% { transform: translate(-6px, -60%); opacity: 0; }
100% { transform: translate(6px, -60%); opacity: 1; }
}
</style>
<!-- 由以下空一行開始編輯 -->
2019/12/05
## 🍩 建立您的主題.sass
1. 想好主題的中英文名稱，例如 <span style="color: #a39564;">史蒂芬金 StevenGold</span>。
2. `clone` a1team-work 專案之後，切到 `develop` 分支，從路徑 `src/styles/themes` 選擇淺色or深色模板，複製一份到相同目錄。
3. 重新命名sass檔為您的主題名稱，之後使用到的主題名稱一定要一致 <span style="color: red;">※重要</span>。
---
<br>
## 🍿 在程式中新增您的主題
1. 完整複製以下代碼進行全域搜尋：
```
// __________________import themes/themeName above this line__________________
```
2. 取代成＝在上方新增以下`@import`路徑：
```
@import themes/您的主題sass檔名
// __________________import themes/themeName above this line__________________
```
3. 在 `user-setting.ts` 和 `sidebar.component.ts` 中如圖的地方加上自己的主題檔名。
用於顯示的 `name` 注意大小寫。
4. 在 `sidebar.component.sass` 的一開始附近找到 `$themes` 變數，加上自己的主題名稱。
---
<br>
## 🌆 新增主題圖片
1. 在專案路徑 `src/assets/images/` 新增一個資料夾，命名為自己的主題名稱，我們將用這個資料夾來存放您的主題用到的圖片。
2. 主要使用到的圖片有兩張(若您覺得不夠，稍後再追加)，一張用於左邊的選單列背景(若不是直向方形，建議裁剪，<span style="color: red;">命名：主題名稱SidebarBg</span>)，另一張用於大區塊的背景<span style="color: red;">(命名：主題名稱Bg)</span>，上網搜尋一下自己想要放上去的圖片，以紫色主題為例：
3. 使用在網頁的圖檔需要經過適當的壓縮來縮小檔案大小，推薦使用[這個網站工具](https://tinypng.com)，使用方法只要把檔案上傳壓縮後再下載回來就可以了。
4. 回到您的主題`.sass` 檔案，選取所有的<span style="color: red;">深色模板or淺色模板</span>，改為您的主題名稱，也注意路徑的圖片副檔名是否正確。
<p style="text-align: center;"><img src="https://pic.sopili.net/pub/emoji/twitter/2/72x72/1f53b.png" width=36 height=36> <img src="https://pic.sopili.net/pub/emoji/twitter/2/72x72/1f53b.png" width=36 height=36> <img src="https://pic.sopili.net/pub/emoji/twitter/2/72x72/1f53b.png" width=36 height=36> 改為這樣 <img src="https://pic.sopili.net/pub/emoji/twitter/2/72x72/1f53b.png" width=36 height=36> <img src="https://pic.sopili.net/pub/emoji/twitter/2/72x72/1f53b.png" width=36 height=36> <img src="https://pic.sopili.net/pub/emoji/twitter/2/72x72/1f53b.png" width=36 height=36> </p>
:::success
`npm run start`看看是否編譯正常，至此可以開始修改您的主題了，恭喜恭喜 😃😃。
:::
---
<br>
## ⭐ 修改您的主題
:::warning
a1team-work 使用的樣式檔是 sass，關於 sass 與 css 的差異，可以參考[這段文章](https://hackmd.io/@c_pSsDGCQsOGTM6RJ6O2iw/HJ_Ow2_hB#-%E5%A5%BD%E7%89%A9%E6%8E%A8%E6%8E%A8)，以下將舉例說明主題中常見的 css 屬性及特殊的元素，藍色標題可連結至詳細說明。
:::
### [**background**](https://www.w3school.com.cn/cssref/pr_background.asp)
```sass=
background: url('src/assets/images/pikachu.jpg') center center no-repeat
```
* 同時指定所有 background 相關屬性的屬性。
* `url('src/assets/images/pikachu.jpg')`：***背景圖片***，同 [background-image](https://www.runoob.com/cssref/pr-background-image.html)，若背景是純色，使用 [background-color](https://www.runoob.com/cssref/pr-background-color.html)。
* `center center`：***背景位置***，同 [background-position](https://www.runoob.com/cssref/pr-background-position.html)，center center，會指定背景圖片的XY軸皆為正中間，可以使用 top、bottom、px、% 等等值。
* `no-repeat`：***背景圖片重複***，同 [background-repeat](https://www.runoob.com/cssref/pr-background-repeat.html)。
<br>
```css=
background: linear-gradient(15deg, rgba(#6590b3, 0.9) 30%, rgba(#6590b3, 0.3))
```
* `linear-gradient(15deg, rgba(#6590b3, 0.9) 30%, rgba(#6590b3, 0.3))`：***漸層背景寫法***，[linear-gradient()](https://www.runoob.com/cssref/func-linear-gradient.html) 是寫在 background-image 屬性的參數函式，表示線性的漸層，其他還有[放射漸層 radial-gradient](https://www.runoob.com/cssref/func-radial-gradient.html) 等等。
`15deg` 是線性角度，也可以寫 `to top`、 `to bottom`、 `to left`、 `to right` 等等。
`rgba(#6590b3, 0.9)` 是 [rgba 顏色](https://www.runoob.com/cssref/css-colors-legal.html)的寫法`rgba(色碼#6590b3, 不透明度0.9)`，`30%` 為整個漸層的前面 30% 比例都是 rgba(#6590b3, 0.9)。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**color**](https://www.runoob.com/cssref/pr-text-color.html)
```css=
color: rgba(#FFFFFF, 0.95)
```
```css=
color: #002f5a
```
* ***文字顏色***，好像不需要更多描述🌝。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**box-shadow**](https://www.runoob.com/cssref/css3-pr-box-shadow.html)
```css=
box-shadow: 2px 3px 5px rgba(#002f5a, 0.5)
```
* ***陰影***，範例寫法為 `box-shadow: X偏移2px Y偏移3px 模糊5px 顏色rgba(#002f5a, 0.5)`。
<br>
```css=
box-shadow: inset 0 0 10px rgba(#FFF, 0.7)
```
* `inset` ***內陰影***，可用來模擬凹陷的效果。
<br>
```css=
box-shadow: 2px 3px 5px #002f5a, 2px -5px 5px #002f5a, inset 0 0 5px #999
```
* 可以同時指定內外陰影，也可以同時有很多個內外陰影，用逗號區隔。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**border**](https://www.runoob.com/cssref/pr-border.html)
```css=
border: solid 1px rgba(#002f5a, 0.8)
```
* 一次指定元素的所有 ***邊框***，包含上下左右(`border-top`、`border-bottom`、`border-left`、`border-right`)。
* `solid`：***邊框樣式***，solid 為實線，也有其他[邊框樣式種類 (border-style)](https://www.runoob.com/cssref/pr-border-style.html)。
* `1px`：***邊框寬度***，不解釋。
<br>
:::warning
以上為編輯主題主要會用到的 css 屬性，接著說明其中出現的特殊元素([css選取器](https://www.runoob.com/cssref/css-selectors.html))
:::
### [**::before**](https://www.runoob.com/cssref/sel-before.html)
```css=
&::before
background: #6590b3
box-shadow: 3px 3px 8px rgba(#FFF, 0.7)
```
* ***偽元素***，非常好用~是大部份 html 標籤都有的隱藏元素(除了沒有結束標籤的以外)，可以用來寫特殊的物件，例如文字、區塊、甚至是一個小三角形。
<br>
* 圖中的小三角形就是用下面白色 div 的`::before`來寫的；A1錢幣是用後面的文字的`::before`寫的。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**::after**](https://www.runoob.com/cssref/sel-after.html)
* 同上述的`::before`，即一個 html 元素有兩個偽元素可以使用(`::before`、`::after`)。
* 另外，使用個冒號和兩個冒號沒有區別，都可以～。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**:hover**](https://www.runoob.com/cssref/sel-hover.html)
```css=
&:hover
border: solid 1px rgba(#FFF, 0.7)
background: rgba(#FFF, 0.7)
box-shadow: inset 0 0 10px rgba(#FFF, 0.7)
color: #002f5a
```
* ***滑鼠移到元素上*** 時要套用的樣式。
* 連結、按鈕等地方最常用，也可以寫成滑鼠移入A處，顯示B區塊、改變長寬之類的進階用法。
* 上圖的"日"按鈕即為滑鼠移入的樣式狀態。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**:active**](https://www.runoob.com/cssref/sel-hover.html)
```css=
&:active
background: linear-gradient(to bottom, #2d5f81, #6692af)
box-shadow: inset 0 0 5px rgba(#002f5a, 0.8)
```
* ***滑鼠按住元素*** 要套用的樣式。
* 比較不常用，但可以增加使用者體驗，按鈕好像真的可以按一樣。
* 上圖的"月"按鈕即為滑鼠按住的樣式狀態。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**:focus**](https://www.runoob.com/cssref/sel-focus.html)
```css=
input, textarea
&:focus
~.inputTitle
color: rgba(#002f5a, 0.6)
```
* 某個 ***輸入框獲得焦點*** 時要套用的樣式。
* 上述 sass 意思為：`input` 或 `textarea` 獲得焦點時，緊鄰其後 `class` 為 "inputTitle" 的元素加上 `color: rgba(#002f5a, 0.6)` 屬性。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**:nth-child()**](https://www.runoob.com/cssref/sel-focus.html)
```css=
.tableBody
&:nth-child(even)
background: rgba(#5fa8ff, 0.2)
```
* 元素的 ***第 n 個子元素***。
* 例：
`:nth-child(2)`：元素的第 2 個子元素。
`:nth-child(odd)`：元素的所有第奇數個子元素。
`:nth-child(even)`：元素的所有第偶數個子元素。
`:nth-child(3n+1)`：炫技，但實用。元素的所有第 3 的倍數 +1 個子元素。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
### [**:last-child**](https://www.runoob.com/cssref/sel-last-child.html)
```css=
&:last-child
border-right: solid 1px rgba(#6692af, 0.3)
```
* 元素的 ***最後一個子元素***。
* 好用，可配合其他選取器例如 `:not()` 使用如下：
```css=
&:not(:last-child)
border-right: solid 1px #000000;
```
* 上述 sass 意思為：元素的所有元素不包含最後一個元素(除了最後一個元素以外)，都套用樣式
`border-right: solid 1px #000000`。
<hr style="height: 2px; margin-top: 40px; background: #f2e8ff">
:::success
以上粗略提及主題 .sass 裡面會用到的 css 選取器與其意義，現在可以開始修改主題模板來創建屬於您的主題了😄😄😄
:::
<br><br><br><br><br><br>
Sign in with Wallet
Connect another wallet