@charset "UTF-8";

/*
Theme Name: sammiwago
Theme URI: https://www.footmark.com.tw
Author: 腳印資訊
Description: 基於 Bootstrap 4 主題。
Version: 1.0
License:
License URI:
Tags:
*/


/*
 * 自訂 Bootstrap 風格樣式
 */

:root {
    --sam-color: var(--info);
}
.sam-text-color {
    color: var(--sam-color);
}
a.sam-text-color:focus,
a.sam-text-color:hover {
    color: #0f6674 !important;
}
.sam-text-red {
    color: red;
}


/*
 * 共用
 */

body {   
    /* Bootstrap 預設字體，但於最後加入一系列的中文字體 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "微軟正黑體", "Microsoft JhengHei", Meiryo, Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro";
}
.sam-main header hr {
    background: var(--sam-color);
    padding: 2px;
    width: 10%;
}
.sam-main h2 {
    border-bottom: 1px solid var(--sam-color);
    margin-top: 1em;
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
}
.card .card-header {
    border-bottom: 1px solid rgba(0,0,0,.125);
    font-size: 1.25rem;
    margin: 0;
    padding: 12px 20px;
}
.table caption {
    caption-side: top;
    text-align: center;
}


/*
 * nav
 */
.sam-nav {
    background-color: #343a40;
}
.navbar .navbar-brand {
    color: #ffffff !important;
}
.navbar-brand:focus,
.navbar-brand:hover {
    color: var(--sam-color) !important;
}

/*
 * 第一層 */
.navbar {
    background-color: #343a40;
}
/* change the brand and text color */
.navbar .navbar-brand,
.navbar .navbar-text {
    color: var(--sam-color);
}
/* change the link color */
.navbar .navbar-nav .nav-link {
    color: #ffffff;
}
/* change the color of active or hovered links */
.navbar .nav-item.active .nav-link,
.navbar .nav-item:hover .nav-link {
    color: var(--sam-color);
}

/*
 * 第二層 */
/* .navbar .navbar-nav .dropdown-menu  { 
  background-color: var(--sam-color);
}
.navbar .navbar-nav .dropdown-menu>li>a  { 
  color: var(--sam-color);
}
.navbar .navbar-nav .dropdown-menu>li>a:hover,.navbar .navbar-nav .dropdown-menu>li>a:focus  { 
  color: var(--sam-color);
} */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--sam-color);
}
.navbar-brand:hover .oi-home, #navbar-supported-content .navbar-nav .current-menu-ancestor>a, #navbar-supported-content .navbar-nav>.menu-item>a:hover, #navbar-supported-content .navbar-nav>.menu-item>a.active {
    color: var(--sam-color);
}
.navbar .dropdown-item:focus,
.navbar .dropdown-item:hover {
    color: #ffffff;
    background-color: var(--sam-color);
}


/*
 * 麵包屑
 */

#breadcrumbs span {
    color: #6c757d;
}
#breadcrumbs a {
    padding: 0 0.3rem;
}
#breadcrumbs > span > span > a {
    padding-left: 0;
}
#breadcrumbs .breadcrumb_last {
    padding-left: 0.3rem;
}


/*
 * header
 */

#sam-header {
    position: relative;
}
#sam-header h2 {
    font-size: 1.65rem;
}
#sam-header .fa-facebook-square {
    color: #4267b2;
    font-size: 3rem;
    margin-bottom: -25px;
    position: absolute;
        right: 0;
        bottom: 50%;
}
#sam-header a:hover .fa-facebook-square {
    opacity: 0.8;
}


/*
 * footer
 */

.sam-footer {
    background-color: #343a40;
    color: var(--sam-color);
}


/* 
 * 發音
 */

.sam-play-container {
    display: inline-block;
    overflow: hidden;
}
.sam-play-container > div {
    display: inline;
    line-height: 1.3;
    margin: 0 5px 0;
    text-align: center;
}
.sam-play-container > button,
.sam-play-container > div,
.sam-play-container > .sam-translation {
    float: left;
}
.sam-play-container > button,
.sam-play-container > .sam-translation {
    margin-top: 15px;
    margin-bottom: 0;
}
.sam-play-container .sam-kk {
    font-size: 1.2rem;
    opacity: .8;
}
.sam-playing {
    padding: 0;
}
.sam-playing + .sam-audio {
    margin-left: 5px;
}
.sam-audio {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1;
    transition: transform 0.2s;
}
/* Click 文字放大動畫 */
.table .scale,
.sam-play-container .scale {
    transform: scale(1.2) translateY(-1px);
}
.scale {
    color: var(--green) !important;
}


/*
 * 母音發音
 */

/* 移除表格最上面的線 */
#sam-vowels .table th,
#sam-consonants .table th,
#sam-pinyin-exercises .table th,
#sam-letters-memory .table th,
#sam-vowels .table tbody td,
#sam-consonants .table tbody td,
#sam-pinyin-exercises .table tbody td {
    border-top: none;
}
#sam-letters-memory .table tbody td,
#sam-consonants .table tbody td,
#sam-pinyin-exercises .table tbody td,
#sam-letters-memory .table tbody td {
    vertical-align: middle;
}


/* 
 * 英文字母組合後發音
 */

#sam-phonics .table tbody td {
    font-size: 1.5rem;
}
#sam-phonics .table .sam-single span {
    font-size: 2rem;
    opacity: .6;
    position: relative;
        left: -19px;
        top: 3px;
}