nes-css in Cytube (2019/1/20)

.css

@font-face
{
font-family: 美咲ゴシック;
src: url('https://cdn.leafscape.be/misaki/misaki_gothic_web.woff2')
     format("woff2");
}

.navbar-header, .collapse.navbar-collapse > ul > li > a , button, #chatheader, #videowrap-header, #plmeta_history, #plmeta,
.server-msg-reconnect
{
 font-family: 美咲ゴシック;
}

 /*!***************************************************************************\
  NES.css Framework
  Version: development

\*****************************************************************************/
/*!
 * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */

/*
* html {
*     cursor: url(https://unpkg.com/nes.css/assets/cursor.png),auto
* }
*/

/*****************************************************************
*  ボタンの装飾
*****************************************************************/
.btn {
     position: relative;
     display: inline-block;
     text-align: center;
     vertical-align: middle;
/*     cursor: url(https://unpkg.com/nes.css/assets/cursor-click.png),pointer; */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     border: solid 3px #212529;
     border-radius: 0;
     background-color: #fff;
     box-shadow: inset -4px -4px #adafbc;
 }
 .btn:focus,
 .btn:hover {
     background-color: #e7e7e7;
     box-shadow: inset -6px -6px #adafbc
 }
 .btn:active {
     box-shadow: inset 4px 4px #adafbc
 }

 .btn:focus {
     outline: 0
 }

 .btn.btn-danger {
     color: #fff;
     background-color: #e76e55;
     box-shadow: inset -4px -4px #8c2022
 }
 .btn.btn-danger:focus,
 .btn.btn-danger:hover {
     background-color: #ce372b;
     box-shadow: inset -6px -6px #8c2022
 }
 .btn.btn-danger:active {
     box-shadow: inset 4px 4px #8c2022
 }

/*****************************************************************
*  wellの装飾
*****************************************************************/

.well {
     padding: 1.5rem 2rem;
     border: none !important;
     background-color: transparent !important;
 }

 .well > :last-child {
     margin-bottom: 0
 }
 .well::after,
 .well::before {
     position: absolute;
     z-index: -1;
     content: ""
 }
 .well::before {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }
 .well::after {
     top: 2px;
     right: 2px;
     bottom: 2px;
     left: 2px;
     border-color: #212529;
     border-style: solid;
     border-width: 4px;
     border-radius: 4px;
 }

 .well.active {
     
     color: #fff
 }
 .well.active::before {
     background-color: #212529
 }
 .well.active::after {
     border-color: #fff
 }

.form-control {

     /* border: solid 3px #212529; */
     height: 38px;
     border-radius: 0;

}


/*****************************************************************
*  チャット欄の装飾
*****************************************************************/

 #chatwrap {
     position: relative;
     padding: 1rem 1rem;
     padding-top: 2rem;

 }

 #chatwrap > :last-child {
     margin-bottom: 0
 }
 #chatwrap::after,
 #chatwrap::before {
     position: absolute;
     z-index: -1;
     content: ""
 }
 #chatwrap::before {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
background-color: #212529;
 }
 #chatwrap::after {
     top: 2px;
     right: 2px;
     bottom: 2px;
     left: 2px;
     border-color: #fff;
     border-style: solid;
     border-width: 4px;
     border-radius: 4px
 }

 .nes-username {
     font-family: 美咲ゴシック;
     display: table;
     padding: 0 .5rem;
     margin: -2rem 0 1rem;
     font-size: 3rem;
     background-color: #212529;
     color: #fff;
     text-align: center;
     margin: -2rem auto;

}

#chatheader {
  background: transparent;
  border: 0;
 
}

.pointer#usercount{
  color:white;
}

.pointer#usercount > * {
  color: #555;
}

#chatline{
     margin: 10px auto;
     width: 98%;
     border: none;
     outline-color: #e7e7e7;
     box-shadow: 0 4px #fff,0 -4px #fff,4px 0 #fff,-4px 0 #fff;
     background-color: #212529;
     color: white;
}

#userlist{
   border: 0;
}

#userlist{
 
  padding-left: 8px;

}

/*****************************************************************
*  ビデオ欄の装飾
*****************************************************************/

#videowrap {
     position: relative;
     padding: 1rem 1rem;
     padding-top: 2rem;

 }

 #videowrap > :last-child {
     margin-bottom: 0
 }
 #videowrap::after,
 #videowrap::before {
     position: absolute;
     z-index: -1;
     content: ""
 }
 #videowrap::before {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
background-color: #212529;
 }
 #videowrap::after {
     top: 2px;
     right: 2px;
     bottom: 2px;
     left: 2px;
     border-color: #fff;
     border-style: solid;
     border-width: 4px;
     border-radius: 4px
 }

#currenttitle{
     font-family: 美咲ゴシック;
     display: table;
     padding: 0 .5rem;
     margin: -2rem 0 1rem;
     font-size: 1.5rem;
     background-color: #212529;
     
     text-align: center;
     margin: -2rem auto 1rem;
     border: 0;
}

#videowrap-header{
   border:0;
   background: transparent;
   color: #fff;
}

#resize-video-smaller {
    padding: 2px;
    background-color: #212529;

}
#resize-video-larger {
    padding: 2px;
    background-color: #212529;
}

/*****************************************************************
*  nes-jp-logo
*****************************************************************/

 .nes-jp-logo {
     position: relative;
     display: inline-block;
     width: 55px;
     height: 33px
 }
 .nes-jp-logo::before {
     position: absolute;
     top: -3px;
     left: -3px;
     content: "";
     background: 0 0;
     width: 3px;
     height: 3px;
     color: #871f37;
     box-shadow: 21px 3px #333,21px 6px #333,24px 9px #333,3px 12px,6px 12px,9px 12px,12px 12px,15px 12px,18px 12px,21px 12px,24px 12px,27px 12px,30px 12px,33px 12px,36px 12px,39px 12px,42px 12px,45px 12px,3px 15px,6px 15px #dfd3b9,9px 15px #dfd3b9,12px 15px #dfd3b9,15px 15px #dfd3b9,18px 15px #dfd3b9,21px 15px,24px 15px,27px 15px,30px 15px,33px 15px,36px 15px,39px 15px,42px 15px,45px 15px,3px 18px,6px 18px #dfd3b9,9px 18px #dfd3b9,12px 18px #333,15px 18px #dfd3b9,18px 18px #dfd3b9,21px 18px,24px 18px,27px 18px,30px 18px,33px 18px,36px 18px,39px 18px,42px 18px,45px 18px,3px 21px,6px 21px #dfd3b9,9px 21px #333,12px 21px #333,15px 21px #333,18px 21px #dfd3b9,21px 21px #dfd3b9,24px 21px #dfd3b9,27px 21px #dfd3b9,30px 21px #dfd3b9,33px 21px #dfd3b9,36px 21px #dfd3b9,39px 21px #dfd3b9,42px 21px #dfd3b9,45px 21px,3px 24px,6px 24px #dfd3b9,9px 24px #dfd3b9,12px 24px #333,15px 24px #dfd3b9,18px 24px #dfd3b9,21px 24px #333,24px 24px,27px 24px #333,30px 24px #dfd3b9,33px 24px #333,36px 24px #dfd3b9,39px 24px #333,42px 24px #dfd3b9,45px 24px,3px 27px,6px 27px #dfd3b9,9px 27px #dfd3b9,12px 27px #dfd3b9,15px 27px #dfd3b9,18px 27px #dfd3b9,21px 27px #dfd3b9,24px 27px #dfd3b9,27px 27px #dfd3b9,30px 27px #dfd3b9,33px 27px #dfd3b9,36px 27px #dfd3b9,39px 27px #dfd3b9,42px 27px #dfd3b9,45px 27px,3px 30px,6px 30px,9px 30px,12px 30px,15px 30px,18px 30px,21px 30px,24px 30px,27px 30px,30px 30px,33px 30px,36px 30px,39px 30px,42px 30px,45px 30px
 }

.js

var getLoginName = function() {
    var name = $('#welcome').text().slice(5).slice(0, -2);
    if(name !== undefined || name !== ""){
       return name;
    } else {
       // 動いてない
       return "ななし";
    }

};

$("#chatwrap").prepend("<p class='nes-username'>"+ getLoginName() +"</p>")

.md

Licenses

NES.css Copyright（c）2018 B.C.Rikko. https://github.com/nostalgic-css/NES.css