toyaku_webclass_dark_3 by 3pino

/* ==UserStyle==
@name           toyaku_webclass_dark_3
@namespace      katharina.ps.toyaku.ac.jp/webclass
@version        3.2.1
@description    darkmode
@author         K
==/UserStyle== */

@-moz-document url-prefix("https://katharina.ps.toyaku.ac.jp/webclass/") {
/* 汎用*/
    :root{
        --fg:  #aaa;
        --bg:  #000;
        --bg0: #000;
        --bg1: #111;
        --bg2: #222;
        --bg3: #333;
        --bd:  #444;
    }
    html, body, th{
        background-color: var(--bg);
        color: var(--fg);
    }
    
    ::-webkit-scrollbar{      width: 12px;}
    ::-webkit-scrollbar-track{background-color: #444;}
    ::-webkit-scrollbar-thumb{background-color: #666;}
    
    a{        color: #55a;}
    a:hover{  color: #a60;}
    a:visited{color: #60a;}

    button, .btn-default, input[type="button"], 
    body.GlNav a.btn-default/*ポートフォリオ用*/{
            background-color: var(--bg1);
            color: var(--fg);
            border: 1px solid var(--bd);
            border-radius: 5px;
        
        &:hover{
                background-color: var(--bg2);
            color: var(--fg);
            border: 1px solid var(--bd);
            border-radius: 5px;
        }
        
        &:active, &:active:hover, &:focus, &:active:focus{
                background-color: var(--fg);
                color: var(--bg3);
            border: 1px solid var(--bd);
            border-radius: 5px;
                outline: 2px solid var(--fg);
        }
    }
    .btn-primary:focus{
        outline: 1px solid var(--fg);
    }
    
    hr{
        background-color: var(--bd);
        border-color: var(--bd);
    }

    input{
        background-color: #333;
        color: #aaa;
        border: 2px solid #777;
        border-radius: 2px;
    }
    
    input[type="text"]:-webkit-autofill, input[type="password"]:-webkit-autofill{
        /*背景色と文字色は無効化されるため別の方法をとる*/
        -webkit-box-shadow: 0 0 0 1000px #333 inset;
        -webkit-text-fill-color: #aaa;
    }
    input:focus{
        outline: 1px solid #aaa;
    }
    
    input[type="radio"] {
        appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid #aaa;
        vertical-align: -5px;
        outline: none;
    &::before { /* ラジオボタンの内側の● */
      display: block;
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background-color: #aaa;
      transform: translate(1px, 1px) scale(0);
      transform-origin: center;
      transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
    }
    &:checked::before {
      transform: translate(2px, 2px) scale(1);
    }
  }
    
    select{
        background-color: var(--bg1);
        color: var(--fg);
    }
    
    .odd, table tr.odd, table td.odd{background-color: var(--bg1);}
    .eve, table tr.eve, table td.eve{background-color: var(--bg2);}

    
    
/* ログインページ*/
    /*上の青い背景と文字*/
    tr[bgcolor~="#0A6CCE"]{background-color: #07488a;}
    font[color~="#FFCC33"]{color: #ab8922;}
    font[color~="#FFFFFF"]{color: #aaa;}
    
    /*灰色の仕切り*/
    table[bgcolor~="#999999"]{background-color: #666;}

    /*白背景の画像*/
    img[src~="/webclass/login/img/toyaku.png"]{
        opacity: 0.67;
    }
    
    /*表の「WebClass USER」の背景と文字*/
    table[bgcolor~="peru"]{background-color: #8a4c2b;}
    table[bgcolor~="gray"]{background-color: #575757;}
    font[color~="lemonchiffon"]{color: #aba789;}
    
    /*表内部の背景*/
    tr[bgcolor~="whitesmoke"]{background-color: #111;}
    
    /*「ようこそWebClassへ」、表の「パスワード」など*/
    .dark_blue{color: #55a;}
    
    
    /*下の表の先頭の青い背景*/
    .bgc_main{
        background-color: #2f5778;
        color: #aaa;
    }
    
/*お知らせ*/
    h1.pkgtitle, a.uppernavi:link, a.uppernavi:hover, a.uppernavi:visited, a.uppernavi:active{
        color: #aaa;
    }
    
    
    .navi dd a:link, .navi dd a:active, .navi dd a:visited{
        background-color:#222;
        color: #aaa;
    }
    
    .content{background-color: #000;}
    
    div[info-detail-head]>div[class~="data"], .infopkg .info-detail-head, .infopkg .info-detail-foot{
        background-color: #222;
    }
    
    .infopkg div.info-detail-body{
        background-color: #333;
        color: #aaa !important;
        border-color: #222;
    }
/*お知らせ一覧 informations*/
    *[color="red"]{color: #a00;}
    
/*コースリスト*/
    /*ヘッダheader*/
    .navbar-default{
        background-color: #111;
        border-color: #222;
    }
    /*スマホ版、ヘッダのハンバーガー*/
    .navbar-default .navbar-toggle{
        border-color: var(--bd);
    }
    
    /*ヘッダの「コース」*/
    header .navbar-default .navbar-nav>a{
        color: var(--fg);
    }
    header .navbar-default .navbar-nav>.active>a,
    header .navbar-default .navbar-nav>.dropdown>a{
        background-color: var(--bg1);
        color: var(--fg);
        &:hover, &:active, &:focus{
            background-color: var(--bg2);
            color: #aaa;
        }
        
    }
    .dropdown-menu{
        background-color: #444;
    }
    .dropdown-menu>li>a{
        color: #aaa;
    }
    .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
        background-color: #444;
        color: #aaa;
    }
    
    /*四角のかたまり。「課題実施状況一覧」など*/
    div.side-block,/*左の四角*/
    div#UserTopInfo,/*右の四角*/
    section.panel-default,
    .panel-default>div.list-group>section{/*科目のページの真ん中*/
        background-color: #111;
        border-color: #444;
    }
    h4.side-block-title,/*左の四角*/
    #UserTopInfo h4.page-header,/*右の四角*/
    .panel-default>div.panel-heading{/*科目のページの真ん中*/
        color: #aaa;
        background-color: #222;
        border-bottom: 1px solid #444;
    }
    
    /*酸化しているコース UI部*/
    .form-control{
        background-color: #000;
        color: #aaa;
        border-color: #444;
        box-shadow: inset 0 -1px 1px #666;
    }
    
    /*参加しているコース 下部*/
    .courseLevelOne li{
        color: #aaa;
    }
    .courseTree-levelTitle{
        background-color: #114;
    }
    .courseLevelTwo li .title{
        background-color: #000;
        border-color: #222;
    }
    
    .courseList li{
        background-color: #222;
    }
    
    div.course-memo{
        background-color: #000 !important;
    }
/*科目のページ*/
    /*「お知らせがあります」*/
    div.alert-info{
        background-color:#94a2a8;
        border-color: #7f9da3;
        color: #214c61;
    }
    
    /*タイムライン*/
    .page-header{
        border-color: #777;
    }
    .list-group-item{
        background-color: #000;
    }
    .timeline-message-author[data-v-1ba48192]{
        border-color: #1e476b;
    }
    
    /*四角のかたまりは「コースリスト」にて処理*/
    
    /*フッターfooter*/
    footer, .ft-footer{
        background-color: #111;
        border-color: #222;
    }

/*授業資料ページ*/
    /*ヘッダーheader　要修正*/
    html>body>div>form>table>tbody>tr>*{
        background-color: #111!important;
    }
    
    /*左*/
    div#top div#WsTitle{
        background-color:#06223d;
        color: #aaa;
    }
    div#top div#WsTitle h1{
        color: #aaa;
        border-color: #777;
    }
    .bkkhaki{
        background-color: #770;
    }
    
    frame[name="webclass_content"]{
        opacity: 0.67;
    }

/*教材*/
    table.layouter td.navi{
        background-color: #111;
    }
    td.navi div#WsTitle{
        background-color: #aa8844;
    }
    table#ContentInfo th{
        background-color: #2f5778;
    }
    table#ContentInfo th,
    table#ContentInfo td{
        border-color: #7d7d7d;
        color: #aaa;
    }
    ul.restrictterms li,
    ul.absoluteterms li{
        color: #44a;
    }
    ul.absoluteterms li.tips{
        color: #47a;
    }

/*テスト*/
    a[target="showimageWindow"]>img{
        background-color: #fff;
        opacity: 0.67;
    }
    span.red_moji{
        background-color: #aaa !important;
        color: #aa2200;
        
    }
    font[color="#EEEEEE"] {
        color: #9e9e9e;
    }
    
    
/*テスト結果、「成績を閉じる」*/
    body.GlNav>div#PageBody>table>tbody>tr>td{
        background-color: #111 !important;
    }
    body.GlNav a:link, body.GlNav a:visited, body.GlNav a:hover{
        color: #aaa;
    }
    div#WsTitle h1, div#WsTitle a:link, div#WsTitle a:visited{
        color: #aaa;
    }
    div#WsTitle{
        color: #aaa;
    }
    td[bgcolor="#EEEEEE"]{
        background-color: #111;
    }
    td[bgcolor="#EEEEEE"] div#WsTitle.bgc_sub{
        background-color: #0c437a;
    }
    form[name~="button_form"] th,
    *:has(>th[style~="text-align:right"]) *{
        background-color: #30597a !important;
        color: #aaa;
    }
    tr[bgcolor="#FFFFFF"]{
        background-color: #222;
    }
    h1#ViewTitle{/*#336*/
        color:#44a;
    }
    table.seloptions th, table.selcomplex th{
        background-color: transparent;
        color: #aaa;
    }
    table.qstnoptions label:hover{
        background-color: #222;
    }
    
    center:has(font[color="blue"])>img{
        background-color: #fff;
        opacity: 0.67;
    }
    
/*メッセージ*/
    form[name~="condition"]>table:first-child td{
        border-width: 0px;
    }
    table#MsgBox th, table#MsgBox td{
        border-color: #111;
    }

    a:link .sorticon, a:visited .sorticon, a:active .sorticon{
        color: #aaa;
    }
/*受信メッセージ*/
    table#MessageData th, table#MessageData td{
        color: #aaa;
    }
    
/*zoom講義*/
    body>form>table>tbody>tr>*{
        background-color: #111 !important;
    }
    div#zoom-ui-frame{
        background-color: #111;
    }
}...