☰

BIT-Moodle-Theme-Enhance

provide mordern theme design for moodle system.

  1. /* ==UserStyle==
  2. @name         BIT-Moodle-Theme-Enhance
  3. @namespace    https://github.com/fky2015/
  4. @version      0.1.5
  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.   select,
  75.   .navbar .btn-navbar {
  76.     background: var(--main-bg-color) !important;
  77.     border: 1px solid var(--main-fg-color) !important;
  78.     color: var(--main-fg-color) !important;
  79.   }
  80.  
  81.   input[type="image"],
  82.   #coursesearchbox {
  83.     border-width: 0 !important;
  84.   }
  85.  
  86.   #search input[type="submit"] {
  87.     background: var(--main-bg-color)
  88.       url(/theme/image.php/lambda/theme/1582254235/bg/icon-search) no-repeat
  89.       center center !important;
  90.     border-width: 0px !important;
  91.   }
  92.  
  93.   header span[tabindex="0"] {
  94.     color: var(--main-green);
  95.   }
  96.  
  97.   table#form td.submit,
  98.   .form-buttons,
  99.   .path-admin .buttons,
  100.   #fitem_id_submitbutton,
  101.   .fp-content-center form + div,
  102.   div.backup-section + form,
  103.   #fgroup_id_buttonar {
  104.     background-color: var(--main-bg-color);
  105.   }
  106.  
  107.   .singleselect form,
  108.   .singleselect select,
  109.   .moodle-actionmenu[data-enhanced].show .menu {
  110.     background-color: var(--main-bg-color);
  111.     color: var(--main-fg-color);
  112.   }
  113.  
  114.   /* 功能块 */
  115.   .block {
  116.     background: var(--main-block-color);
  117.     margin-bottom: 0px;
  118.     border: 0;
  119.     border-bottom: 2px solid var(--main-gap-color);
  120.   }
  121.  
  122.   .generaltable tbody > tr:nth-child(odd) > td,
  123.   .forumpost,
  124.   #newmessageoverlay {
  125.     background: var(--main-bg-color);
  126.   }
  127.  
  128.   /* 主体 */
  129.   body {
  130.     color: var(--main-fg-color);
  131.   }
  132.  
  133.   .content h3.sectionname,
  134.   .bx-prev,
  135.   .bx-next,
  136.   .course-content .current .content {
  137.     background: var(--main-bg-color);
  138.   }
  139.  
  140.   .course-content .current {
  141.     background: var(--main-bg-color) !important;
  142.     border: 5px solid var(--main-selection-color) !important;
  143.   }
  144.  
  145.   .fa-chevron-circle-up:before {
  146.     color: var(--main-selection-color);
  147.   }
  148.  
  149.   /* 代码编辑 */
  150.   .path-mod-programming td.programming-io span {
  151.     background-color: var(--main-selection-color);
  152.   }
  153.  
  154.   .nav-tabs,
  155.   .nav-tabs > .active > a {
  156.     background-color: var(--main-bg-color);
  157.     border: 0;
  158.     color: var(--main-fg-color);
  159.   }
  160.  
  161.   .nav-tabs > li > a {
  162.     background-color: var(--main-bg-color);
  163.     color: var(--main-fg-color);
  164.   }
  165.  
  166.   .nav-tabs > .active > a[href],
  167.   .nav-tabs > li.active {
  168.     color: var(--main-green);
  169.     border-bottom: 1px solid var(--main-green);
  170.     border-top: 0;
  171.     margin-bottom: -1px;
  172.     margin-top: -2px;
  173.   }
  174.  
  175.   .path-mod-programming #test-result-detail .passed,
  176.   .path-mod-programming #test-result-detail .passed .cell {
  177.     background-color: var(--main-bg-color);
  178.   }
  179.  
  180.   .passed a {
  181.     color: var(--main-green);
  182.   }
  183.  
  184.   .nav > .disabled > a {
  185.     background: var(--main-bg-color);
  186.   }
  187.   .nav > .disabled > a:hover {
  188.     background: var(--main-bg-color) !important;
  189.     transform: none !important;
  190.     border: none;
  191.   }
  192.  
  193.   .dp-highlighter ol li,
  194.   .dp-highlighter .columns div {
  195.     line-height: 24px;
  196.   }
  197.  
  198.   body {
  199.     font-size: 18px;
  200.   }
  201.  
  202.   .content h3.sectionname {
  203.     border-color: #4f0f0f;
  204.     border-width: 0px;
  205.   }
  206.  
  207.   table#explaincaps tbody > tr:nth-child(odd) > td,
  208.   table#defineroletable tbody > tr:nth-child(odd) > td,
  209.   table.grading-report tbody > tr:nth-child(odd) > td,
  210.   table#listdirectories tbody > tr:nth-child(odd) > td,
  211.   table.rolecaps tbody > tr:nth-child(odd) > td,
  212.   table.userenrolment tbody > tr:nth-child(odd) > td,
  213.   table#form tbody > tr:nth-child(odd) > td,
  214.   form#movecourses table tbody > tr:nth-child(odd) > td,
  215.   #page-admin-course-index .editcourse tbody > tr:nth-child(odd) > td,
  216.   .forumheaderlist tbody > tr:nth-child(odd) > td,
  217.   table.flexible tbody > tr:nth-child(odd) > td,
  218.   .generaltable tbody > tr:nth-child(odd) > td,
  219.   table#explaincaps tbody > tr:nth-child(odd) > th,
  220.   table#defineroletable tbody > tr:nth-child(odd) > th,
  221.   table.grading-report tbody > tr:nth-child(odd) > th,
  222.   table#listdirectories tbody > tr:nth-child(odd) > th,
  223.   table.rolecaps tbody > tr:nth-child(odd) > th,
  224.   table.userenrolment tbody > tr:nth-child(odd) > th,
  225.   table#form tbody > tr:nth-child(odd) > th,
  226.   form#movecourses table tbody > tr:nth-child(odd) > th,
  227.   #page-admin-course-index .editcourse tbody > tr:nth-child(odd) > th,
  228.   .forumheaderlist tbody > tr:nth-child(odd) > th,
  229.   table.flexible tbody > tr:nth-child(odd) > th,
  230.   .generaltable tbody > tr:nth-child(odd) > th {
  231.     background-color: var(--main-bg-color);
  232.   }
  233.  
  234.   /* footer */
  235.   #page-footer {
  236.     background: var(--main-bg-color);
  237.     border-top: 3px solid var(--main-gap-color);
  238.     text-align: center;
  239.     margin-top: 0px;
  240.   }
  241.  
  242.   .footerlinks {
  243.     line-height: 15px;
  244.     background: var(--main-bg-color);
  245.     border-top: 0;
  246.     padding: 0;
  247.     margin: auto;
  248.   }
  249.  
  250.   .breadcrumb > li {
  251.     text-shadow: 0 0;
  252.   }
  253.  
  254.   #page-footer .footnote {
  255.     float: none;
  256.     color: var(--main-header-color);
  257.     margin-left: 0px;
  258.   }
  259.  
  260.   #dock .dockedtitle,
  261.   .calendar-event-panel,
  262.   .block .calendar-event-panel .yui3-overlay-content,
  263.   .path-calendar .maincalendar .eventlist * {
  264.     background: var(--main-bg-color) !important;
  265.     background-color: var(--main-bg-color);
  266.   }
  267.  
  268.   .block .calendar-event-panel {
  269.     border: none;
  270.   }
  271.   .block .calendar-event-panel .yui3-overlay-content,
  272.   .path-calendar .maincalendar .eventlist * {
  273.     box-shadow: none;
  274.     border-color: var(--main-fg-color);
  275.   }
  276.  
  277.   .calendar_event_course {
  278.     background-color: var(--main-selection-color);
  279.   }
  280.  
  281.   #dock .dockedtitle .css3transform {
  282.     position: static !important;
  283.     transform: none !important;
  284.     top: auto !important;
  285.     width: auto !important;
  286.     padding: 1px !important;
  287.     line-height: 20px !important;
  288.   }
  289.  
  290.   #dockeditempanel .dockeditempanel_content {
  291.     background-color: var(--main-bg-color);
  292.     -webkit-box-shadow: none;
  293.     box-shadow: none;
  294.   }
  295.  
  296.   /* 消除老代码影响 */
  297.   .skip-block-to {
  298.     height: 0px;
  299.   }
  300.  
  301.   #site-news-forum,
  302.   #frontpage-course-list,
  303.   #frontpage-category-combo,
  304.   #frontpage-category-names {
  305.     background-image: none;
  306.   }
  307.  
  308.   .course-content ul li.section.main {
  309.     background: var(--main-bg-color);
  310.     border-bottom: 3px solid var(--main-gap-color);
  311.   }
  312.  
  313.   a,
  314.   a:visited,
  315.   .instancename {
  316.     color: var(--main-fg-color) !important;
  317.   }
  318.  
  319.   .usermenu .moodle-actionmenu[data-enhanced] .menu .menu-action.icon img,
  320.   .usermenu
  321.     .moodle-actionmenu[data-enhanced]
  322.     .menu
  323.     .menu-action.icon:hover
  324.     img {
  325.     color: var(--main-fg-color);
  326.   }
  327.  
  328.   .path-mod-assign td.submissionnotgraded,
  329.   .path-mod-assign div.submissionnotgraded {
  330.     color: var(--main-red);
  331.     background-color: var(--main-bg-color);
  332.   }
  333.  
  334.   .block .header .title {
  335.     background: var(--main-block-color);
  336.   }
  337.  
  338.   .header .title h2:before,
  339.   .coursebox > .info > .coursename a:before,
  340.   .coursebox > .info > .name a:before {
  341.     background: var(--main-block-color) !important;
  342.   }
  343.  
  344.   /* 课程名称 */
  345.   .coursebox > .info > .coursename a {
  346.     color: var(--main-fg-color);
  347.   }
  348.  
  349.   #fitem_id_submitbutton {
  350.     background: var(--main-bg-color);
  351.   }
  352.  
  353.   h1,
  354.   h2,
  355.   h3,
  356.   h4,
  357.   h5,
  358.   h6,
  359.   .back-to-top,
  360.   .socials p,
  361.   #socialheading,
  362.   .forumpost .subject {
  363.     color: var(--main-header-color) !important;
  364.   }
  365.  
  366.   .section .activity .actions {
  367.     background: rgba(255, 255, 255, 0);
  368.   }
  369.  
  370.   li {
  371.     line-height: inherit;
  372.   }
  373.  
  374.   /* file manager */
  375.   .ffilemanager * {
  376.     background: var(--main-bg-color) !important;
  377.   }
  378.  
  379.   .moodle-dialogue-base .moodle-dialogue-wrap *,
  380.   .moodle-dialogue-base .moodle-dialogue-wrap {
  381.     background: var(--main-bg-color) !important;
  382.   }
  383.  
  384.   .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
  385.   .moodle-dialogue-base
  386.     .moodle-dialogue-wrap
  387.     .moodle-dialogue-hd.yui3-widget-hd {
  388.     text-shadow: none;
  389.   }
  390.   .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
  391.     color: var(--main-fg-color);
  392.   }
  393.   .moodle-dialogue-base .moodle-dialogue-wrap {
  394.     border: none;
  395.     -webkit-border-radius: 0px;
  396.     border-radius: 0px;
  397.   }
  398.   div.filemanager-loading > img {
  399.     display: none;
  400.   }
  401.   /* 课程 */
  402.   .coursebox {
  403.     border: 1px solid var(--main-gap-color);
  404.     border-radius: 0;
  405.     border-width: 0 0 1px 0;
  406.     background-color: var(--main-bg-color) !important;
  407.     margin-bottom: 0px;
  408.   }
  409.  
  410.   /* 颜色覆盖 */
  411.   .green {
  412.     background-color: #50fa7b;
  413.   }
  414.  
  415.   .purple {
  416.     background-color: #bd93f9;
  417.   }
  418.  
  419.   .orange {
  420.     background-color: #ffb86c;
  421.   }
  422.  
  423.   .lightblue {
  424.     background-color: #8be9fd;
  425.   }
  426.  
  427.   .yellow {
  428.     background-color: #fdb53f;
  429.   }
  430.  
  431.   .turquoise {
  432.     background-color: #f1fa8c;
  433.   }
  434.  
  435.   a:hover {
  436.     color: var(--main-pink) !important;
  437.     transition: all 0.3s ease 0.1s !important;
  438.     text-decoration: none !important;
  439.   }
  440.  
  441.   .nav-tabs > .active > a,
  442.   .nav-tabs > .active > a:hover,
  443.   .nav-tabs > .active > a:focus,
  444.   .navbar .dropdown-menu > li > a:hover,
  445.   .navbar .dropdown-menu > li > a:focus,
  446.   a:hover,
  447.   .block:hover,
  448.   .coursebox:hover,
  449.   .generaltable tbody tr:hover > td,
  450.   .block:hover .header .title,
  451.   .block:hover .header .title h2:before,
  452.   .coursebox:hover > .info > .coursename a:before,
  453.   .coursebox:hover > .info > .name a:before,
  454.   #dock .dockedtitle:hover,
  455.   #dock .dockedtitle:focus {
  456.     background: var(--main-selection-color) !important;
  457.   }
  458.  
  459.   .usermenu .moodle-actionmenu .menu .menu-action.icon a:hover img {
  460.     background-color: transparent;
  461.   }
  462.  
  463.   /* scrollbar */
  464.   ::-webkit-scrollbar {
  465.     width: 0.5rem;
  466.     height: 0.5rem;
  467.     background: var(--main-bg-color);
  468.   }
  469.  
  470.   ::-webkit-scrollbar-track {
  471.     border-radius: 0;
  472.   }
  473.  
  474.   ::-webkit-scrollbar-thumb {
  475.     border-radius: 0.5rem;
  476.     background-color: rgba(95, 95, 95, 0);
  477.     transition: all 1s;
  478.   }
  479.  
  480.   ::-webkit-scrollbar-thumb:hover {
  481.     background-color: var(--main-selection-color);
  482.   }
  483. }