☰

BIT-Moodle-Theme-Enhance

provide mordern theme design for moodle system.

当前为 2020-03-01 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name         BIT-Moodle-Theme-Enhance
  3. @namespace    https://github.com/fky2015/
  4. @version      0.1.3
  5. @description  provide mordern theme design for moodle system.
  6. @author       FKYnJYQ
  7. ==/UserStyle== */
  8.  
  9. @-moz-document domain("lexue.bit.edu.cn"),
  10.                url-prefix("http://online.bit.edu.cn/moodle") {
  11.   :root {
  12.     --main-gap-color: #181a26;
  13.     --main-bg-color: #282a36;
  14.     --main-selection-color: #44475a;
  15.     --main-header-color: #f1fa8c;
  16.     --main-fg-color: #f8f8f2;
  17.     --main-block-color: var(--main-bg-color);
  18.     --main-comment-color: #6272a4;
  19.     --main-red: #ff5555;
  20.     --main-green: #50fa7b;
  21.     --main-cyan: #8be9fd;
  22.     --main-pink: #ff79c6;
  23.   }
  24.  
  25.   #page-content {
  26.     max-width: 100% !important;
  27.   }
  28.  
  29.   html,
  30.   #page-course-search > div.text-center {
  31.     background: var(--main-bg-color);
  32.   }
  33.  
  34.   /* 导航栏 */
  35.   header,
  36.   #page,
  37.   .navbar .brand,
  38.   .navbar-inner,
  39.   #search,
  40.   #coursesearchbox,
  41.   .navbar .nav > li > a:focus,
  42.   .navbar .nav > li > a:hover,
  43.   .navbar .nav > .active > a,
  44.   .navbar .nav > .active > a:hover,
  45.   .navbar .nav > .active > a:focus,
  46.   .navbar .nav li.dropdown.open > .dropdown-toggle,
  47.   .navbar .nav li.dropdown.active > .dropdown-toggle,
  48.   .navbar .nav li.dropdown.open.active > .dropdown-toggle {
  49.     background: var(--main-bg-color) !important;
  50.     max-width: 100%;
  51.   }
  52.  
  53.   .navbar .dropdown-menu {
  54.     border-bottom: 0px solid #438eb9;
  55.   }
  56.  
  57.   .navbar .dropdown-menu > li > a,
  58.   .navbar .dropdown-menu > li > a:focus {
  59.     background-color: var(--main-red) !important;
  60.     color: var(--main-fg-color);
  61.   }
  62.  
  63.   #page-mod-hvp-view > div.text-center,
  64.   #page-enrol-index > div.text-center,
  65.   #page-mod-page-view > div.text-center,
  66.   #page-course-view-topics > div.text-center,
  67.   #page-course-view-weeks > div.text-center,
  68.   .text-center {
  69.     background: var(--main-bg-color);
  70.   }
  71.  
  72.   button,
  73.   input,
  74.   .navbar .btn-navbar {
  75.     background: var(--main-bg-color) !important;
  76.     border: 1px solid var(--main-fg-color) !important;
  77.     color: var(--main-fg-color) !important;
  78.   }
  79.  
  80.   input[type="image"],
  81.   #coursesearchbox {
  82.     border-width: 0 !important;
  83.   }
  84.  
  85.   #search input[type="submit"] {
  86.     background: var(--main-bg-color)
  87.       url(/theme/image.php/lambda/theme/1582254235/bg/icon-search) no-repeat
  88.       center center !important;
  89.     border-width: 0px !important;
  90.   }
  91.  
  92.   header span[tabindex="0"] {
  93.     color: var(--main-green);
  94.   }
  95.  
  96.   table#form td.submit,
  97.   .form-buttons,
  98.   .path-admin .buttons,
  99.   #fitem_id_submitbutton,
  100.   .fp-content-center form + div,
  101.   div.backup-section + form,
  102.   #fgroup_id_buttonar {
  103.     background-color: var(--main-bg-color);
  104.   }
  105.  
  106.   .singleselect form,
  107.   .singleselect select,
  108.   .moodle-actionmenu[data-enhanced].show .menu {
  109.     background-color: var(--main-bg-color);
  110.     color: var(--main-fg-color);
  111.   }
  112.  
  113.   /* 功能块 */
  114.   .block {
  115.     background: var(--main-block-color);
  116.     margin-bottom: 0px;
  117.     border: 0;
  118.     border-bottom: 2px solid var(--main-gap-color);
  119.   }
  120.  
  121.   .generaltable tbody > tr:nth-child(odd) > td,
  122.   .forumpost {
  123.     background: var(--main-bg-color);
  124.   }
  125.  
  126.   /* 主体 */
  127.   body {
  128.     color: var(--main-fg-color);
  129.   }
  130.  
  131.   .content h3.sectionname,
  132.   .bx-prev,
  133.   .bx-next,
  134.   .course-content .current .content {
  135.     background: var(--main-bg-color);
  136.   }
  137.  
  138.   .course-content .current {
  139.     background: var(--main-bg-color) !important;
  140.     border: 5px solid var(--main-selection-color) !important;
  141.   }
  142.  
  143.   .fa-chevron-circle-up:before {
  144.     color: var(--main-selection-color);
  145.   }
  146.  
  147.   /* 代码编辑 */
  148.   .path-mod-programming td.programming-io span {
  149.     background-color: var(--main-selection-color);
  150.   }
  151.  
  152.   .nav-tabs,
  153.   .nav-tabs > .active > a {
  154.     background-color: var(--main-bg-color);
  155.     border: 0;
  156.     color: var(--main-fg-color);
  157.   }
  158.  
  159.   .nav-tabs > li > a {
  160.     background-color: var(--main-bg-color);
  161.     color: var(--main-fg-color);
  162.   }
  163.  
  164.   .nav-tabs > .active > a[href],
  165.   .nav-tabs > li.active {
  166.     color: var(--main-green);
  167.     border-bottom: 1px solid var(--main-green);
  168.     border-top: 0;
  169.     margin-bottom: -1px;
  170.     margin-top: -2px;
  171.   }
  172.  
  173.   .path-mod-programming #test-result-detail .passed,
  174.   .path-mod-programming #test-result-detail .passed .cell {
  175.     background-color: var(--main-bg-color);
  176.   }
  177.  
  178.   .passed a {
  179.     color: var(--main-green);
  180.   }
  181.  
  182.   .nav > .disabled > a {
  183.     background: var(--main-bg-color);
  184.   }
  185.   .nav > .disabled > a:hover {
  186.     background: var(--main-bg-color) !important;
  187.     transform: none !important;
  188.     border: none;
  189.   }
  190.  
  191.   .dp-highlighter ol li,
  192.   .dp-highlighter .columns div {
  193.     line-height: 24px;
  194.   }
  195.  
  196.   body {
  197.     font-size: 18px;
  198.   }
  199.  
  200.   .content h3.sectionname {
  201.     border-color: #4f0f0f;
  202.     border-width: 0px;
  203.   }
  204.  
  205.   table#explaincaps tbody > tr:nth-child(odd) > td,
  206.   table#defineroletable tbody > tr:nth-child(odd) > td,
  207.   table.grading-report tbody > tr:nth-child(odd) > td,
  208.   table#listdirectories tbody > tr:nth-child(odd) > td,
  209.   table.rolecaps tbody > tr:nth-child(odd) > td,
  210.   table.userenrolment tbody > tr:nth-child(odd) > td,
  211.   table#form tbody > tr:nth-child(odd) > td,
  212.   form#movecourses table tbody > tr:nth-child(odd) > td,
  213.   #page-admin-course-index .editcourse tbody > tr:nth-child(odd) > td,
  214.   .forumheaderlist tbody > tr:nth-child(odd) > td,
  215.   table.flexible tbody > tr:nth-child(odd) > td,
  216.   .generaltable tbody > tr:nth-child(odd) > td,
  217.   table#explaincaps tbody > tr:nth-child(odd) > th,
  218.   table#defineroletable tbody > tr:nth-child(odd) > th,
  219.   table.grading-report tbody > tr:nth-child(odd) > th,
  220.   table#listdirectories tbody > tr:nth-child(odd) > th,
  221.   table.rolecaps tbody > tr:nth-child(odd) > th,
  222.   table.userenrolment tbody > tr:nth-child(odd) > th,
  223.   table#form tbody > tr:nth-child(odd) > th,
  224.   form#movecourses table tbody > tr:nth-child(odd) > th,
  225.   #page-admin-course-index .editcourse tbody > tr:nth-child(odd) > th,
  226.   .forumheaderlist tbody > tr:nth-child(odd) > th,
  227.   table.flexible tbody > tr:nth-child(odd) > th,
  228.   .generaltable tbody > tr:nth-child(odd) > th {
  229.     background-color: var(--main-bg-color);
  230.   }
  231.  
  232.   /* footer */
  233.   #page-footer {
  234.     background: var(--main-bg-color);
  235.     border-top: 3px solid var(--main-gap-color);
  236.     text-align: center;
  237.     margin-top: 0px;
  238.   }
  239.  
  240.   .footerlinks {
  241.     line-height: 15px;
  242.     background: var(--main-bg-color);
  243.     border-top: 0;
  244.     padding: 0;
  245.     margin: auto;
  246.   }
  247.  
  248.   .breadcrumb > li {
  249.     text-shadow: 0 0;
  250.   }
  251.  
  252.   #page-footer .footnote {
  253.     float: none;
  254.     color: var(--main-header-color);
  255.     margin-left: 0px;
  256.   }
  257.  
  258.   #dock .dockedtitle {
  259.     background: var(--main-bg-color);
  260.   }
  261.  
  262.   #dock .dockedtitle .css3transform {
  263.     position: static !important;
  264.     transform: none !important;
  265.     top: auto !important;
  266.     width: auto !important;
  267.     padding: 1px !important;
  268.     line-height: 20px !important;
  269.   }
  270.  
  271.   #dockeditempanel .dockeditempanel_content {
  272.     background-color: var(--main-bg-color);
  273.     -webkit-box-shadow: none;
  274.     box-shadow: none;
  275.   }
  276.  
  277.   /* 消除老代码影响 */
  278.   .skip-block-to {
  279.     height: 0px;
  280.   }
  281.  
  282.   #site-news-forum,
  283.   #frontpage-course-list,
  284.   #frontpage-category-combo,
  285.   #frontpage-category-names {
  286.     background-image: none;
  287.   }
  288.  
  289.   .course-content ul li.section.main {
  290.     background: var(--main-bg-color);
  291.     border-bottom: 3px solid var(--main-gap-color);
  292.   }
  293.  
  294.   a,
  295.   a:visited,
  296.   .instancename {
  297.     color: var(--main-fg-color) !important;
  298.   }
  299.  
  300.   .usermenu .moodle-actionmenu[data-enhanced] .menu .menu-action.icon img,
  301.   .usermenu
  302.     .moodle-actionmenu[data-enhanced]
  303.     .menu
  304.     .menu-action.icon:hover
  305.     img {
  306.     color: var(--main-fg-color);
  307.   }
  308.  
  309.   .path-mod-assign td.submissionnotgraded,
  310.   .path-mod-assign div.submissionnotgraded {
  311.     color: var(--main-red);
  312.     background-color: var(--main-bg-color);
  313.   }
  314.  
  315.   .block .header .title {
  316.     background: var(--main-block-color);
  317.   }
  318.  
  319.   .header .title h2:before,
  320.   .coursebox > .info > .coursename a:before,
  321.   .coursebox > .info > .name a:before {
  322.     background: var(--main-block-color) !important;
  323.   }
  324.  
  325.   /* 课程名称 */
  326.   .coursebox > .info > .coursename a {
  327.     color: var(--main-fg-color);
  328.   }
  329.  
  330.   #fitem_id_submitbutton {
  331.     background: var(--main-bg-color);
  332.   }
  333.  
  334.   h1,
  335.   h2,
  336.   h3,
  337.   h4,
  338.   h5,
  339.   h6,
  340.   .back-to-top,
  341.   .socials p,
  342.   #socialheading,
  343.   .forumpost .subject {
  344.     color: var(--main-header-color) !important;
  345.   }
  346.  
  347.   .section .activity .actions {
  348.     background: rgba(255, 255, 255, 0);
  349.   }
  350.  
  351.   li {
  352.     line-height: inherit;
  353.   }
  354.  
  355.   /* 课程 */
  356.   .coursebox {
  357.     border: 1px solid var(--main-gap-color);
  358.     border-radius: 0;
  359.     border-width: 0 0 1px 0;
  360.     background-color: var(--main-bg-color) !important;
  361.     margin-bottom: 0px;
  362.   }
  363.  
  364.   /* 颜色覆盖 */
  365.   .green {
  366.     background-color: #50fa7b;
  367.   }
  368.  
  369.   .purple {
  370.     background-color: #bd93f9;
  371.   }
  372.  
  373.   .orange {
  374.     background-color: #ffb86c;
  375.   }
  376.  
  377.   .lightblue {
  378.     background-color: #8be9fd;
  379.   }
  380.  
  381.   .yellow {
  382.     background-color: #fdb53f;
  383.   }
  384.  
  385.   .turquoise {
  386.     background-color: #f1fa8c;
  387.   }
  388.  
  389.   a:hover {
  390.     color: var(--main-pink) !important;
  391.     transition: all 0.3s ease 0.1s !important;
  392.     text-decoration: none !important;
  393.   }
  394.  
  395.   .nav-tabs > .active > a,
  396.   .nav-tabs > .active > a:hover,
  397.   .nav-tabs > .active > a:focus,
  398.   .navbar .dropdown-menu > li > a:hover,
  399.   .navbar .dropdown-menu > li > a:focus,
  400.   a:hover,
  401.   .block:hover,
  402.   .coursebox:hover,
  403.   .generaltable tbody tr:hover > td,
  404.   .block:hover .header .title,
  405.   .block:hover .header .title h2:before,
  406.   .coursebox:hover > .info > .coursename a:before,
  407.   .coursebox:hover > .info > .name a:before,
  408.   #dock .dockedtitle:hover,
  409.   #dock .dockedtitle:focus {
  410.     background: var(--main-selection-color) !important;
  411.   }
  412.  
  413.   .usermenu .moodle-actionmenu .menu .menu-action.icon a:hover img {
  414.     background-color: transparent;
  415.   }
  416.  
  417.   /* scrollbar */
  418.   ::-webkit-scrollbar {
  419.     width: 0.5rem;
  420.     height: 0.5rem;
  421.     background: var(--main-bg-color);
  422.   }
  423.  
  424.   ::-webkit-scrollbar-track {
  425.     border-radius: 0;
  426.   }
  427.  
  428.   ::-webkit-scrollbar-thumb {
  429.     border-radius: 0.5rem;
  430.     background-color: rgba(95, 95, 95, 0);
  431.     transition: all 1s;
  432.   }
  433.  
  434.   ::-webkit-scrollbar-thumb:hover {
  435.     background-color: var(--main-selection-color);
  436.   }
  437. }