つべアンケ用夏デザインパック

tubeenquete_summer_theme.md

⚠作り途中のため、テーマが増えたり、デザインが変更になったりします。DLされる際はご了承ください。

これは何

• YouTube配信者向けChrome拡張機能「つべアンケ」の夏っぽいデザイン拡張です。
• ご本家様

誰が使っていいの

• ご自由に。これを元にした改変もOKです。
• 使用報告は必須ではありませんが、本デザインの作者に連絡頂けると次回作作る励みになるかもです。

使い方

• 拡張機能「つべアンケ」をインストール
• このgistをDLする
• 自分で現在開催しているYouTUbeのライブ配信画面を開き、「アンケート機能を使う」を押す
• 「外部CSSを読み込む」横のファイル選択ボタンから好きな方のCSSを読み込ませる
• あとは公式の操作方法に従って下さい

内容物

• tubeenquete_summer_theme_shavedice.css
  • 隅にかき氷が置いてある
  • 

tubeenquete_summer_theme_shavedice.css

@keyframes questionnaire_animation-shavedice {
    50%, 75% {
            background-color : rgba(255, 77, 77, 0.90);
            background-image :
                linear-gradient(116deg,
                             rgba(255, 255, 255, 0.00) 0%,
                             rgba(255, 255, 255, 0.00) 12.5%,
                             rgba(255, 255, 255, 0.214) 12.5%,
                             rgba(255, 255, 255, 0.214) 25%,
                             rgba(255, 255, 255, 0.328) 25%,
                             rgba(255, 255, 255, 0.328) 37.5%,
                             rgba(255, 255, 255, 0.442) 37.5%,
                             rgba(255, 255, 255, 0.442) 50%,
                             rgba(255, 255, 255, 0.557) 50%,
                             rgba(255, 255, 255, 0.557) 62.5%,
                             rgba(255, 255, 255, 0.671) 62.5%,
                             rgba(255, 255, 255, 0.671) 75%,
                             rgba(255, 255, 255, 0.785) 75%,
                             rgba(255, 255, 255, 0.785) 87.5%,
                             rgba(255, 255, 255, 0.900) 87.5%,
                             rgba(255, 255, 255, 0.900) 100%),
                linear-gradient(206deg,
                             rgba(255, 255, 255, 0.00) 0%,
                             rgba(255, 255, 255, 0.00) 12.5%,
                             rgba(255, 255, 255, 0.214) 12.5%,
                             rgba(255, 255, 255, 0.214) 25%,
                             rgba(255, 255, 255, 0.328) 25%,
                             rgba(255, 255, 255, 0.328) 37.5%,
                             rgba(255, 255, 255, 0.442) 37.5%,
                             rgba(255, 255, 255, 0.442) 50%,
                             rgba(255, 255, 255, 0.557) 50%,
                             rgba(255, 255, 255, 0.557) 62.5%,
                             rgba(255, 255, 255, 0.671) 62.5%,
                             rgba(255, 255, 255, 0.671) 75%,
                             rgba(255, 255, 255, 0.785) 75%,
                             rgba(255, 255, 255, 0.785) 87.5%,
                             rgba(255, 255, 255, 0.900) 87.5%,
                             rgba(255, 255, 255, 0.900) 100%);
    }
}

@keyframes questionnaire_animation-bottomleft {
}

/* グリーンバック */
body {
    background-color: lime;
}
.questionnaire__result {
    text-align: left;
    margin-top: 20px;
    width : 80%;
}
.questionnaire__result-window {
    text-align: center;
    width: 100%;
    min-height: 300px;
    padding: 10px;
}

/* 画面上部のアンケートタイトル部分 */
.questionnaire__result-title {
    font-size: 1.75em;
    width: 100%;
    padding: 30px;
    color: #fff;
    text-align: center;
    background: rgb(59, 59, 59);
}

/* アンケート項目text部分 */
.questionnaire__result-text {
    font-size: 1.5em;
}

/* アンケートの枠デザイン */
.questionnaire__result-item {
    display: inline-block;
    position: relative;
    width: 330px;
    vertical-align: top;
    padding: 25px;
    overflow-wrap: break-word;
    color: #fff;
    background: #1b77c2;
    box-shadow: 0px 0px 0px 10px #1b77c2;
    border: solid 2px rgba(205,254,255,1);
    margin: 20px 15px;
    text-align: center;
}

.questionnaire__result-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 50px;
    height: 70px;
    /* チェックパターンのCSS */
    background-color : rgba(255, 77, 77, 0.83);
    background-image :
            linear-gradient(116deg,
                             rgba(255, 255, 255, 0.00) 0%,
                             rgba(255, 255, 255, 0.00) 12.5%,
                             rgba(255, 255, 255, 0.204) 12.5%,
                             rgba(255, 255, 255, 0.204) 25%,
                             rgba(255, 255, 255, 0.308) 25%,
                             rgba(255, 255, 255, 0.308) 37.5%,
                             rgba(255, 255, 255, 0.412) 37.5%,
                             rgba(255, 255, 255, 0.412) 50%,
                             rgba(255, 255, 255, 0.517) 50%,
                             rgba(255, 255, 255, 0.517) 62.5%,
                             rgba(255, 255, 255, 0.621) 62.5%,
                             rgba(255, 255, 255, 0.621) 75%,
                             rgba(255, 255, 255, 0.725) 75%,
                             rgba(255, 255, 255, 0.725) 87.5%,
                             rgba(255, 255, 255, 0.830) 87.5%,
                             rgba(255, 255, 255, 0.830) 100%),
            linear-gradient(206deg,
                             rgba(255, 255, 255, 0.00) 0%,
                             rgba(255, 255, 255, 0.00) 12.5%,
                             rgba(255, 255, 255, 0.204) 12.5%,
                             rgba(255, 255, 255, 0.204) 25%,
                             rgba(255, 255, 255, 0.308) 25%,
                             rgba(255, 255, 255, 0.308) 37.5%,
                             rgba(255, 255, 255, 0.412) 37.5%,
                             rgba(255, 255, 255, 0.412) 50%,
                             rgba(255, 255, 255, 0.517) 50%,
                             rgba(255, 255, 255, 0.517) 62.5%,
                             rgba(255, 255, 255, 0.621) 62.5%,
                             rgba(255, 255, 255, 0.621) 75%,
                             rgba(255, 255, 255, 0.725) 75%,
                             rgba(255, 255, 255, 0.725) 87.5%,
                             rgba(255, 255, 255, 0.830) 87.5%,
                             rgba(255, 255, 255, 0.830) 100%);
    border-radius: 60% 60% 60% 60% / 50% 50% 40% 40%;
    animation-name: questionnaire_animation-shavedice;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.questionnaire__result-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -5px;
    z-index: 10;
    width: 60px;
    height: 25px;
    background-color: rgb(122, 213, 230); 
    border-radius : 0% 0% 100% 100%;
}

/* パーセンテージ(黄色)の部分 */
.questionnaire__result-percentage {
    color: #fff;
    font-weight: bold;
    font-size: 1.75em;
}