diff --git a/.gitignore b/.gitignore index d77fabab..0ea92227 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ data/logs.json +data/avatar/* +!data/avatar/avt.default +!data/avatar/*.php .cache # Byte-compiled / optimized / DLL files diff --git a/api/config.php b/api/config.php index 6ebe3ca2..780d63c0 100644 --- a/api/config.php +++ b/api/config.php @@ -84,49 +84,20 @@ function setting(String $key, &$target, $type) { setting("app_description" , $rawConfig["app"]["description"] , $TYPE_STRING); setting("uploadDir" , $rawConfig["uploadDir"] , $TYPE_STRING); setting("time_zone" , $rawConfig["time"]["zone"] , $TYPE_STRING); - setting("time_begin_seconds" , $rawConfig["time"]["begin"]["seconds"] , $TYPE_NUMBER); - setting("time_begin_minutes" , $rawConfig["time"]["begin"]["minutes"] , $TYPE_NUMBER); - setting("time_begin_hours" , $rawConfig["time"]["begin"]["hours"] , $TYPE_NUMBER); - setting("time_begin_days" , $rawConfig["time"]["begin"]["days"] , $TYPE_NUMBER); - setting("time_begin_months" , $rawConfig["time"]["begin"]["months"] , $TYPE_NUMBER); - setting("time_begin_years" , $rawConfig["time"]["begin"]["years"] , $TYPE_NUMBER); - setting("time_during" , $rawConfig["time"]["during"] , $TYPE_NUMBER); - setting("time_offset" , $rawConfig["time"]["offset"] , $TYPE_NUMBER); setting("pageTitle" , $rawConfig["pageTitle"] , $TYPE_STRING); - setting("publish" , $rawConfig["publish"] , $TYPE_BOOL ); - setting("submit" , $rawConfig["submit"] , $TYPE_BOOL ); - setting("submitInProblems" , $rawConfig["submitInProblems"] , $TYPE_BOOL ); setting("allowRegister" , $rawConfig["allowRegister"] , $TYPE_BOOL ); setting("edit_name" , $rawConfig["edit"]["name"] , $TYPE_BOOL ); setting("edit_password" , $rawConfig["edit"]["password"] , $TYPE_BOOL ); setting("edit_avatar" , $rawConfig["edit"]["avatar"] , $TYPE_BOOL ); - setting("viewRank" , $rawConfig["viewRank"] , $TYPE_BOOL ); - setting("viewRankTask" , $rawConfig["viewRankTask"] , $TYPE_BOOL ); - setting("viewRankHideDisabled" , $rawConfig["viewRankHideDisabled"] , $TYPE_BOOL ); - setting("viewLog" , $rawConfig["viewLog"] , $TYPE_BOOL ); - setting("viewLogOther" , $rawConfig["viewLogOther"] , $TYPE_BOOL ); - setting("publicProblems" , $rawConfig["publicProblems"] , $TYPE_BOOL ); setting("clientConfig_sounds" , $rawConfig["clientConfig"]["sounds"] , $TYPE_BOOL ); setting("clientConfig_nightmode" , $rawConfig["clientConfig"]["nightmode"] , $TYPE_BOOL ); setting("clientConfig_showMs" , $rawConfig["clientConfig"]["showMs"] , $TYPE_BOOL ); setting("clientConfig_transition" , $rawConfig["clientConfig"]["transition"] , $TYPE_BOOL ); - setting("clientConfig_dialogProblem", $rawConfig["clientConfig"]["dialogProblem"] , $TYPE_BOOL ); - setting("clientConfig_rankUpdate" , $rawConfig["clientConfig"]["rankUpdate"] , $TYPE_BOOL ); - setting("clientConfig_logsUpdate" , $rawConfig["clientConfig"]["logsUpdate"] , $TYPE_BOOL ); - setting("clientConfig_updateDelay" , $rawConfig["clientConfig"]["updateDelay"] , $TYPE_NUMBER); setting("ratelimit_maxRequest" , $rawConfig["ratelimit"]["maxRequest"] , $TYPE_NUMBER); setting("ratelimit_time" , $rawConfig["ratelimit"]["time"] , $TYPE_NUMBER); setting("ratelimit_banTime" , $rawConfig["ratelimit"]["banTime"] , $TYPE_NUMBER); setting("cache_contestRank" , $rawConfig["cache"]["contestRank"] , $TYPE_NUMBER); - if ($rawConfig["publish"] !== true) { - $rawConfig["viewRank"] = false; - $rawConfig["viewLog"] = false; - } - - if ($rawConfig["viewRankTask"] !== true) - $rawConfig["viewLogOther"] = false; - if ($changed === false) stop(102, "Woah nothing happened.", 200); diff --git a/api/contest/rank.php b/api/contest/rank.php index e3bd41c8..31fe73c6 100644 --- a/api/contest/rank.php +++ b/api/contest/rank.php @@ -118,8 +118,8 @@ }); foreach ($res as $value) { - $total[$user] = $value["total"]; - $overall += $total[$user]; + $total[$value["username"]] = $value["total"]; + $overall += $total[$value["username"]]; } if ($export) { diff --git a/api/info.php b/api/info.php index e8130d78..0d7bc65e 100644 --- a/api/info.php +++ b/api/info.php @@ -16,6 +16,9 @@ $username = reqQuery("u"); require_once $_SERVER["DOCUMENT_ROOT"] ."/data/xmldb/account.php"; + if ($username !== preg_replace("/[^a-zA-Z0-9]+/", "", $username)) + stop(-1, "Tên người dùng chỉ được phép dùng các kí tự trong khoảng a-zA-Z0-9", 400); + if (!$data = getUserData($username)) stop(13, "Không tìm thấy tên người dùng \"$username\"!", 404, Array( "username" => $username )); diff --git a/api/login.php b/api/login.php index 64ab7927..ee7b1e9b 100644 --- a/api/login.php +++ b/api/login.php @@ -1,48 +1,229 @@ $_SESSION["apiToken"], - "sessid" => session_id(), - "redirect" => "/", - "user" => Array( - "id" => $udata["id"], - "name" => $udata["name"] - ) - )); - } - else if ($res === LOGIN_WRONGPASSWORD) - stop(14, "Sai mật khẩu!", 403); - else if ($res === LOGIN_USERNAMENOTFOUND) - stop(13, "Sai tên đăng nhập!", 403); - else - stop(-1, "Lỗi không rõ.", 500); \ No newline at end of file + //? |-----------------------------------------------------------------------------------------------| + //? | login.php | + //? | | + //? | Copyright (c) 2018-2020 Belikhun. All right reserved | + //? | Licensed under the MIT License. See LICENSE in the project root for license information. | + //? |-----------------------------------------------------------------------------------------------| + + // SET PAGE TYPE + define("PAGE_TYPE", "NORMAL"); + + require_once $_SERVER["DOCUMENT_ROOT"] ."/lib/belibrary.php"; + require_once $_SERVER["DOCUMENT_ROOT"] ."/data/config.php"; + header("Cache-Control: max-age=0, must-revalidate", true); + +?> + + + + + + + + + Đăng nhập + + + + + + + + + + + + + + + + + + +
+
+ + +
+ +
+ +
+
+
+ + +
+ +
+ +
+ Đang tải... + + +
+
+
+
+
+ Tên đăng nhập + Mật Khẩu + Hoàn Thành +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+
+ + +
+ +
+ +
+ + +
+ +
+ +
+
+ +
+
+ Đăng nhập thành công + +
+
+ +
+
+
+
+ Tên đăng nhập + Mật Khẩu + Hoàn Thành +
+
+ +
+
+ Tên đăng nhập chỉ được phép chứa các kí tự từ a-z, A-Z và 0-9 +
+ +
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+ +
+ Vui lòng điền captcha bên dưới + +
+
+ + +
+ + +
+ +
+ + +
+
+ +
+ +
+
+ +
+
+ Đăng kí thành công + Tài khoản của bạn đã được tạo thành công! + +
+ + + +
+ + +
+
+ + +
+
+
+
+ +
+ Copyright © 2018-2020 Belikhun. This project is licensed under the MIT License. See LICENSE for more information. +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/api/register.php b/api/register.php index 675b911a..1958447e 100644 --- a/api/register.php +++ b/api/register.php @@ -19,7 +19,7 @@ if ($config["allowRegister"] !== true) stop(21, "Đăng kí tài khoản đã bị tắt!", 403); - $username = reqForm("username"); + $username = preg_replace("/[^a-zA-Z0-9]+/", "", reqForm("username")); $password = reqForm("password"); $captcha = reqForm("captcha"); diff --git a/assets/css/default.css b/assets/css/default.css index 3b6ea459..744dc3b2 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -89,7 +89,7 @@ body.dark pre { timer { position: relative; display: inline-block; - font-family: Segoe UI; + font-family: "Segoe UI", "Calibri"; font-weight: bold; font-size: 21px; letter-spacing: .5px; @@ -105,6 +105,14 @@ body.dark timer[data-color = "red"] { color: rgb(255, 169, 169); } +timer[data-color = "yellow"] { + color: rgb(190, 166, 29); +} + +body.dark timer[data-color = "yellow"] { + color: rgb(239, 241, 80); +} + timer[data-color = "green"] { color: rgb(12, 184, 41); } diff --git a/assets/css/loginPage.css b/assets/css/loginPage.css index 106a7d5c..971b6a9f 100644 --- a/assets/css/loginPage.css +++ b/assets/css/loginPage.css @@ -148,7 +148,6 @@ body.dark { width: 100%; box-sizing: border-box; - padding: 0 20px; overflow-x: hidden; overflow-y: auto; } @@ -228,7 +227,7 @@ body.dark { .rightPanel .center .formBox .inputForm .progress .indicator > .item { position: relative; display: inline-block; - width: 100px; + width: 120px; padding-top: 24px; font-family: Nunito; font-size: 12px; diff --git a/assets/css/progressBar.css b/assets/css/progressBar.css index 7801eac0..33822fba 100644 --- a/assets/css/progressBar.css +++ b/assets/css/progressBar.css @@ -140,7 +140,7 @@ } .progressBar > .bar[data-color="yellow"] { - background-color: #d4d23f; + background-color: #c7c545; } .progressBar > .bar[data-color="pink"] { diff --git a/assets/css/switch.css b/assets/css/switch.css index a523f87b..b3d24ddd 100644 --- a/assets/css/switch.css +++ b/assets/css/switch.css @@ -175,7 +175,6 @@ .sq-checkbox input { position: absolute; display: none; - cursor: pointer; height: 0; width: 0; } @@ -197,20 +196,20 @@ width: 42px; } -.sq-checkbox:hover input ~ .checkmark { +.sq-checkbox:hover > input ~ .checkmark { background-color: rgba(68, 170, 221, 0.4); border-color: rgb(160, 220, 250); } -.sq-checkbox input:checked ~ .checkmark { +.sq-checkbox > input:checked ~ .checkmark { background-color: rgb(68, 170, 221); } -.sq-checkbox:hover input:checked ~ .checkmark { +.sq-checkbox:hover > input:checked ~ .checkmark { background-color: rgb(160, 220, 250); } -.sq-checkbox input:disabled ~ .checkmark { +.sq-checkbox > input:disabled ~ .checkmark { filter: brightness(0.8); cursor: not-allowed; } @@ -219,15 +218,94 @@ border-color: rgb(255, 102, 170); } -.sq-checkbox.pink:hover input ~ .checkmark { +.sq-checkbox.pink:hover > input ~ .checkmark { background-color: rgba(255, 102, 171, 0.4); border-color: rgb(255, 194, 214); } -.sq-checkbox.pink input:checked ~ .checkmark { +.sq-checkbox.pink > input:checked ~ .checkmark { background-color: rgb(255, 102, 170); } -.sq-checkbox.pink:hover input:checked ~ .checkmark { +.sq-checkbox.pink:hover > input:checked ~ .checkmark { background-color: rgb(255, 194, 214); +} + +.circleCheckbox { + position: relative; + display: inline-block; + width: 28px; + height: 28px; + user-select: none; +} + +.circleCheckbox > input { + position: absolute; + display: none; + height: 0; + width: 0; +} + +.circleCheckbox > .checkmark { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 2px solid rgb(34, 34, 34); + border-radius: 50%; + box-sizing: border-box; + font-size: 15px; + font-weight: bold; + cursor: pointer; + + transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.circleCheckbox > input:disabled + .checkmark { + cursor: not-allowed; +} + +.circleCheckbox > input:checked + .checkmark, +.circleCheckbox[data-force="true"] > input + .checkmark { + background-color: rgb(34, 34, 34); + border-width: 0; + color: rgb(228, 228, 228); +} + +.circleCheckbox[data-color="green"] > input:checked + .checkmark, +.circleCheckbox[data-color="green"][data-force="true"] > input + .checkmark { + background-color: rgb(55, 228, 55); + color: rgb(44, 44, 44); +} + +.circleCheckbox[data-color="red"] > input:checked + .checkmark, +.circleCheckbox[data-color="red"][data-force="true"] > input + .checkmark { + background-color: rgb(255, 125, 125); + color: rgb(44, 44, 44); +} + +.circleCheckbox[data-color="blue"] > input:checked + .checkmark, +.circleCheckbox[data-color="blue"][data-force="true"] > input + .checkmark { + background-color: rgb(44, 224, 248); + color: rgb(44, 44, 44); +} + +.circleCheckbox[data-color="yellow"] > input:checked + .checkmark, +.circleCheckbox[data-color="yellow"][data-force="true"] > input + .checkmark { + background-color: rgb(217, 230, 47); + color: rgb(44, 44, 44); +} + +body.dark .circleCheckbox > .checkmark { + border-color: rgb(65, 65, 65); +} + +body.dark .circleCheckbox > input:checked + .checkmark, +body.dark .circleCheckbox[data-force="true"] > input + .checkmark { + background-color: rgb(168, 168, 168); + color: rgb(46, 46, 46); } \ No newline at end of file diff --git a/assets/fonts/segoeui/SegoeUI-Bold.woff2 b/assets/fonts/segoeui/SegoeUI-Bold.woff2 new file mode 100644 index 00000000..b32ea039 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-Bold.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-BoldItalic.woff2 b/assets/fonts/segoeui/SegoeUI-BoldItalic.woff2 new file mode 100644 index 00000000..b4d26249 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-BoldItalic.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-Italic.woff2 b/assets/fonts/segoeui/SegoeUI-Italic.woff2 new file mode 100644 index 00000000..fd0f5d82 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-Italic.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-Light.woff2 b/assets/fonts/segoeui/SegoeUI-Light.woff2 new file mode 100644 index 00000000..bc8abd01 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-Light.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-LightItalic.woff2 b/assets/fonts/segoeui/SegoeUI-LightItalic.woff2 new file mode 100644 index 00000000..2a49fba6 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-LightItalic.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-Semibold.woff2 b/assets/fonts/segoeui/SegoeUI-Semibold.woff2 new file mode 100644 index 00000000..b1b2f249 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-Semibold.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-SemiboldItalic.woff2 b/assets/fonts/segoeui/SegoeUI-SemiboldItalic.woff2 new file mode 100644 index 00000000..07193b7c Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-SemiboldItalic.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-Semilight.woff2 b/assets/fonts/segoeui/SegoeUI-Semilight.woff2 new file mode 100644 index 00000000..21a762f2 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-Semilight.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI-SemilightItalic.woff2 b/assets/fonts/segoeui/SegoeUI-SemilightItalic.woff2 new file mode 100644 index 00000000..02533cb1 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI-SemilightItalic.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUI.woff2 b/assets/fonts/segoeui/SegoeUI.woff2 new file mode 100644 index 00000000..f420bcf5 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUI.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUIBlack-Italic.woff2 b/assets/fonts/segoeui/SegoeUIBlack-Italic.woff2 new file mode 100644 index 00000000..a6687eff Binary files /dev/null and b/assets/fonts/segoeui/SegoeUIBlack-Italic.woff2 differ diff --git a/assets/fonts/segoeui/SegoeUIBlack.woff2 b/assets/fonts/segoeui/SegoeUIBlack.woff2 new file mode 100644 index 00000000..f91e7c47 Binary files /dev/null and b/assets/fonts/segoeui/SegoeUIBlack.woff2 differ diff --git a/assets/fonts/segoeui/segoeui.css b/assets/fonts/segoeui/segoeui.css new file mode 100644 index 00000000..1b17270e --- /dev/null +++ b/assets/fonts/segoeui/segoeui.css @@ -0,0 +1,105 @@ +/* +? |-----------------------------------------------------------------------------------------------| +? | /assets/fonts/segoeui/segoeui.css | +? | | +? | Copyright (c) 2018-2020 Belikhun. All right reserved | +? | Licensed under the MIT License. See LICENSE in the project root for license information. | +? |-----------------------------------------------------------------------------------------------| +*/ + +@font-face { + font-family: "Segoe UI Semilight"; + src: local("Segoe UI Semilight Italic"), local("SegoeUI-SemilightItalic"), + url("SegoeUI-SemilightItalic.woff2") format("woff2"); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: "Segoe UI Semilight"; + src: local("Segoe UI Semilight"), local("SegoeUI-Semilight"), + url("SegoeUI-Semilight.woff2") format("woff2"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Black"), local("SegoeUIBlack"), + url("SegoeUIBlack.woff2") format("woff2"); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Light Italic"), local("SegoeUI-LightItalic"), + url("SegoeUI-LightItalic.woff2") format("woff2"); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Bold Italic"), local("SegoeUI-BoldItalic"), + url("SegoeUI-BoldItalic.woff2") format("woff2"); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Light"), local("SegoeUI-Light"), + url("SegoeUI-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI"), local("SegoeUI"), + url("SegoeUI.woff2") format("woff2"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Bold"), local("SegoeUI-Bold"), + url("SegoeUI-Bold.woff2") format("woff2"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Semibold Italic"), local("SegoeUI-SemiboldItalic"), + url("SegoeUI-SemiboldItalic.woff2") format("woff2"); + font-weight: 600; + font-style: italic; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Italic"), local("SegoeUI-Italic"), + url("SegoeUI-Italic.woff2") format("woff2"); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"), + url("SegoeUI-Semibold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "Segoe UI"; + src: local("Segoe UI Black Italic"), local("SegoeUIBlack-Italic"), + url("SegoeUIBlack-Italic.woff2") format("woff2"); + font-weight: 900; + font-style: italic; +} + diff --git a/assets/img/chrome-icon.png b/assets/img/chrome-icon.png new file mode 100644 index 00000000..0cbe1db3 Binary files /dev/null and b/assets/img/chrome-icon.png differ diff --git a/assets/img/coccoc-icon.png b/assets/img/coccoc-icon.png new file mode 100644 index 00000000..62a7f497 Binary files /dev/null and b/assets/img/coccoc-icon.png differ diff --git a/assets/js/errorHandler.js b/assets/js/errorHandler.js index 0e8be311..9d3a8af6 100644 --- a/assets/js/errorHandler.js +++ b/assets/js/errorHandler.js @@ -11,19 +11,19 @@ const errorHandler = async (error, returnable = true) => { if (!popup || !popup.initialized) return; - let e = (error.code && error.data.code) + let e = (error.code && error.data && error.data.code) ? `[${error.code} ${error.data.code}]` : error.code ? `[${error.code}]` : error.name || error.data.name || `${error.data.data.file}:${error.data.data.line}` - let d = (error.description && error.data.description) + let d = (error.description && error.data && error.data.description) ? `${error.description} (${error.data.description}) ${(error.data.data.file) ? `${error.data.data.file}:${error.data.data.line}` : ""}` : error.message + || error.description || error.data.message || error.data.description - || error.description let returnBtn = {} @@ -31,14 +31,13 @@ const errorHandler = async (error, returnable = true) => { returnBtn.back = { text: "Quay lại", color: "green" } let errorBox = document.createElement("pre"); - errorBox.classList.add("dark", "break"); + errorBox.classList.add(document.body.classList.contains("dark") ? "dark" : "light", "break"); errorBox.innerText = `${e} >>> ${d}`; errorBox.style.fontSize = "16px"; - splash.change({ description: "Lỗi đã sảy ra!" }); await popup.show({ windowTitle: "Error Handler", - title: "Oops!", + title: "Toang rồi ông Giáo ạ!", message: "ERROR OCCURED", description: "Một lỗi không mong muốn đã sảy ra!", level: "error", diff --git a/assets/js/login.js b/assets/js/login.js index 8935dda2..016f491b 100644 --- a/assets/js/login.js +++ b/assets/js/login.js @@ -20,7 +20,8 @@ const login = { allowRegister: false, async init() { - await sounds.init(); + if (!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)) + await sounds.init(); let server = await myajax({ url: "/api/server", method: "GET" }); this.allowRegister = server.data.config.allowRegister; diff --git a/assets/js/sounds.js b/assets/js/sounds.js index 4a853c8d..f30993cb 100644 --- a/assets/js/sounds.js +++ b/assets/js/sounds.js @@ -7,6 +7,7 @@ const sounds = { + disabled: false, initialized: false, soundsLoaded: false, ROOT_DIR: "/assets/sounds", @@ -78,6 +79,13 @@ const sounds = { }, async init(set = () => {}) { + if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) { + clog("WARN", "Sounds does not support on iPhone devices, disabling..."); + cookie.set("__s_m", false); + this.disabled = true; + return false; + } + set(0, "Taking Cookies 🍪"); this.enable.master = cookie.get("__s_m", false) == "true"; this.enable.mouseOver = cookie.get("__s_mo", true) == "true"; @@ -105,6 +113,9 @@ const sounds = { }, async loadSound(set = () => {}) { + if (this.disabled) + throw { code: -1, description: "Sounds Module Disabled" } + for (var i = 0; i < this.soundList.length; i++) { const item = this.soundList[i]; set((i / (this.soundList.length - 1)) * 100, item.name); @@ -113,6 +124,9 @@ const sounds = { }, async __loadSoundAsync(url, volume = 0.6) { + if (this.disabled) + throw { code: -1, description: "Sounds Module Disabled" } + var sound = new Audio(); sound.src = (typeof chrome !== "undefined" && chrome.extension) ? chrome.extension.getURL(url) : url; clog("DEBG", `Loading sound: ${url}`); @@ -146,6 +160,9 @@ const sounds = { }, select(variation = 0) { + if (this.disabled || !this.initialized) + return; + let sound = [ this.sounds.select, this.sounds.selectSoft @@ -156,6 +173,9 @@ const sounds = { }, confirm(variation = 0) { + if (this.disabled || !this.initialized) + return; + let sound = [ this.sounds.confirm, this.sounds.confirm2, @@ -167,6 +187,9 @@ const sounds = { }, toggle(variation = 0) { + if (this.disabled || !this.initialized) + return; + let sound = [ this.sounds.overlayPopIn, this.sounds.overlayPopOut @@ -177,16 +200,25 @@ const sounds = { }, notification() { + if (this.disabled || !this.initialized) + return; + if (this.enable.master && this.enable.notification) this.__soundToggle(this.sounds.notification); }, warning() { + if (this.disabled || !this.initialized) + return; + if (this.enable.master && this.enable.others) this.__soundToggle(this.sounds.warning); }, scan() { + if (this.disabled) + throw { code: -1, description: "Sounds Module Disabled" } + const list = document.getElementsByClassName("sound"); for (var item of list) { @@ -202,7 +234,7 @@ const sounds = { }, applySound(item) { - if (!item.nodeType || item.nodeType <= 0 || item.dataset.soundApplied || !this.soundsLoaded) + if (!item.nodeType || item.nodeType <= 0 || item.dataset.soundApplied || !this.soundsLoaded || this.disabled || !this.initialized) return false; if (typeof item.dataset.soundhover !== "undefined") diff --git a/assets/js/splash.js b/assets/js/splash.js index c124d758..ec264d71 100644 --- a/assets/js/splash.js +++ b/assets/js/splash.js @@ -51,11 +51,11 @@ class splash { // Footer this.tree.footer.icon.innerHTML = `
- +
- +
` this.tree.footer.text.innerText = "Trang web hoạt động tốt nhất trên trình duyệt chrome và coccoc."; diff --git a/config.php b/config.php index 52cc1afc..21d2634c 100644 --- a/config.php +++ b/config.php @@ -28,7 +28,7 @@ - + @@ -418,7 +418,7 @@ - + diff --git a/data/problems/problem.php b/data/problems/problem.php index 53778738..bf08e398 100644 --- a/data/problems/problem.php +++ b/data/problems/problem.php @@ -9,11 +9,8 @@ require_once $_SERVER["DOCUMENT_ROOT"] ."/lib/belibrary.php"; $problemList = Array(); - - foreach(glob(PROBLEM_DIR ."/*", GLOB_ONLYDIR) as $i => $path) { - $data = json_decode((new fip($path ."/data.json")) -> read(), true); - $problemList[basename($path)] = $data; - } + foreach(glob(PROBLEM_DIR ."/*", GLOB_ONLYDIR) as $i => $path) + $problemList[basename($path)] = json_decode((new fip($path ."/data.json")) -> read(), true); // Return Code define("PROBLEM_OKAY", 0); diff --git a/index.php b/index.php index 13ae9ecd..c024c2bf 100644 --- a/index.php +++ b/index.php @@ -68,15 +68,15 @@ - - + + - - + + @@ -892,7 +892,7 @@ - + diff --git a/assets/css/configPage.css b/static/css/configPage.css similarity index 98% rename from assets/css/configPage.css rename to static/css/configPage.css index 8b0f0f21..4f376122 100644 --- a/assets/css/configPage.css +++ b/static/css/configPage.css @@ -1,6 +1,6 @@ /* ? |-----------------------------------------------------------------------------------------------| -? | /assets/css/configPage.css | +? | /static/css/configPage.css | ? | | ? | Copyright (c) 2018-2020 Belikhun. All right reserved | ? | Licensed under the MIT License. See LICENSE in the project root for license information. | diff --git a/assets/css/core.css b/static/css/core.css similarity index 95% rename from assets/css/core.css rename to static/css/core.css index 0c438f10..17ee34eb 100644 --- a/assets/css/core.css +++ b/static/css/core.css @@ -1,2672 +1,2672 @@ -/* -? |-----------------------------------------------------------------------------------------------| -? | /assets/css/core.css | -? | | -? | Copyright (c) 2018-2020 Belikhun. All right reserved | -? | Licensed under the MIT License. See LICENSE in the project root for license information. | -? |-----------------------------------------------------------------------------------------------| -*/ - -body { - position: relative; - background-color: #666666; - font-family: "Open Sans", "Segoe UI", "Calibri", Tahoma, Geneva, Verdana, sans-serif; - margin: 0 0 20px; - overflow: hidden; - width: 100vw; - height: 100vh; -} - -/* Change Autocomplete styles in Chrome*/ -input:-webkit-autofill { - background-color: rgba(0, 0, 0, 0); -} - -body #container { - position: absolute; - display: block; - width: 100vw; - top: 56px; - bottom: 0; - background-color: #ebebeb; - box-sizing: border-box; - padding: 5px; - overflow-x: hidden; - overflow-y: auto; - transition: - transform 0.4s ease, - filter 0.4s ease; -} - -body #container .flexRow { - position: relative; - display: flex; - flex-direction: row; - height: 100%; - min-height: 420px; -} - -body #container .flexColumn { - position: relative; - display: flex; - flex-direction: column; -} - -body #container .flexColumn.large { - flex-grow: 1; -} - -body #container .flexColumn.small { - flex-grow: 0; - flex-shrink: 0; -} - -.navBar.showBottom ~ #userSettings, -.navBar.showBottom ~ #container { - top: 94px; -} - -.contestTimer { - display: none; - flex-direction: row; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: 4px 0 8px; -} - -.navBar.showBottom .contestTimer { - display: flex; - height: 38px; -} - -.contestTimer::before { - content: ""; - position: absolute; - display: block; - top: 0; - left: 10px; - right: 10px; - height: 1px; - background-color: rgba(122, 122, 122, 0.2); -} - -.contestTimer #contestTimeState { - position: relative; - font-size: 13px; - text-align: center; - text-transform: uppercase; - letter-spacing: .4px; - color: rgb(90, 90, 90); -} - -.contestTimer .reload { - position: relative; - display: inline-block; - font-size: 18px; - font-weight: bold; - cursor: pointer; - color: rgba(98, 98, 98, 0.54); - transition: color 0.2s ease; -} - -.contestTimer #contestTimeState, -.contestTimer .reload, -.contestTimer separator { - margin-top: 4px; -} - -.contestTimer .reload:hover { - color: rgba(98, 98, 98, 0.82); -} - -.contestTimer .progressBar { - position: absolute; - bottom: 0; - width: 100%; - margin-top: 28px; - height: 4px; -} - -.contestTimer .progressBar > .left, -.contestTimer .progressBar > .right { - transform: translateY(calc(-100% - 4px)); -} - -.contestTimer .progressBar > .left { - left: 10px; -} - -.contestTimer .progressBar > .right { - right: 10px; -} - -@media only screen and (max-width: 800px) { - .navBar.showBottom .contestTimer #contestTimeState, - .navBar.showBottom .contestTimer #contestTimeState + separator { - display: none; - } -} - -panel { - position: relative; - display: flex; - flex-direction: column; - width: 350px; - height: auto; - background-color: white; - box-shadow: 0 0 5px rgba(98, 98, 98, 0.2); - margin: 5px; - box-sizing: border-box; -} - -panel .head { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - height: 40px; - padding: 10px 10px 10px 20px; - box-sizing: border-box; - background-color: rgb(238, 240, 243); - border-bottom: 1px solid #e6e6e6; -} - -panel .head .le { - position: relative; - display: inline-block; - flex: 1 1 0; - - font-family: Calibri; - font-size: 16px; - font-weight: bold; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - color: rgba(56, 56, 56, 0.8); -} - -panel .head .ri { - position: relative; - display: flex; - align-items: center; - flex: 0 0 0; -} - -panel .head .ri > i { - position: relative; - display: inline; - font-size: 18px; - font-weight: bold; - color: rgba(98, 98, 98, 0.54); - padding: 0 2px; - cursor: pointer; - transition: color 0.2s ease; -} - -panel .head .ri > i.bak { - font-size: 20px; -} - -panel .head .ri > i:hover { - color: rgba(98, 98, 98, 0.82); -} - -panel .main { - position: relative; - display: inline-block; - width: 100%; - height: calc(100% - 40px); - margin: unset; - padding: unset; - overflow: auto; - box-sizing: border-box; - background-color: #fafafa; -} - -panel .main:empty::before, -panel .main .showEmpty:empty::before { - content: "\f51b"; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, calc(-50% - 22px)); - font-family: "Font Awesome 5 Free"; - font-weight: 900; - font-size: 72px; - color: rgb(192, 192, 192); -} - -panel .main:empty::after, -panel .main .showEmpty:empty::after { - content: "Không có dữ liệu"; - position: absolute; - display: block; - width: calc(100% - 20px); - top: 50%; - transform: translateY(calc(-50% + 38px)); - font-weight: 600; - font-size: 14px; - text-align: center; - color: rgb(192, 192, 192); -} - -/** Pannel Layout: Logged in */ - -#problemp { - flex-grow: 1; - width: auto; - height: calc(100% - 10px); -} - -#uploadp { - height: 190px; -} - -#logp { - flex-grow: 1; - height: calc(100% - 220px); -} - -#rankp { - flex-grow: 1; -} - -@media only screen and (max-width: 1130px) { - body #container .flexRow { - flex-wrap: wrap; - height: auto; - } - - body #container .flexRow:first-child { - min-height: 100%; - } - - body #container .flexRow:first-child > .flexColumn.large { - min-height: calc(100vh - 90px); - } - - body #container .flexRow:last-child { - height: 100%; - } - - body #container .flexRow:last-child > #rankp { - max-height: calc(100% - 10px); - } - - body #container .flexColumn { - width: 100%; - } - - #uploadp, - #logp { - width: auto; - } - - #logp { - height: auto; - max-height: calc(100vh - 90px); - } -} - -/** Pannel Layout: Guest mode */ - -body.guest #container { - display: flex; - flex-direction: column; -} - -body.guest #container > .flexRow:nth-child(1) { - order: 2; - flex-grow: 0; - min-height: 100%; -} - -body.guest #container > .flexRow:nth-child(2) { - order: 1; - min-height: 100%; -} - -body.guest #problemp { - height: 200px; - flex-grow: 1; -} - -body.guest #problemp.hide { - display: none; -} - -#wrapper { - position: fixed; - display: none; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: 60px 0 20px; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.6); - z-index: 2; -} - -#wrapper.show { - display: flex; -} - -#wrapper #wrapperPanel { - position: relative; - width: calc(100% - 100px); - height: calc(100% - 20px); - max-width: 1000px; - max-height: 640px; - margin: unset; -} - -#wrapper #wrapperPanel[data-size="small"] { - width: calc(100% - 300px); - max-width: 720px; - min-width: 420px; - margin: unset; -} - -#wrapper #wrapperPanel[data-size="large"] { - width: calc(100% - 80px); - max-width: unset; - max-height: 100%; - margin: unset; -} - -#logp div.main:empty::before { - content: "\f564"; -} - -#logp .logItemContainer { - position: relative; -} - -#logp .logItemContainer .logItem { - position: relative; - box-sizing: border-box; - width: calc(100% - 25px); - height: 48px; - margin-left: 25px; - padding-right: 25px; -} - -#logp .logItemContainer .logItem .h { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - height: 100%; - box-sizing: border-box; - border-bottom: 1px solid #e6e6e6; -} - -#logp .logItemContainer .logItem .h .l { - position: relative; - display: inline-block; - flex-grow: 1; - overflow: hidden; -} - -#logp .logItemContainer .logItem .h .l .t { - font-size: 10px; - font-weight: normal; - color: rgba(59, 71, 82, 0.7); -} - -#logp .logItemContainer .logItem .h .l .n { - font-size: 13px; - font-weight: bold; - color: #585858; -} - -#logp .logItemContainer .logItem.scored .h .l .n { - color: #1124c8; -} - -#logp .logItemContainer .logItem.correct .h .l .n { - color: #39aa56; -} - -#logp .logItemContainer .logItem.passed .h .l .n { - color: #0ca3be; -} - -#logp .logItemContainer .logItem.accepted .h .l .n { - color: #b9ab14; -} - -#logp .logItemContainer .logItem.failed .h .l .n { - color: #db4545; -} - -#logp .logItemContainer .logItem .h .r { - position: relative; - display: flex; - flex-grow: 0; - flex-direction: column; - align-items: flex-end; - justify-content: center; - margin-right: 10px; -} - -#logp .logItemContainer .logItem .h .r t { - color: rgba(98, 98, 98, 0.7); - font-size: 11px; - letter-spacing: 0.01em; -} - -#logp .logItemContainer .logItem .h .r .s { - font-weight: bold; - color: rgba(82, 82, 82, 0.7); - font-size: 11px; -} - -#logp .logItemContainer .logItem .d { - position: absolute; - right: 0; - top: 0; - width: 25px; - height: 100%; - cursor: pointer; - background-color: #f8f8f8; - color: #c0c0c0; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - text-decoration: none; -} - -#logp .logItemContainer .logItem .d:not(.link) { - cursor: not-allowed; -} - -#logp .logItemContainer .logItem .d::before { - content: "open_in_browser"; - font-family: "Material Icons"; - font-weight: lighter; - font-size: 16px; -} - -#logp .logItemContainer .logItem .d:hover { - background-color: #f1f1f1; - color: #6e6e6e; -} - -#logp .logItemContainer .logItem.queue .h .l .n { - color: #8710cc; -} - -#logp .logItemContainer .logItem.queue .d::before { - content: "\f2f1"; - font-family: "Font Awesome 5 Free"; - animation: spin 1s linear 0s infinite forwards; - font-weight: 600; - font-size: 12px; -} - -#logp .logItemContainer .logItem.judging .h .l .n { - color: #c811c8; -} - -#logp .logItemContainer .logItem.judging .d::before { - content: "\f0e3"; - font-family: "Font Awesome 5 Free"; - animation: spin 1s linear 0s infinite forwards; - font-weight: 600; - font-size: 12px; -} - -#logp .logItemContainer .logItem.queue .d, -#logp .logItemContainer .logItem.judging .d { - cursor: default; -} - -#uploadp .fileupload-container { - overflow: hidden; -} - -#uploadp .fileupload-container #submitDropzone { - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 20px; - padding: 10px; - box-sizing: border-box; - top: 0; - left: 0; - bottom: 0; - right: 0; - border: 2px dotted #ccc; - border-radius: 4px; - opacity: 1; - z-index: 1; - transition: all 0.4s ease; - transition-property: color, background-color, opacity; -} - -#uploadp .fileupload-container #submitDropzone.drag { - background-color: #ccc; - color: white; -} - -#uploadp .fileupload-container #submitDropzone.hide { - opacity: 0; -} - -#uploadp .fileupload-container #submitDropzone.hide+.info { - opacity: 1; -} - -#uploadp .fileupload-container #submitDropzone #submitInput { - display: none; -} - -#uploadp .fileupload-container #submitDropzone .title { - color: rgb(104, 104, 104); - font-size: 16px; - font-weight: bold; - text-transform: uppercase; -} - -#uploadp .fileupload-container #submitDropzone .sub { - color: rgb(128, 128, 128); - font-size: 12px; - margin: 4px 0; -} - -#uploadp .fileupload-container .info { - position: absolute; - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 20px; - transition: all 0.4s ease; - opacity: 0; -} - -#uploadp .fileupload-container .info #submitStatus { - position: relative; - display: block; - padding-bottom: 2px; - box-sizing: border-box; - width: 100%; - font-size: 20px; - font-weight: 100; - text-align: center; - text-transform: uppercase; - color: rgb(136, 136, 136); -} - -#uploadp .fileupload-container .info #submitFileName { - position: relative; - display: block; - width: 100%; - font-size: 13px; - font-weight: 500; - text-align: center; - color: rgb(93, 93, 93); -} - -#uploadp .fileupload-container .info .progressBar { - position: absolute; - bottom: 24px; - left: 50%; - width: 90%; - transform: translateX(-50%); -} - -.problemSettings { - padding: unset; - height: 220px; -} - -.problemSettings .header { - height: 40px; - background-color: #F5F5F6; - display: flex; - align-items: center; - padding: 0 10px; -} - -.problemSettings .header div span { - padding: 0 3px; - cursor: pointer; -} - -.problemSettings .header div span::before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - font-weight: 600; - color: rgba(98, 98, 98, 0.54); - transition: color 0.2s ease; -} - -.problemSettings .header div span:hover::before { - color: rgba(98, 98, 98, 0.82) -} - -.problemSettings .header .left .back::before { - content: "\f104"; -} - -.problemSettings .header .right .add::before { - content: "\f067"; - font-size: 12px; -} - -.problemSettings .header .right .check::before { - content: "\f00c"; - font-size: 12px; -} - -.problemSettings .header .title { - position: absolute; - left: 50%; - color: #a5a5a5; - transform: translateX(-50%); -} - -.problemSettings .header .right { - position: absolute; - right: 10px; -} - -.problemSettings .problemsContainer { - position: relative; - height: calc(100% - 46px); - background-color: transparent; - overflow: hidden; -} - -.problemSettings .problemsContainer .problemsList { - position: relative; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - margin: unset; - padding: unset; - list-style: none; - overflow-x: hidden; - overflow-y: auto; - transition: all 0.4s ease; -} - -.problemSettings .problemsContainer .problemsList li.item { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - height: 64px; - box-sizing: border-box; - padding: 0 10px; - border-bottom: unset; -} - -.problemSettings .problemsContainer .problemsList li.item:hover { - background-color: rgba(245, 245, 246, 0.4); -} - -.problemSettings .problemsContainer .problemsList li.item:after { - content: unset; -} - -.problemSettings .problemsContainer .problemsList li.item .icon { - position: relative; - flex-grow: 0; - flex-shrink: 0; - width: 40px; - height: 40px; - border-radius: 50%; - object-fit: cover; -} - -.problemSettings .problemsContainer .problemsList li.item .title { - position: relative; - flex-grow: 1; - flex-shrink: 1; - list-style: none; - margin: unset; - padding: 0 0 0 10px; -} - -.problemSettings .problemsContainer .problemsList li.item .title .id { - font-size: 11px; - color: rgba(73, 73, 73, 0.6); - letter-spacing: 0.4px; -} - -.problemSettings .problemsContainer .problemsList li.item .title .name { - font-size: 14px; - color: #494949; -} - -.problemSettings .problemsContainer .problemsList li.item .action { - position: relative; - display: block; - flex-grow: 0; - flex-shrink: 0; -} - -.problemSettings .problemsContainer .problemsList li.item .action span { - padding: 0 4px; - cursor: pointer; -} - -.problemSettings .problemsContainer .problemsList li.item .action span::before { - font-family: "Font Awesome 5 Free"; - font-size: 16px; - font-weight: 600; - color: #95a5a6; - transition: color 0.1s ease; -} - -.problemSettings .problemsContainer .problemsList li.item .action span.delete::before { - content: "\f1f8"; -} - -.problemSettings .problemsContainer .problemsList li.item .action span.delete:hover::before { - color: #e74c3c; -} - -.problemSettings .problemsContainer .problemsList li.item .action span.edit::before { - content: "\f304"; -} - -.problemSettings .problemsContainer .problemsList li.item .action span.edit:hover::before { - color: #3498db; -} - -.problemSettings .problemsContainer .problemsList.hide { - transform: translateX(-100%); -} - -.problemSettings .problemsContainer .problem { - position: absolute; - width: 100%; - height: 100%; - top: 0; - right: 0; - overflow: auto; - padding: 0 10px; - box-sizing: border-box; - transform: translateX(100%); - transition: all 0.4s ease; -} - -.problemSettings .problemsContainer .problemsList.hide + .problem { - transform: unset; -} - -.problemSettings .problemsContainer .problem #problemEdit_desc { - resize: none; - height: 160px; -} - -.problemSettings .problemsContainer .problem #problemEdit_deleteImage, -.problemSettings .problemsContainer .problem #problemEdit_deleteAttachment { - width: 100%; - margin-top: 8px; -} - -.problemSettings .problemsContainer .problem .test-container { - position: relative; - margin-bottom: 20px; - border-bottom: 1px solid rgba(39, 39, 39, 0.4); - padding-bottom: 1px; - transition: 0.3s; -} - -.problemSettings .problemsContainer .problem .test-container:hover { - border-bottom: 2px solid #4285f4; - padding-bottom: 0; -} - -.problemSettings .problemsContainer .problem .test-container .test { - display: block; - font-size: 8px; - font-weight: 700; - color: #8b8b8b; - text-transform: uppercase; - margin: 12px 0; - transition: 0.3s; -} - -.problemSettings .problemsContainer .problem .test-container:hover .test { - color: #4285f4; -} - -.problemSettings .problemsContainer .problem .test-container .test-list { - position: relative; - width: 100%; - box-sizing: border-box; - display: block; -} - -.problemSettings .problemsContainer .problem .test-container .test-list .cell { - position: relative; - height: 60px; -} - -.problemSettings .problemsContainer .problem .test-container .test-list .cell textarea { - position: relative; - resize: none; - border: unset; - background-color: transparent; - box-sizing: border-box; - width: calc(50% - 15px); - height: 100%; - font-family: "Consolas"; - border-bottom: 1px solid rgba(39, 39, 39, 0.4); -} - -.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete { - position: absolute; - display: block; - right: 0; - top: 0; - width: 24px; - height: 100%; - cursor: pointer; - transition: 0.2s; -} - -.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete:hover { - background-color: rgba(202, 202, 202, 0.2); -} - -.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete::before { - content: "\f2ed"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: "Font Awesome 5 Free"; - font-size: 14px; - font-weight: 600; - color: #95a5a6; - transition: 0.2s; -} - -.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete:hover::before { - color: #e74c3c; -} - -.problemSettings .problemsContainer .problem .test-container .test-add { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 60px; - cursor: pointer; - transition: 0.2s; -} - -.problemSettings .problemsContainer .problem .test-container .test-add:hover { - background-color: rgba(202, 202, 202, 0.2); -} - -.problemSettings .problemsContainer .problem .test-container .test-add::after { - content: "\f067"; - font-family: "Font Awesome 5 Free"; - font-size: 18px; - font-weight: 600; - color: #95a5a6; - transition: 0.2s; -} - -.problemSettings .problemsContainer .problem .test-container .test-add:hover::after { - color: #494949; -} - -.problemSettings .problemsContainer .problem button[type="submit"] { - display: none; -} - -#userSettings #usett_panelContainer .panel .container .syslogs-settings { - position: relative; - display: flex; - flex-direction: column; -} - -.syslogs-settings .logsContainer { - position: relative; - flex-grow: 1; - overflow-x: hidden; - overflow-y: auto; -} - -.syslogs-settings .logsContainer .log { - position: relative; - display: flex; - flex-direction: row; - background-color: rgba(224, 224, 224, 0.8); - counter-increment: log-item; - cursor: pointer; - - transition: background-color 0.3s ease; -} - -.syslogs-settings .logsContainer .log:hover { - background-color: rgba(232, 232, 232, 0.8); -} - -.syslogs-settings .logsContainer .log .level { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - flex-grow: 0; - color: rgb(82, 82, 82); - background-color: rgb(236, 236, 236); - min-width: 100px; - padding: 0 10px 0 40px; - font-size: 14px; - font-weight: bold; - box-sizing: border-box; - overflow: hidden; - transition: all 0.3s ease; - transition-property: padding, background-color; -} - -.syslogs-settings .logsContainer .log.enlarge .level { - padding: 0 20px; - background-color: rgb(242, 242, 242); -} - -.syslogs-settings .logsContainer .log .level > i { - position: absolute; - top: 50%; - left: 10px; - transform: translateY(-50%); - font-weight: bold; - font-size: 10px; - font-style: normal; - - transition: all 0.3s ease; -} - -.syslogs-settings .logsContainer .log.enlarge .level > i { - left: 50%; - transform: translate(-50%, calc(-50% + 22px)); -} - -.syslogs-settings .logsContainer .log .detail { - position: relative; - display: inline-block; - width: 100%; - overflow-x: auto; - overflow-y: hidden; - padding: 10px 40px 10px 20px; - box-sizing: border-box; - flex-grow: 2; - border-left: 2px solid rgb(165, 165, 165); -} - -.syslogs-settings .logsContainer .log .detail::before { - content: "\f107"; - position: absolute; - top: 50%; - right: 10px; - transform: translateY(-50%); - display: inline-block; - - font-family: "Font Awesome 5 Free"; - font-size: 14px; - font-weight: 900; - color: rgb(104, 104, 104); - - transition: transform 0.3s ease; -} - -.syslogs-settings .logsContainer .log.enlarge .detail::before { - transform: translateY(-50%) rotate(180deg); -} - -.syslogs-settings .logsContainer .log .detail .text { - position: relative; - display: block; - font-family: "Consolas", "Calibri", "Segoe UI"; - font-size: 15px; - font-weight: normal; - color: rgb(56, 56, 56); -} - -.syslogs-settings .logsContainer .log .detail .info { - position: relative; - display: block; - width: 100%; - height: 0; - box-sizing: border-box; - - overflow-x: auto; - overflow-y: hidden; - - transition: height 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); -} - -.syslogs-settings .logsContainer .log .detail .info::before { - content: ""; - position: relative; - display: block; - width: 100%; - height: 8px; -} - -.syslogs-settings .logsContainer .log.enlarge .detail .info { - height: 54px; -} - -.syslogs-settings .logsContainer .log .detail .info t { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - - font-family: "Calibri", "Segoe UI"; - font-size: 13px; - color: rgb(90, 90, 90); -} - -.syslogs-settings .logsContainer .log .detail .info t::before { - content: "\f111"; - position: relative; - display: inline-block; - padding-right: 6px; - - font-family: "Font Awesome 5 Free"; - font-size: 13px; - font-weight: 900; -} - -.syslogs-settings .logsContainer .log .detail .info .client { - font-weight: bold; -} - -.syslogs-settings .logsContainer .log .detail .info .client::before { - content: "\f2bd"; -} - -.syslogs-settings .logsContainer .log .detail .info .timestamp::before { - content: "\f017"; -} - -.syslogs-settings .logsContainer .log .detail .info .module::before { - content: "\f466"; -} - -.syslogs-settings .logsContainer .log.okay .detail { - border-left-color: rgb(124, 194, 129); -} - -.syslogs-settings .logsContainer .log.okay .level { - color: rgb(28, 172, 38); -} - -.syslogs-settings .logsContainer .log.warn .detail { - border-left-color: rgb(190, 184, 92); -} - -.syslogs-settings .logsContainer .log.warn .level { - color: rgb(163, 155, 46); -} - -.syslogs-settings .logsContainer .log.errr .detail { - border-left-color: rgb(223, 150, 150); -} - -.syslogs-settings .logsContainer .log.errr .level { - color: rgb(233, 67, 67); -} - -.syslogs-settings .logsContainer .log.verb .detail { - border-left-color: rgb(191, 149, 211); -} - -.syslogs-settings .logsContainer .log.verb .level { - color: rgb(148, 15, 209); -} - -.syslogs-settings .navigation { - position: relative; - display: flex; - align-items: center; - flex-grow: 0; - flex-direction: row; - width: 100%; - padding: 10px; - box-sizing: border-box; - background-color: rgb(242, 242, 242); -} - -.syslogs-settings .navigation .left, -.syslogs-settings .navigation .right { - position: relative; - flex: 1 0 0; - font-size: 11px; -} - -.syslogs-settings .navigation .right { - text-align: right; -} - -.syslogs-settings .navigation .middle { - position: relative; - display: flex; - align-items: center; - justify-content: center; - flex-grow: 2; -} - -.syslogs-settings .navigation .middle .icon { - position: relative; - display: inline-block; - cursor: pointer; - padding: 0 18px; -} - -.syslogs-settings .navigation .middle .icon::before { - content: "\f111"; - position: relative; - display: inline-block; - - font-family: "Font Awesome 5 Free"; - font-size: 22px; - font-weight: 900; - color: rgb(158, 158, 158); - transition: color 0.2s ease; -} - -.syslogs-settings .navigation .middle .icon:hover::before { - color: #f368e0; -} - -.syslogs-settings .navigation .middle .buttonLeft::before { - content: "\f104"; -} - -.syslogs-settings .navigation .middle .buttonRight::before { - content: "\f105"; -} - -.syslogs-settings .navigation .middle .currentPage { - position: relative; - font-size: 13px; - font-weight: bold; - line-height: 18px; -} - - -#problemp .problemsContainer { - overflow: hidden; -} - -#problemp .problemsContainer .problemsList:empty::before { - content: "\f51b"; -} - -#problemp .problemsContainer .problemsList:empty::after { - content: "Không tìm thấy đề hoặc chưa bắt đầu kì thi"; -} - -#problemp .problemsContainer .problemsList { - position: relative; - display: flex; - flex-wrap: wrap; - flex-direction: row; - justify-content: stretch; - width: 100%; - max-height: 100%; - box-sizing: border-box; - padding: 10px; - overflow: auto; - - animation: problemsListShow 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; -} - -#problemp .problemsContainer .problemsList:empty { - height: 100%; -} - -#problemp .problemsContainer .problemsList .item { - position: relative; - display: flex; - flex-grow: 0; - flex-shrink: 0; - flex-direction: row; - align-items: center; - box-sizing: border-box; - cursor: pointer; - margin: 10px; - padding: 10px 40px 10px 20px; - border-radius: 12px; - background-color: rgba(238, 238, 238, 0.6); -} - -#problemp .problemsContainer .problemsList .item:hover { - background-color: rgba(124, 124, 124, 0.1); -} - -#problemp .problemsContainer .problemsList .item:after { - content: "\f105"; - position: absolute; - font-family: "Font Awesome 5 Free"; - font-size: 18px; - font-weight: 600; - color: #95a5a6; - right: 20px; -} - -#problemp .problemsContainer .problemsList .item .icon { - position: relative; - display: inline-block; - flex: 0 0 1; - width: 50px; - height: 50px; - border-radius: 25px; - object-fit: cover; -} - -#problemp .problemsContainer .problemsList .item .title { - display: inline-block; - flex: 1 1 0; - list-style: none; - margin: unset; - padding: 0 0 0 10px; -} - -#problemp .problemsContainer .problemsList .item .title .name { - position: relative; - font-family: Nunito; - font-size: 16px; - font-weight: 800; - color: #494949; -} - -#problemp .problemsContainer .problemsList .item .title .point { - position: relative; - display: inline-block; - font-size: 11px; - color: #ecf0f1; - letter-spacing: 0.4px; - background-color: #27ae60; - padding: 2px 6px; - margin-top: 2px; - border-radius: 4px; -} - -#problemp .problemsContainer .problemsList .item[disabled="true"] { - background-color: rgba(243, 184, 205, 0.6); -} - -#problemp .problemsContainer .problem { - position: absolute; - width: 100%; - height: 100%; - top: 0; - right: 0; - box-sizing: border-box; - padding: 10px; - overflow-x: hidden; - overflow-y: auto; - background-color: inherit; - - animation: problemViewerHide 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; -} - -@keyframes problemsListShow { - 0% { - visibility: hidden; - } - - 1% { - visibility: visible; - transform: scale(.9); - filter: blur(6px) brightness(.9); - opacity: 0; - } - - 100% { - visibility: visible; - transform: scale(1); - filter: blur(0) brightness(1); - opacity: 1; - } -} - -@keyframes problemsListHide { - 0% { - transform: scale(1); - filter: blur(0) brightness(1); - opacity: 1; - } - - 99% { - transform: scale(.9); - filter: blur(6px) brightness(.9); - opacity: 0; - } - - 100% { - visibility: hidden; - } -} - -@keyframes problemViewerShow { - 0% { - visibility: hidden; - transform: translateX(100%); - } - - 1% { - visibility: visible; - transform: scale(1.1); - filter: brightness(.9); - opacity: 0; - } - - 100% { - visibility: visible; - transform: scale(1); - filter: brightness(1); - opacity: 1; - } -} - -@keyframes problemViewerHide { - 0% { - transform: scale(1); - filter: brightness(1); - opacity: 1; - } - - 99% { - transform: scale(1.1); - filter: brightness(.9); - opacity: 0; - } - - 100% { - visibility: hidden; - transform: translateX(100%); - } -} - -#problemp .problemsContainer .problemsList.hide { - animation: problemsListHide 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; -} - -#problemp .problemsContainer .problemsList.hide + .problem { - animation: problemViewerShow 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; -} - -#problemp .problemsContainer .problem .name { - display: block; - text-align: center; - font-family: Nunito; - font-size: 19px; - font-weight: 900; - letter-spacing: .8px; - color: #34495e; -} - -#problemp .problemsContainer .problem .point { - display: block; - text-align: center; - font-size: 12px; - font-weight: bold; - color: #287548; - letter-spacing: 0.4px; -} - -#problemp .problemsContainer .problem .enlarge, -#problemp .problemsContainer .problem .close { - position: absolute; - display: block; - top: 20px; - right: 50px; -} - -#problemp .problemsContainer .problem .enlarge::before, -#problemp .problemsContainer .problem .close::before { - content: "\f360"; - position: relative; - font-family: "Font Awesome 5 Free"; - font-size: 22px; - font-weight: 600; - cursor: pointer; - color: rgb(92, 92, 92); -} - -#problemp .problemsContainer .problem .close { - right: 20px; -} - -#problemp .problemsContainer .problem .close::before { - content: "\f00d"; -} - -#problemp .problemsContainer .problem .info { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - margin: 6px 0 20px; -} - -#problemp .problemsContainer .problem .info .filename::before { - content: "ID: "; -} - -#problemp .problemsContainer .problem .info.general { - margin-bottom: 4px; -} - -#problemp .problemsContainer .problem .info.IO > t { - font-family: "Consolas"; - font-weight: bold; - font-size: 16px; -} - -#problemp .problemsContainer .problem .info.IO .input::before, -#problemp .problemsContainer .problem .info.IO .output::before { - position: relative; - display: inline-block; - font-family: "Open Sans"; - font-weight: normal; - font-size: 13px; - margin-right: 6px; -} - -#problemp .problemsContainer .problem .info.IO .input::before { - content: "Input:"; -} - -#problemp .problemsContainer .problem .info.IO .output::before { - content: "Output:"; -} - -#problemp .problemsContainer .problem .description { - white-space: pre-wrap; - margin: 0 20px; -} - -#problemp .problemsContainer .problem .description > a, -#problemp .problemsContainer .problem .description > table, -#problemp .problemsContainer .problem .description > ul { - display: block; -} - -#problemp .problemsContainer .problem table tr:hover { - background-color: rgba(126, 126, 126, 0.1); -} - -#problemp .problemsContainer .problem table.test tr td { - font-family: "Consolas"; -} - -#problemp .problemsContainer .problem .image { - position: relative; - width: 100%; - margin: 10px 0; - border: 1px solid #ccc; -} - -#problemp .problemsContainer .problem .attachment { - position: relative; - display: block; - margin-top: 10px; -} - -#problemp .problemsContainer .problem .attachment .link { - position: relative; - display: block; - font-size: 14px; -} - -#problemp .problemsContainer .problem .attachment .link::before { - content: "Tệp đính kèm:"; - position: relative; - display: inline-block; - font-family: "Calibri"; - font-size: 13px; - font-weight: bold; - user-select: none; - margin-right: 4px; - color: rgb(124, 124, 124); -} - -#problemp .problemsContainer .problem .attachment .embed { - width: 100%; - height: 0; - min-height: 80px; - max-height: calc(100vh - 160px); - margin: 10px 0 20px; - transition: height 0.4s ease-in; -} - -/* *rankingContainer */ - -#rankp div.rankingContainer { - position: relative; - overflow: auto; -} - -#rankp div.rankingContainer:empty::before { - content: "\f02d"; -} - -#rankp div.rankingContainer:empty::after { - content: "Không có dữ liệu hoặc đã bị tắt"; -} - -#rankp div.rankingContainer table { - position: relative; - font-family: "Calibri"; - box-sizing: border-box; - border-spacing: 0; - padding: 10px; - min-width: 100%; -} - -#rankp div.rankingContainer table tr th:nth-child(1), -#rankp div.rankingContainer table tr td:nth-child(1) { - width: 20px; - text-align: center; -} - -#rankp div.rankingContainer table tr th:nth-child(2), -#rankp div.rankingContainer table tr td:nth-child(2) { - text-align: left; -} - -#rankp div.rankingContainer table tr th:nth-child(2) { - width: 40px; -} - -#rankp div.rankingContainer table tr td:nth-child(2) { - display: flex; - align-items: center; - padding: 10px; - margin: 0 0 0 10px; -} - -#rankp div.rankingContainer table tr td:nth-child(2) .avt { - position: relative; - display: block; - width: 40px; - height: 40px; - border-radius: 50%; -} - -#rankp div.rankingContainer table tr td:nth-child(3) .username { - font-family: "Open Sans"; - font-size: 11px; - font-style: italic; - color: rgb(114, 114, 114); - letter-spacing: .2px; -} - -#rankp div.rankingContainer table tr td:nth-child(3) .name { - font-size: 15px; - letter-spacing: .2px; -} - -#rankp div.rankingContainer table tr td.number:nth-child(4) { - color: #3c7be7; - font-size: 16px; - font-weight: bold; -} - -#rankp div.rankingContainer table thead tr th:nth-child(3) { - text-align: left; -} - -#rankp div.rankingContainer table tbody tr[data-rank="1"] { - background-color: rgba(111, 241, 134, 0.2); -} - -#rankp div.rankingContainer table tbody tr[data-rank="2"] { - background-color: rgba(239, 241, 111, 0.2); -} - -#rankp div.rankingContainer table tbody tr[data-rank="3"] { - background-color: rgba(230, 111, 241, 0.2); -} - -#rankp div.rankingContainer table tbody tr[data-rank="1"] td:nth-child(3) .name, -#rankp div.rankingContainer table tbody tr[data-rank="2"] td:nth-child(3) .name, -#rankp div.rankingContainer table tbody tr[data-rank="3"] td:nth-child(3) .name { - font-family: Nunito; - font-size: 16px; - font-weight: 850; - letter-spacing: .4px; - color: rgb(65, 65, 65); -} - -#rankp div.rankingContainer table tr th { - position: sticky; - top: 0; - background-color: #fafafa; - border-bottom: 1px solid #9b9b9b; - color: rgb(82, 82, 82); - font-family: Segoe UI; - font-size: 13px; - font-weight: bold; - z-index: 1; -} - -#rankp div.rankingContainer table tr th.problem > t { - display: inline-block; - color: rgb(82, 82, 82); - font-family: Segoe UI; - font-size: 13px; - font-weight: bold; -} - -#rankp div.rankingContainer table tr th.problem > .toggler { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - width: 18px; - height: 18px; - padding: 0 4px; - cursor: pointer; - - transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); -} - -#rankp div.rankingContainer table tr th.problem > .toggler::after { - content: "\f104"; - position: relative; - display: block; - font-family: "Font Awesome 5 Free"; - font-size: 18px; - font-weight: 900; - transform: translateY(2px); -} - -#rankp div.rankingContainer table tr th.problem[data-folding="true"] { - width: 10px; - padding: unset; -} - -#rankp div.rankingContainer table tr th.problem[data-folding="true"] > t { - display: none; -} - -#rankp div.rankingContainer table tr th.problem[data-folding="true"] > .toggler { - transform: rotate(180deg); -} - -#rankp div.rankingContainer table tr th.problem[data-folding="true"] > .toggler::after { - transform: unset; -} - -#rankp div.rankingContainer table tr th, -#rankp div.rankingContainer table tr td { - padding: 10px 12px; -} - -#rankp div.rankingContainer table tr td { - font-size: 13px; -} - -#rankp div.rankingContainer table tr td.number { - font-size: 13px; - text-align: right; - color: rgb(172, 172, 172); -} - -#rankp div.rankingContainer table tr td.number[data-folding="true"] { - font-size: 0; - padding: unset; -} - -#rankp div.rankingContainer table tr td.number.link { - cursor: pointer; -} - -#rankp div.rankingContainer table tr .number.link, -#rankp div.rankingContainer table tr .number.correct, -#rankp div.rankingContainer table tr .number.passed, -#rankp div.rankingContainer table tr .number.accepted, -#rankp div.rankingContainer table tr .number.failed, -#rankp div.rankingContainer table tr .number.skipped { - color: rgb(75, 75, 75); -} - -#rankp div.rankingContainer table tr td.number.correct { - background-color: rgb(147, 243, 158); -} - -#rankp div.rankingContainer table tr td.number.passed { - background-color: rgb(150, 245, 248); -} - -#rankp div.rankingContainer table tr td.number.accepted { - background-color: rgb(240, 237, 157); -} - -#rankp div.rankingContainer table tr td.number.failed { - background-color: rgb(248, 187, 187) -} - -#rankp div.rankingContainer table tr td.number.skipped { - background-color: rgb(212, 212, 212); -} - -#rankp div.rankingContainer table tr td.number.link:hover { - filter: brightness(1.1); -} - -#wrapper #wrapp .main .full { - display: block; - margin: auto; -} - -.problemEnlarged { - position: relative; - display: flex; - flex-direction: row; - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: auto; -} - -.problemEnlarged .left { - position: relative; - display: flex; - flex-grow: 1; - flex-shrink: 1; - flex-direction: column; - height: 100%; - overflow-x: hidden; - overflow-y: auto; -} - -.problemEnlarged .left .top { - position: relative; - display: flex; - flex-direction: column; - flex-shrink: 0; - align-items: center; - width: 100%; - padding: 20px 0; - box-sizing: border-box; - overflow-x: hidden; - overflow-y: auto; -} - -.problemEnlarged .left .top .group { - position: relative; - display: flex; - flex-direction: row; - width: 100%; - align-items: center; - justify-content: center; -} - -.problemEnlarged .left .top .group .col { - position: relative; - display: flex; - flex: 1 1 0; - flex-direction: column; - padding: 0 20px; - align-items: center; -} - -.problemEnlarged .left .top .group .col .name { - font-size: 26px; - font-weight: bold; - text-align: center; - color: #34495e; -} - -.problemEnlarged .left .top .group .col .point { - font-size: 12px; - color: #ecf0f1; - letter-spacing: 0.4px; - background-color: #1f8d4d; - padding: 2px 6px; - margin: 2px 0 10px; - border-radius: 4px; -} - -.problemEnlarged .left .top .attachment { - position: relative; - display: flex; - flex-direction: row; - align-items: flex-end; - width: 100%; - box-sizing: border-box; - padding: 10px 20px; -} - -.problemEnlarged .left .top .attachment::before { - content: "Tệp đính kèm:"; - position: relative; - display: inline-block; - font-family: "Calibri"; - font-size: 13px; - font-weight: bold; - padding-right: 6px; - color: rgb(124, 124, 124); -} - -.problemEnlarged .left .top .attachment .link { - font-size: 14px; -} - -.problemEnlarged .left .top .simpleTableWrapper .simpleTable { - width: 100%; -} - -.problemEnlarged .left .bottom { - position: relative; - display: flex; - flex-grow: 1; - flex-direction: column; - align-items: center; - padding: 20px; - box-sizing: border-box; - background-color: rgb(238, 238, 238); -} - -.problemEnlarged .left .bottom .simpleTableWrapper { - position: relative; - display: block; - width: auto; - max-width: 100%; - margin-top: 20px; -} - -.problemEnlarged .left .bottom .simpleTableWrapper .simpleTable.test tr td { - font-family: "Consolas"; - white-space: pre; -} - -.problemEnlarged .left .bottom .description { - position: relative; - width: 100%; - box-sizing: border-box; - white-space: pre-wrap; - line-height: 1.4em; -} - -.problemEnlarged .left .bottom .description > a, -.problemEnlarged .left .bottom .description > table, -.problemEnlarged .left .bottom .description > ul { - display: block; -} - -.problemEnlarged .left .bottom .image { - position: relative; - display: block; - min-width: 30px; - min-height: 30px; - width: 100%; - flex-shrink: 0; - margin-top: 20px; - border: 1px solid #ccc; -} - -.problemEnlarged .right { - position: relative; - display: none; - flex-grow: 2; - width: calc(100% - 100px); -} - -#wrapperPanel[data-size="large"] .problemEnlarged .right { - display: block; -} - -.problemEnlarged .right > .embedAttachment { - position: relative; - display: block; - width: 100%; - height: 100%; -} - -@media only screen and (max-width: 800px) { - .problemEnlarged { - flex-direction: column; - } - - .problemEnlarged .right { - width: 100%; - height: 50%; - } -} - -.viewLog-container { - position: relative; - display: flex; - flex-direction: row; - width: 100%; - height: 100%; -} - -.viewLog-container .header { - position: relative; - display: inline-flex; - flex-direction: column; - flex-grow: 1; - box-sizing: border-box; - padding-left: 10px; - height: 100%; -} - -.viewLog-container .header::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 10px; - height: 100%; - background-color: #b9b9b9; -} - -.viewLog-container .header .top { - position: relative; - display: flex; - padding: 20px 0 10px; - flex-direction: column; - align-items: center; - flex-grow: 0; -} - -.viewLog-container .header .top .problemIcon { - position: relative; - width: 92px; - height: 92px; - border-radius: 50%; -} - -.viewLog-container .header .top .problemName { - position: relative; - font-family: Nunito; - font-size: 25px; - font-weight: 950; - letter-spacing: .8px; - color: rgb(70, 70, 70); - margin-top: 10px; -} - -.viewLog-container .header .top .point { - position: relative; - font-size: 12px; - color: #ecf0f1; - letter-spacing: 0.4px; - background-color: #27ae60; - padding: 2px 6px; - margin-top: 2px; - border-radius: 4px; -} - -.viewLog-container .header .bottom { - position: relative; - display: flex; - flex-direction: column; - flex-grow: 1; - overflow-x: hidden; - overflow-y: auto; -} - -.viewLog-container .header .bottom .line { - position: relative; - display: flex; - flex-direction: row; - flex-grow: 0; - margin: 10px 0; -} - -.viewLog-container .header .bottom .line .left { - position: relative; - display: flex; - flex-direction: column; - flex-grow: 1; - box-sizing: border-box; - padding: 0 0 0 20px; -} - -.viewLog-container .header .bottom .line .left .row { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - margin: 1px 0; -} - -.viewLog-container .header .bottom .line .left .row::before { - content: "\f111"; - position: relative; - font-family: "Font Awesome 5 Free"; - font-size: 14px; - font-weight: 600; - margin-right: 10px; - width: 20px; - text-align: center; - color: rgba(46, 46, 46, 0.5); -} - -.viewLog-container .header .bottom .line .left .problemInfo { - margin-bottom: 10px; -} - -.viewLog-container .header .bottom .line .left .problemInfo::before { - content: "\f128"; - color: #464646; - font-size: 21px; - margin-right: 20px; -} - -.viewLog-container .header .bottom .line .left .problemInfo .problemid, -.viewLog-container .header .bottom .line .left .problemInfo .language { - position: relative; - font-family: Consolas; - font-weight: bold; - font-size: 18px; - color: #464646; -} - -.viewLog-container .header .bottom .line .left .problemInfo .language { - font-family: Calibri; - font-size: 16px; - margin-left: 20px; -} - -/*? Correct */ - -.viewLog-container .header.correct .bottom .line .left .problemInfo .problemid, -.viewLog-container .header.correct .bottom .line .left .problemInfo .language, -.viewLog-container .header.correct .bottom .line .left .problemInfo::before { - color: #39aa56; -} - -.viewLog-container .header.correct::before { - background-color: #39aa56; -} - -.viewLog-container .header.correct .bottom .line .left .problemInfo::before { - content: "\f00c"; -} - -/*? Passed */ - -.viewLog-container .header.passed .bottom .line .left .problemInfo .problemid, -.viewLog-container .header.passed .bottom .line .left .problemInfo .language, -.viewLog-container .header.passed .bottom .line .left .problemInfo::before { - color: #39aaa1; -} - -.viewLog-container .header.passed::before { - background-color: #39aaa1; -} - -.viewLog-container .header.passed .bottom .line .left .problemInfo::before { - content: "\f129"; -} - -/*? Accepted */ - -.viewLog-container .header.accepted .bottom .line .left .problemInfo .problemid, -.viewLog-container .header.accepted .bottom .line .left .problemInfo .language, -.viewLog-container .header.accepted .bottom .line .left .problemInfo::before { - color: #cfc337; -} - -.viewLog-container .header.accepted::before { - background-color: #edde3f; -} - -.viewLog-container .header.accepted .bottom .line .left .problemInfo::before { - content: "\f12a"; -} - -/*? Failed */ - -.viewLog-container .header.failed .bottom .line .left .problemInfo .problemid, -.viewLog-container .header.failed .bottom .line .left .problemInfo .language, -.viewLog-container .header.failed .bottom .line .left .problemInfo::before { - color: #db4545; -} - -.viewLog-container .header.failed::before { - background-color: #db4545; -} - -.viewLog-container .header.failed .bottom .line .left .problemInfo::before { - content: "\f00d"; -} - -.viewLog-container .header .bottom .line .left .submitTime, -.viewLog-container .header .bottom .line .left .status, -.viewLog-container .header .bottom .line .left .result, -.viewLog-container .header .bottom .line .left .point { - position: relative; - font-family: "Calibri", "Segoe UI"; - font-size: 15px; - color: rgb(56, 56, 56); -} - - -.viewLog-container .header .bottom .line .left .submitTime::before { - content: "\f783"; -} - -.viewLog-container .header .bottom .line .left .submitted::before { - content: "\f093"; -} - -.viewLog-container .header .bottom .line .left .status::before { - content: "\f05a"; -} - -.viewLog-container .header .bottom .line .left .result::before { - content: "\f682"; -} - -.viewLog-container .header .bottom .line .left .point::before { - content: "\f044"; -} - -.viewLog-container .header .bottom .line .left .result b { - display: inline; - padding: 0 4px; -} - -.viewLog-container .header .bottom .line .left .result b.green { - color: #39aa56; -} - -.viewLog-container .header .bottom .line .left .result b.red { - color: #db4545; -} - -.viewLog-container .header .bottom .line .left .point { - font-weight: bold; - font-size: 16px; -} - -.viewLog-container .header .bottom .line .right { - position: relative; - display: inline-flex; - flex-direction: column; - flex-grow: 0; - margin-right: 20px; -} - -.viewLog-container .header .bottom .line .right .submitter { - position: relative; - display: flex; - flex-direction: row-reverse; - align-items: center; - margin-bottom: 20px; -} - -.viewLog-container .header .bottom .line .right .submitter .avatar { - position: relative; - width: 50px; - height: 50px; - border-radius: 50%; - object-fit: cover; -} - -.viewLog-container .header .bottom .line .right .submitter .info { - position: relative; - margin-right: 10px; -} - -.viewLog-container .header .bottom .line .right .submitter .info .tag { - font-family: "Calibri"; - font-size: 11px; - letter-spacing: 0.4px; - color: #546e7a; - font-weight: bold; - text-align: right; -} - -.viewLog-container .header .bottom .line .right .submitter .info .name { - font-family: Nunito; - font-size: 16px; - font-weight: 850; - color: #425161; - text-align: right; -} - -.viewLog-container .header .bottom .line.log { - flex-direction: column; -} - -.viewLog-container .testList { - position: relative; - display: inline-block; - flex-grow: 0; - flex-shrink: 0; - width: 280px; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - background-color: rgb(238, 238, 238); -} - -.viewLog-container .testList:empty::before { - content: "Không tìm thấy test nào cả :("; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - font-family: "Calibri", "Segoe UI"; - font-weight: bold; - font-size: 16px; - color: gray; -} - -.viewLog-container .testList .item { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - box-sizing: border-box; - padding: 10px 10px 10px 16px; - background-color: rgb(245, 245, 245); - counter-increment: testItem; - - transition: background-color 0.2s ease; -} - -.viewLog-container .testList .item:hover { - background-color: rgb(255, 255, 255); -} - -.viewLog-container .testList .item::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 6px; - height: 100%; - background-color: #b9b9b9 -} - -.viewLog-container .testList .item .line { - position: relative; - display: flex; - width: 100%; - flex-direction: row; - align-items: center; - flex-grow: 1; -} - -.viewLog-container .testList .item .line .left { - position: relative; - flex-grow: 1; -} - -.viewLog-container .testList .item .line .left .testid { - position: relative; - font-size: 15px; - font-weight: bold; - color: #464646; -} - -.viewLog-container .testList .item .line .left .testid::before { - content: "#"counter(testItem); - position: relative; - display: inline-block; - font-size: 11px; - width: 25px; -} - -.viewLog-container .testList .item .line .left .status { - position: relative; - font-size: 12px; -} - -.viewLog-container .testList .item .line.detail { - position: relative; - flex-direction: column; - align-items: flex-start; - margin-top: 10px; -} - -.viewLog-container .testList .item .line.detail > t { - display: block; - width: 100%; - font-size: 13px; - white-space: pre-wrap; - color: rgb(80, 80, 80); -} - -.viewLog-container .testList .item .right { - position: relative; - display: inline-flex; - flex-direction: column; - align-items: flex-end; - flex-grow: 0; - flex-shrink: 0; -} - -.viewLog-container .testList .item .right .point { - position: relative; - font-size: 13px; - font-weight: bold; - text-align: right; - color: rgb(78, 78, 78); -} - -.viewLog-container .testList .item .right .runtime { - position: relative; - font-size: 12px; - color: rgb(114, 114, 114); -} - -.viewLog-container .testList .item.passed::before { - background-color: #39aa56; -} - -.viewLog-container .testList .item.passed .line .left .testid { - color: #39aa56; -} - -.viewLog-container .testList .item.accepted::before { - background-color: #edde3f; -} - -.viewLog-container .testList .item.accepted .line .left .testid { - color: #cfc337; -} - -.viewLog-container .testList .item.failed::before { - background-color: #c0392b; -} - -.viewLog-container .testList .item.failed .line .left .testid { - color: #c0392b; -} - - -/* Mobile Responsive */ - -@media only screen and (max-width: 800px) { - #wrapper #wrapp { - width: 100%; - height: 100%; - max-height: unset; - } - - .viewLog-container { - flex-direction: column; - } - - .viewLog-container .header { - height: unset; - } - - .viewLog-container .testList { - width: 100%; - height: unset; - } - - .viewLog-container .testList .item { - padding-left: 20px; - } - - .viewLog-container .testList .item::before { - width: 10px; - } -} - -.cpanel-container, -.publicFiles-container { - position: relative; - display: block; - width: 100%; - height: 100%; - border: unset; - overflow: hidden; -} - -.rateLimitedClock { - display: flex; - flex-direction: row; - align-items: flex-end; - justify-content: center; - font-size: 25px; - font-weight: bold; -} - -.rateLimitedClock > .inner { - font-size: 13px; - margin: 0 0 4px 4px; -} - -.disconnectedRetry { - display: flex; - flex-direction: row; - align-items: flex-end; - justify-content: center; - font-size: 13px; - font-weight: bold; - overflow: hidden; -} - -.disconnectedRetry > .inner { - font-size: 25px; - margin: 0 0 0 4px; - line-height: 24px; -} - -#unsecureProtocolWarning > .right::after { - content: "\f13e"; - color: rgb(185, 5, 50); - font-size: 24px; -} - -footer { - position: relative; - box-sizing: border-box; - width: 100%; - padding: 20px; - display: block; - float: left; -} - -footer .header { - position: relative; - display: block; - padding-top: 10px; - padding-bottom: 16px; -} - -footer .header .logo { - position: relative; - display: block; - margin: auto; - margin-bottom: 12px; - background-image: url("/assets/img/icon.webp"); - background-position: center; - background-size: cover; - border-radius: 50%; - width: 82px; - height: 82px; -} - -footer .header .button { - position: relative; - display: flex; - flex-direction: row; - margin-top: 20px; -} - -footer .header .button button { - flex-grow: 1; - margin: 0 5px; -} - -footer .header > t { - position: relative; - display: block; - text-align: center; - font-family: "Calibri"; - font-weight: normal; - font-size: 13px; - padding-top: 2px; -} - -footer .header > t.title { - font-family: "Nunito"; - font-size: 17px; - font-weight: 750; - text-transform: uppercase; - color: #4d6783; -} - -footer .header > t.version { - font-weight: bold; - color: #3a5068; -} - -footer .header > t.subtitle { - color: rgb(90, 90, 90); -} - -footer .simpleTable { - width: 100%; - max-width: 220px; - margin: auto; - margin-bottom: 10px; -} - -footer .badge { - position: relative; - padding-bottom: 10px; -} - -footer .description { - display: block; - font-weight: lighter; - font-size: 14px; - color: #333333; - padding: 2px 10px; -} - -footer t.contact { - position: relative; - display: block; - padding: 10px 0 0 10px; - font-weight: bold; -} - -footer ul.contact { - position: relative; - box-sizing: border-box; - display: block; - list-style: none; - margin: unset; - padding: unset; -} - -footer ul.contact li { - position: relative; - padding-left: 40px; - padding-bottom: 2px; - color: rgb(0, 0, 0); - font-weight: lighter; - font-size: 14px; -} - -footer ul.contact li t, -footer ul.contact li a { - font-weight: bold; -} - -footer ul.contact li::before { - content: ""; - position: absolute; - display: inline-block; - top: 50%; - transform: translate(calc(-100% - 10px), -50%); - font-family: "Font Awesome 5 Free"; - font-size: 14px; - font-weight: 600; -} - -footer ul.contact li.tel::before { - content: "\f095"; - color: rgb(53, 172, 53); -} - -footer ul.contact li.email::before { - content: "\f0e0"; - color: #2c3e50; -} - -footer ul.contact li.facebook::before { - content: "\f09a"; - font-family: "Font Awesome 5 Brands"; - color: #4267B2; -} - -footer ul.contact li.github::before { - content: "\f092"; - font-family: "Font Awesome 5 Brands"; - color: #2c3e50; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -@media only screen and (max-width: 750px) { - footer .left { - max-width: 100%; - } - - footer ul.contact { - float: left; - max-width: 100%; - } -} - -/* Unset all Transition */ -body.disableTransition * { - transition: unset!important; -} - -/* Element to hide when user is not admin */ - -body.user span#user_profile div.body ul#usett_left_panel li.navlink { - display: none!important; - visibility: hidden!important; -} - -/* Element to hide when user is guest */ - -body.guest #uploadp, -body.guest #logp, -body.guest span#user_profile { - display: none!important; - visibility: hidden!important; +/* +? |-----------------------------------------------------------------------------------------------| +? | /static/css/core.css | +? | | +? | Copyright (c) 2018-2020 Belikhun. All right reserved | +? | Licensed under the MIT License. See LICENSE in the project root for license information. | +? |-----------------------------------------------------------------------------------------------| +*/ + +body { + position: relative; + background-color: #666666; + font-family: "Open Sans", "Segoe UI", "Calibri", Tahoma, Geneva, Verdana, sans-serif; + margin: 0 0 20px; + overflow: hidden; + width: 100vw; + height: 100vh; +} + +/* Change Autocomplete styles in Chrome*/ +input:-webkit-autofill { + background-color: rgba(0, 0, 0, 0); +} + +body #container { + position: absolute; + display: block; + width: 100vw; + top: 56px; + bottom: 0; + background-color: #ebebeb; + box-sizing: border-box; + padding: 5px; + overflow-x: hidden; + overflow-y: auto; + transition: + transform 0.4s ease, + filter 0.4s ease; +} + +body #container .flexRow { + position: relative; + display: flex; + flex-direction: row; + height: 100%; + min-height: 420px; +} + +body #container .flexColumn { + position: relative; + display: flex; + flex-direction: column; +} + +body #container .flexColumn.large { + flex-grow: 1; +} + +body #container .flexColumn.small { + flex-grow: 0; + flex-shrink: 0; +} + +.navBar.showBottom ~ #userSettings, +.navBar.showBottom ~ #container { + top: 94px; +} + +.contestTimer { + display: none; + flex-direction: row; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 4px 0 8px; +} + +.navBar.showBottom .contestTimer { + display: flex; + height: 38px; +} + +.contestTimer::before { + content: ""; + position: absolute; + display: block; + top: 0; + left: 10px; + right: 10px; + height: 1px; + background-color: rgba(122, 122, 122, 0.2); +} + +.contestTimer #contestTimeState { + position: relative; + font-size: 13px; + text-align: center; + text-transform: uppercase; + letter-spacing: .4px; + color: rgb(90, 90, 90); +} + +.contestTimer .reload { + position: relative; + display: inline-block; + font-size: 18px; + font-weight: bold; + cursor: pointer; + color: rgba(98, 98, 98, 0.54); + transition: color 0.2s ease; +} + +.contestTimer #contestTimeState, +.contestTimer .reload, +.contestTimer separator { + margin-top: 4px; +} + +.contestTimer .reload:hover { + color: rgba(98, 98, 98, 0.82); +} + +.contestTimer .progressBar { + position: absolute; + bottom: 0; + width: 100%; + margin-top: 28px; + height: 4px; +} + +.contestTimer .progressBar > .left, +.contestTimer .progressBar > .right { + transform: translateY(calc(-100% - 4px)); +} + +.contestTimer .progressBar > .left { + left: 10px; +} + +.contestTimer .progressBar > .right { + right: 10px; +} + +@media only screen and (max-width: 800px) { + .navBar.showBottom .contestTimer #contestTimeState, + .navBar.showBottom .contestTimer #contestTimeState + separator { + display: none; + } +} + +panel { + position: relative; + display: flex; + flex-direction: column; + width: 350px; + height: auto; + background-color: white; + box-shadow: 0 0 5px rgba(98, 98, 98, 0.2); + margin: 5px; + box-sizing: border-box; +} + +panel .head { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 40px; + padding: 10px 10px 10px 20px; + box-sizing: border-box; + background-color: rgb(238, 240, 243); + border-bottom: 1px solid #e6e6e6; +} + +panel .head .le { + position: relative; + display: inline-block; + flex: 1 1 0; + + font-family: Calibri; + font-size: 16px; + font-weight: bold; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: rgba(56, 56, 56, 0.8); +} + +panel .head .ri { + position: relative; + display: flex; + align-items: center; + flex: 0 0 0; +} + +panel .head .ri > i { + position: relative; + display: inline; + font-size: 18px; + font-weight: bold; + color: rgba(98, 98, 98, 0.54); + padding: 0 2px; + cursor: pointer; + transition: color 0.2s ease; +} + +panel .head .ri > i.bak { + font-size: 20px; +} + +panel .head .ri > i:hover { + color: rgba(98, 98, 98, 0.82); +} + +panel .main { + position: relative; + display: inline-block; + width: 100%; + height: calc(100% - 40px); + margin: unset; + padding: unset; + overflow: auto; + box-sizing: border-box; + background-color: #fafafa; +} + +panel .main:empty::before, +panel .main .showEmpty:empty::before { + content: "\f51b"; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, calc(-50% - 22px)); + font-family: "Font Awesome 5 Free"; + font-weight: 900; + font-size: 72px; + color: rgb(192, 192, 192); +} + +panel .main:empty::after, +panel .main .showEmpty:empty::after { + content: "Không có dữ liệu"; + position: absolute; + display: block; + top: 50%; + left: 50%; + transform: translate(-50%, calc(-50% + 38px)); + font-weight: 600; + font-size: 14px; + text-align: center; + color: rgb(192, 192, 192); +} + +/** Panel Layout: Logged in */ + +#problemp { + flex-grow: 1; + width: auto; + height: calc(100% - 10px); +} + +#uploadp { + height: 190px; +} + +#logp { + flex-grow: 1; + height: calc(100% - 220px); +} + +#rankp { + flex-grow: 1; +} + +@media only screen and (max-width: 1130px) { + body #container .flexRow { + flex-wrap: wrap; + height: auto; + } + + body #container .flexRow:first-child { + min-height: 100%; + } + + body #container .flexRow:first-child > .flexColumn.large { + min-height: calc(100vh - 90px); + } + + body #container .flexRow:last-child { + height: 100%; + } + + body #container .flexRow:last-child > #rankp { + max-height: calc(100% - 10px); + } + + body #container .flexColumn { + width: 100%; + } + + #uploadp, + #logp { + width: auto; + } + + #logp { + height: auto; + max-height: calc(100vh - 90px); + } +} + +/** Panel Layout: Guest mode */ + +body.guest #container { + display: flex; + flex-direction: column; +} + +body.guest #container > .flexRow:nth-child(1) { + order: 2; + flex-grow: 0; + min-height: 100%; +} + +body.guest #container > .flexRow:nth-child(2) { + order: 1; + min-height: 100%; +} + +body.guest #problemp { + height: 200px; + flex-grow: 1; +} + +body.guest #problemp.hide { + display: none; +} + +#wrapper { + position: fixed; + display: none; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 60px 0 20px; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 2; +} + +#wrapper.show { + display: flex; +} + +#wrapper #wrapperPanel { + position: relative; + width: calc(100% - 100px); + height: calc(100% - 20px); + max-width: 1000px; + max-height: 640px; + margin: unset; +} + +#wrapper #wrapperPanel[data-size="small"] { + width: calc(100% - 300px); + max-width: 720px; + min-width: 420px; + margin: unset; +} + +#wrapper #wrapperPanel[data-size="large"] { + width: calc(100% - 80px); + max-width: unset; + max-height: 100%; + margin: unset; +} + +#logp div.main:empty::before { + content: "\f564"; +} + +#logp .logItemContainer { + position: relative; +} + +#logp .logItemContainer .logItem { + position: relative; + box-sizing: border-box; + width: calc(100% - 25px); + height: 48px; + margin-left: 25px; + padding-right: 25px; +} + +#logp .logItemContainer .logItem .h { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 100%; + box-sizing: border-box; + border-bottom: 1px solid #e6e6e6; +} + +#logp .logItemContainer .logItem .h .l { + position: relative; + display: inline-block; + flex-grow: 1; + overflow: hidden; +} + +#logp .logItemContainer .logItem .h .l .t { + font-size: 10px; + font-weight: normal; + color: rgba(59, 71, 82, 0.7); +} + +#logp .logItemContainer .logItem .h .l .n { + font-size: 13px; + font-weight: bold; + color: #585858; +} + +#logp .logItemContainer .logItem.scored .h .l .n { + color: #1124c8; +} + +#logp .logItemContainer .logItem.correct .h .l .n { + color: #39aa56; +} + +#logp .logItemContainer .logItem.passed .h .l .n { + color: #0ca3be; +} + +#logp .logItemContainer .logItem.accepted .h .l .n { + color: #b9ab14; +} + +#logp .logItemContainer .logItem.failed .h .l .n { + color: #db4545; +} + +#logp .logItemContainer .logItem .h .r { + position: relative; + display: flex; + flex-grow: 0; + flex-direction: column; + align-items: flex-end; + justify-content: center; + margin-right: 10px; +} + +#logp .logItemContainer .logItem .h .r t { + color: rgba(98, 98, 98, 0.7); + font-size: 11px; + letter-spacing: 0.01em; +} + +#logp .logItemContainer .logItem .h .r .s { + font-weight: bold; + color: rgba(82, 82, 82, 0.7); + font-size: 11px; +} + +#logp .logItemContainer .logItem .d { + position: absolute; + right: 0; + top: 0; + width: 25px; + height: 100%; + cursor: pointer; + background-color: #f8f8f8; + color: #c0c0c0; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} + +#logp .logItemContainer .logItem .d:not(.link) { + cursor: not-allowed; +} + +#logp .logItemContainer .logItem .d::before { + content: "open_in_browser"; + font-family: "Material Icons"; + font-weight: lighter; + font-size: 16px; +} + +#logp .logItemContainer .logItem .d:hover { + background-color: #f1f1f1; + color: #6e6e6e; +} + +#logp .logItemContainer .logItem.queue .h .l .n { + color: #8710cc; +} + +#logp .logItemContainer .logItem.queue .d::before { + content: "\f2f1"; + font-family: "Font Awesome 5 Free"; + animation: spin 1s linear 0s infinite forwards; + font-weight: 600; + font-size: 12px; +} + +#logp .logItemContainer .logItem.judging .h .l .n { + color: #c811c8; +} + +#logp .logItemContainer .logItem.judging .d::before { + content: "\f0e3"; + font-family: "Font Awesome 5 Free"; + animation: spin 1s linear 0s infinite forwards; + font-weight: 600; + font-size: 12px; +} + +#logp .logItemContainer .logItem.queue .d, +#logp .logItemContainer .logItem.judging .d { + cursor: default; +} + +#uploadp .fileupload-container { + overflow: hidden; +} + +#uploadp .fileupload-container #submitDropzone { + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 20px; + padding: 10px; + box-sizing: border-box; + top: 0; + left: 0; + bottom: 0; + right: 0; + border: 2px dotted #ccc; + border-radius: 4px; + opacity: 1; + z-index: 1; + transition: all 0.4s ease; + transition-property: color, background-color, opacity; +} + +#uploadp .fileupload-container #submitDropzone.drag { + background-color: #ccc; + color: white; +} + +#uploadp .fileupload-container #submitDropzone.hide { + opacity: 0; +} + +#uploadp .fileupload-container #submitDropzone.hide+.info { + opacity: 1; +} + +#uploadp .fileupload-container #submitDropzone #submitInput { + display: none; +} + +#uploadp .fileupload-container #submitDropzone .title { + color: rgb(104, 104, 104); + font-size: 16px; + font-weight: bold; + text-transform: uppercase; +} + +#uploadp .fileupload-container #submitDropzone .sub { + color: rgb(128, 128, 128); + font-size: 12px; + margin: 4px 0; +} + +#uploadp .fileupload-container .info { + position: absolute; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 20px; + transition: all 0.4s ease; + opacity: 0; +} + +#uploadp .fileupload-container .info #submitStatus { + position: relative; + display: block; + padding-bottom: 2px; + box-sizing: border-box; + width: 100%; + font-size: 20px; + font-weight: 100; + text-align: center; + text-transform: uppercase; + color: rgb(136, 136, 136); +} + +#uploadp .fileupload-container .info #submitFileName { + position: relative; + display: block; + width: 100%; + font-size: 13px; + font-weight: 500; + text-align: center; + color: rgb(93, 93, 93); +} + +#uploadp .fileupload-container .info .progressBar { + position: absolute; + bottom: 24px; + left: 50%; + width: 90%; + transform: translateX(-50%); +} + +.problemSettings { + padding: unset; + height: 220px; +} + +.problemSettings .header { + height: 40px; + background-color: #F5F5F6; + display: flex; + align-items: center; + padding: 0 10px; +} + +.problemSettings .header div span { + padding: 0 3px; + cursor: pointer; +} + +.problemSettings .header div span::before { + font-family: "Font Awesome 5 Free"; + font-size: 14px; + font-weight: 600; + color: rgba(98, 98, 98, 0.54); + transition: color 0.2s ease; +} + +.problemSettings .header div span:hover::before { + color: rgba(98, 98, 98, 0.82) +} + +.problemSettings .header .left .back::before { + content: "\f104"; +} + +.problemSettings .header .right .add::before { + content: "\f067"; + font-size: 12px; +} + +.problemSettings .header .right .check::before { + content: "\f00c"; + font-size: 12px; +} + +.problemSettings .header .title { + position: absolute; + left: 50%; + color: #a5a5a5; + transform: translateX(-50%); +} + +.problemSettings .header .right { + position: absolute; + right: 10px; +} + +.problemSettings .problemsContainer { + position: relative; + height: calc(100% - 46px); + background-color: transparent; + overflow: hidden; +} + +.problemSettings .problemsContainer .problemsList { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + margin: unset; + padding: unset; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + transition: all 0.4s ease; +} + +.problemSettings .problemsContainer .problemsList li.item { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 64px; + box-sizing: border-box; + padding: 0 10px; + border-bottom: unset; +} + +.problemSettings .problemsContainer .problemsList li.item:hover { + background-color: rgba(245, 245, 246, 0.4); +} + +.problemSettings .problemsContainer .problemsList li.item:after { + content: unset; +} + +.problemSettings .problemsContainer .problemsList li.item .icon { + position: relative; + flex-grow: 0; + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; +} + +.problemSettings .problemsContainer .problemsList li.item .title { + position: relative; + flex-grow: 1; + flex-shrink: 1; + list-style: none; + margin: unset; + padding: 0 0 0 10px; +} + +.problemSettings .problemsContainer .problemsList li.item .title .id { + font-size: 11px; + color: rgba(73, 73, 73, 0.6); + letter-spacing: 0.4px; +} + +.problemSettings .problemsContainer .problemsList li.item .title .name { + font-size: 14px; + color: #494949; +} + +.problemSettings .problemsContainer .problemsList li.item .action { + position: relative; + display: block; + flex-grow: 0; + flex-shrink: 0; +} + +.problemSettings .problemsContainer .problemsList li.item .action span { + padding: 0 4px; + cursor: pointer; +} + +.problemSettings .problemsContainer .problemsList li.item .action span::before { + font-family: "Font Awesome 5 Free"; + font-size: 16px; + font-weight: 600; + color: #95a5a6; + transition: color 0.1s ease; +} + +.problemSettings .problemsContainer .problemsList li.item .action span.delete::before { + content: "\f1f8"; +} + +.problemSettings .problemsContainer .problemsList li.item .action span.delete:hover::before { + color: #e74c3c; +} + +.problemSettings .problemsContainer .problemsList li.item .action span.edit::before { + content: "\f304"; +} + +.problemSettings .problemsContainer .problemsList li.item .action span.edit:hover::before { + color: #3498db; +} + +.problemSettings .problemsContainer .problemsList.hide { + transform: translateX(-100%); +} + +.problemSettings .problemsContainer .problem { + position: absolute; + width: 100%; + height: 100%; + top: 0; + right: 0; + overflow: auto; + padding: 0 10px; + box-sizing: border-box; + transform: translateX(100%); + transition: all 0.4s ease; +} + +.problemSettings .problemsContainer .problemsList.hide + .problem { + transform: unset; +} + +.problemSettings .problemsContainer .problem #problemEdit_desc { + resize: none; + height: 160px; +} + +.problemSettings .problemsContainer .problem #problemEdit_deleteImage, +.problemSettings .problemsContainer .problem #problemEdit_deleteAttachment { + width: 100%; + margin-top: 8px; +} + +.problemSettings .problemsContainer .problem .test-container { + position: relative; + margin-bottom: 20px; + border-bottom: 1px solid rgba(39, 39, 39, 0.4); + padding-bottom: 1px; + transition: 0.3s; +} + +.problemSettings .problemsContainer .problem .test-container:hover { + border-bottom: 2px solid #4285f4; + padding-bottom: 0; +} + +.problemSettings .problemsContainer .problem .test-container .test { + display: block; + font-size: 8px; + font-weight: 700; + color: #8b8b8b; + text-transform: uppercase; + margin: 12px 0; + transition: 0.3s; +} + +.problemSettings .problemsContainer .problem .test-container:hover .test { + color: #4285f4; +} + +.problemSettings .problemsContainer .problem .test-container .test-list { + position: relative; + width: 100%; + box-sizing: border-box; + display: block; +} + +.problemSettings .problemsContainer .problem .test-container .test-list .cell { + position: relative; + height: 60px; +} + +.problemSettings .problemsContainer .problem .test-container .test-list .cell textarea { + position: relative; + resize: none; + border: unset; + background-color: transparent; + box-sizing: border-box; + width: calc(50% - 15px); + height: 100%; + font-family: "Consolas"; + border-bottom: 1px solid rgba(39, 39, 39, 0.4); +} + +.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete { + position: absolute; + display: block; + right: 0; + top: 0; + width: 24px; + height: 100%; + cursor: pointer; + transition: 0.2s; +} + +.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete:hover { + background-color: rgba(202, 202, 202, 0.2); +} + +.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete::before { + content: "\f2ed"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: "Font Awesome 5 Free"; + font-size: 14px; + font-weight: 600; + color: #95a5a6; + transition: 0.2s; +} + +.problemSettings .problemsContainer .problem .test-container .test-list .cell .delete:hover::before { + color: #e74c3c; +} + +.problemSettings .problemsContainer .problem .test-container .test-add { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 60px; + cursor: pointer; + transition: 0.2s; +} + +.problemSettings .problemsContainer .problem .test-container .test-add:hover { + background-color: rgba(202, 202, 202, 0.2); +} + +.problemSettings .problemsContainer .problem .test-container .test-add::after { + content: "\f067"; + font-family: "Font Awesome 5 Free"; + font-size: 18px; + font-weight: 600; + color: #95a5a6; + transition: 0.2s; +} + +.problemSettings .problemsContainer .problem .test-container .test-add:hover::after { + color: #494949; +} + +.problemSettings .problemsContainer .problem button[type="submit"] { + display: none; +} + +#userSettings #usett_panelContainer .panel .container .syslogs-settings { + position: relative; + display: flex; + flex-direction: column; +} + +.syslogs-settings .logsContainer { + position: relative; + flex-grow: 1; + overflow-x: hidden; + overflow-y: auto; +} + +.syslogs-settings .logsContainer .log { + position: relative; + display: flex; + flex-direction: row; + background-color: rgba(224, 224, 224, 0.8); + counter-increment: log-item; + cursor: pointer; + + transition: background-color 0.3s ease; +} + +.syslogs-settings .logsContainer .log:hover { + background-color: rgba(232, 232, 232, 0.8); +} + +.syslogs-settings .logsContainer .log .level { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + flex-grow: 0; + color: rgb(82, 82, 82); + background-color: rgb(236, 236, 236); + min-width: 100px; + padding: 0 10px 0 40px; + font-size: 14px; + font-weight: bold; + box-sizing: border-box; + overflow: hidden; + transition: all 0.3s ease; + transition-property: padding, background-color; +} + +.syslogs-settings .logsContainer .log.enlarge .level { + padding: 0 20px; + background-color: rgb(242, 242, 242); +} + +.syslogs-settings .logsContainer .log .level > i { + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + font-weight: bold; + font-size: 10px; + font-style: normal; + + transition: all 0.3s ease; +} + +.syslogs-settings .logsContainer .log.enlarge .level > i { + left: 50%; + transform: translate(-50%, calc(-50% + 22px)); +} + +.syslogs-settings .logsContainer .log .detail { + position: relative; + display: inline-block; + width: 100%; + overflow-x: auto; + overflow-y: hidden; + padding: 10px 40px 10px 20px; + box-sizing: border-box; + flex-grow: 2; + border-left: 2px solid rgb(165, 165, 165); +} + +.syslogs-settings .logsContainer .log .detail::before { + content: "\f107"; + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + display: inline-block; + + font-family: "Font Awesome 5 Free"; + font-size: 14px; + font-weight: 900; + color: rgb(104, 104, 104); + + transition: transform 0.3s ease; +} + +.syslogs-settings .logsContainer .log.enlarge .detail::before { + transform: translateY(-50%) rotate(180deg); +} + +.syslogs-settings .logsContainer .log .detail .text { + position: relative; + display: block; + font-family: "Consolas", "Calibri", "Segoe UI"; + font-size: 15px; + font-weight: normal; + color: rgb(56, 56, 56); +} + +.syslogs-settings .logsContainer .log .detail .info { + position: relative; + display: block; + width: 100%; + height: 0; + box-sizing: border-box; + + overflow-x: auto; + overflow-y: hidden; + + transition: height 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.syslogs-settings .logsContainer .log .detail .info::before { + content: ""; + position: relative; + display: block; + width: 100%; + height: 8px; +} + +.syslogs-settings .logsContainer .log.enlarge .detail .info { + height: 54px; +} + +.syslogs-settings .logsContainer .log .detail .info t { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + + font-family: "Calibri", "Segoe UI"; + font-size: 13px; + color: rgb(90, 90, 90); +} + +.syslogs-settings .logsContainer .log .detail .info t::before { + content: "\f111"; + position: relative; + display: inline-block; + padding-right: 6px; + + font-family: "Font Awesome 5 Free"; + font-size: 13px; + font-weight: 900; +} + +.syslogs-settings .logsContainer .log .detail .info .client { + font-weight: bold; +} + +.syslogs-settings .logsContainer .log .detail .info .client::before { + content: "\f2bd"; +} + +.syslogs-settings .logsContainer .log .detail .info .timestamp::before { + content: "\f017"; +} + +.syslogs-settings .logsContainer .log .detail .info .module::before { + content: "\f466"; +} + +.syslogs-settings .logsContainer .log.okay .detail { + border-left-color: rgb(124, 194, 129); +} + +.syslogs-settings .logsContainer .log.okay .level { + color: rgb(28, 172, 38); +} + +.syslogs-settings .logsContainer .log.warn .detail { + border-left-color: rgb(190, 184, 92); +} + +.syslogs-settings .logsContainer .log.warn .level { + color: rgb(163, 155, 46); +} + +.syslogs-settings .logsContainer .log.errr .detail { + border-left-color: rgb(223, 150, 150); +} + +.syslogs-settings .logsContainer .log.errr .level { + color: rgb(233, 67, 67); +} + +.syslogs-settings .logsContainer .log.verb .detail { + border-left-color: rgb(191, 149, 211); +} + +.syslogs-settings .logsContainer .log.verb .level { + color: rgb(148, 15, 209); +} + +.syslogs-settings .navigation { + position: relative; + display: flex; + align-items: center; + flex-grow: 0; + flex-direction: row; + width: 100%; + padding: 10px; + box-sizing: border-box; + background-color: rgb(242, 242, 242); +} + +.syslogs-settings .navigation .left, +.syslogs-settings .navigation .right { + position: relative; + flex: 1 0 0; + font-size: 11px; +} + +.syslogs-settings .navigation .right { + text-align: right; +} + +.syslogs-settings .navigation .middle { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-grow: 2; +} + +.syslogs-settings .navigation .middle .icon { + position: relative; + display: inline-block; + cursor: pointer; + padding: 0 18px; +} + +.syslogs-settings .navigation .middle .icon::before { + content: "\f111"; + position: relative; + display: inline-block; + + font-family: "Font Awesome 5 Free"; + font-size: 22px; + font-weight: 900; + color: rgb(158, 158, 158); + transition: color 0.2s ease; +} + +.syslogs-settings .navigation .middle .icon:hover::before { + color: #f368e0; +} + +.syslogs-settings .navigation .middle .buttonLeft::before { + content: "\f104"; +} + +.syslogs-settings .navigation .middle .buttonRight::before { + content: "\f105"; +} + +.syslogs-settings .navigation .middle .currentPage { + position: relative; + font-size: 13px; + font-weight: bold; + line-height: 18px; +} + + +#problemp .problemsContainer { + overflow: hidden; +} + +#problemp .problemsContainer .problemsList:empty::before { + content: "\f51b"; +} + +#problemp .problemsContainer .problemsList:empty::after { + content: "Không tìm thấy đề hoặc chưa bắt đầu kì thi"; +} + +#problemp .problemsContainer .problemsList { + position: relative; + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: stretch; + width: 100%; + max-height: 100%; + box-sizing: border-box; + padding: 10px; + overflow: auto; + + animation: problemsListShow 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; +} + +#problemp .problemsContainer .problemsList:empty { + height: 100%; +} + +#problemp .problemsContainer .problemsList .item { + position: relative; + display: flex; + flex-grow: 0; + flex-shrink: 0; + flex-direction: row; + align-items: center; + box-sizing: border-box; + cursor: pointer; + margin: 10px; + padding: 10px 40px 10px 20px; + border-radius: 12px; + background-color: rgba(238, 238, 238, 0.6); +} + +#problemp .problemsContainer .problemsList .item:hover { + background-color: rgba(124, 124, 124, 0.1); +} + +#problemp .problemsContainer .problemsList .item:after { + content: "\f105"; + position: absolute; + font-family: "Font Awesome 5 Free"; + font-size: 18px; + font-weight: 600; + color: #95a5a6; + right: 20px; +} + +#problemp .problemsContainer .problemsList .item .icon { + position: relative; + display: inline-block; + flex: 0 0 1; + width: 50px; + height: 50px; + border-radius: 25px; + object-fit: cover; +} + +#problemp .problemsContainer .problemsList .item .title { + display: inline-block; + flex: 1 1 0; + list-style: none; + margin: unset; + padding: 0 0 0 10px; +} + +#problemp .problemsContainer .problemsList .item .title .name { + position: relative; + font-family: Nunito; + font-size: 16px; + font-weight: 800; + color: #494949; +} + +#problemp .problemsContainer .problemsList .item .title .point { + position: relative; + display: inline-block; + font-size: 11px; + color: #ecf0f1; + letter-spacing: 0.4px; + background-color: #27ae60; + padding: 2px 6px; + margin-top: 2px; + border-radius: 4px; +} + +#problemp .problemsContainer .problemsList .item[disabled="true"] { + background-color: rgba(243, 184, 205, 0.6); +} + +#problemp .problemsContainer .problem { + position: absolute; + width: 100%; + height: 100%; + top: 0; + right: 0; + box-sizing: border-box; + padding: 10px; + overflow-x: hidden; + overflow-y: auto; + background-color: inherit; + + animation: problemViewerHide 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; +} + +@keyframes problemsListShow { + 0% { + visibility: hidden; + } + + 1% { + visibility: visible; + transform: scale(.9); + filter: blur(6px) brightness(.9); + opacity: 0; + } + + 100% { + visibility: visible; + transform: scale(1); + filter: blur(0) brightness(1); + opacity: 1; + } +} + +@keyframes problemsListHide { + 0% { + transform: scale(1); + filter: blur(0) brightness(1); + opacity: 1; + } + + 99% { + transform: scale(.9); + filter: blur(6px) brightness(.9); + opacity: 0; + } + + 100% { + visibility: hidden; + } +} + +@keyframes problemViewerShow { + 0% { + visibility: hidden; + transform: translateX(100%); + } + + 1% { + visibility: visible; + transform: scale(1.1); + filter: brightness(.9); + opacity: 0; + } + + 100% { + visibility: visible; + transform: scale(1); + filter: brightness(1); + opacity: 1; + } +} + +@keyframes problemViewerHide { + 0% { + transform: scale(1); + filter: brightness(1); + opacity: 1; + } + + 99% { + transform: scale(1.1); + filter: brightness(.9); + opacity: 0; + } + + 100% { + visibility: hidden; + transform: translateX(100%); + } +} + +#problemp .problemsContainer .problemsList.hide { + animation: problemsListHide 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; +} + +#problemp .problemsContainer .problemsList.hide + .problem { + animation: problemViewerShow 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards; +} + +#problemp .problemsContainer .problem .name { + display: block; + text-align: center; + font-family: Nunito; + font-size: 19px; + font-weight: 900; + letter-spacing: .8px; + color: #34495e; +} + +#problemp .problemsContainer .problem .point { + display: block; + text-align: center; + font-size: 12px; + font-weight: bold; + color: #287548; + letter-spacing: 0.4px; +} + +#problemp .problemsContainer .problem .enlarge, +#problemp .problemsContainer .problem .close { + position: absolute; + display: block; + top: 20px; + right: 50px; +} + +#problemp .problemsContainer .problem .enlarge::before, +#problemp .problemsContainer .problem .close::before { + content: "\f360"; + position: relative; + font-family: "Font Awesome 5 Free"; + font-size: 22px; + font-weight: 600; + cursor: pointer; + color: rgb(92, 92, 92); +} + +#problemp .problemsContainer .problem .close { + right: 20px; +} + +#problemp .problemsContainer .problem .close::before { + content: "\f00d"; +} + +#problemp .problemsContainer .problem .info { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 6px 0 20px; +} + +#problemp .problemsContainer .problem .info .filename::before { + content: "ID: "; +} + +#problemp .problemsContainer .problem .info.general { + margin-bottom: 4px; +} + +#problemp .problemsContainer .problem .info.IO > t { + font-family: "Consolas"; + font-weight: bold; + font-size: 16px; +} + +#problemp .problemsContainer .problem .info.IO .input::before, +#problemp .problemsContainer .problem .info.IO .output::before { + position: relative; + display: inline-block; + font-family: "Open Sans"; + font-weight: normal; + font-size: 13px; + margin-right: 6px; +} + +#problemp .problemsContainer .problem .info.IO .input::before { + content: "Input:"; +} + +#problemp .problemsContainer .problem .info.IO .output::before { + content: "Output:"; +} + +#problemp .problemsContainer .problem .description { + white-space: pre-wrap; + margin: 0 20px; +} + +#problemp .problemsContainer .problem .description > a, +#problemp .problemsContainer .problem .description > table, +#problemp .problemsContainer .problem .description > ul { + display: block; +} + +#problemp .problemsContainer .problem table tr:hover { + background-color: rgba(126, 126, 126, 0.1); +} + +#problemp .problemsContainer .problem table.test tr td { + font-family: "Consolas"; +} + +#problemp .problemsContainer .problem .image { + position: relative; + width: 100%; + margin: 10px 0; + border: 1px solid #ccc; +} + +#problemp .problemsContainer .problem .attachment { + position: relative; + display: block; + margin-top: 10px; +} + +#problemp .problemsContainer .problem .attachment .link { + position: relative; + display: block; + font-size: 14px; +} + +#problemp .problemsContainer .problem .attachment .link::before { + content: "Tệp đính kèm:"; + position: relative; + display: inline-block; + font-family: "Calibri"; + font-size: 13px; + font-weight: bold; + user-select: none; + margin-right: 4px; + color: rgb(124, 124, 124); +} + +#problemp .problemsContainer .problem .attachment .embed { + width: 100%; + height: 0; + min-height: 80px; + max-height: calc(100vh - 160px); + margin: 10px 0 20px; + transition: height 0.4s ease-in; +} + +/* *rankingContainer */ + +#rankp div.rankingContainer { + position: relative; + overflow: auto; +} + +#rankp div.rankingContainer:empty::before { + content: "\f02d"; +} + +#rankp div.rankingContainer:empty::after { + content: "Không có dữ liệu hoặc đã bị tắt"; +} + +#rankp div.rankingContainer table { + position: relative; + font-family: "Calibri"; + box-sizing: border-box; + border-spacing: 0; + padding: 10px; + min-width: 100%; +} + +#rankp div.rankingContainer table tr th:nth-child(1), +#rankp div.rankingContainer table tr td:nth-child(1) { + width: 20px; + text-align: center; +} + +#rankp div.rankingContainer table tr th:nth-child(2), +#rankp div.rankingContainer table tr td:nth-child(2) { + text-align: left; +} + +#rankp div.rankingContainer table tr th:nth-child(2) { + width: 40px; +} + +#rankp div.rankingContainer table tr td:nth-child(2) { + display: flex; + align-items: center; + padding: 10px; + margin: 0 0 0 10px; +} + +#rankp div.rankingContainer table tr td:nth-child(2) .avt { + position: relative; + display: block; + width: 40px; + height: 40px; + border-radius: 50%; +} + +#rankp div.rankingContainer table tr td:nth-child(3) .username { + font-family: "Open Sans"; + font-size: 11px; + font-style: italic; + color: rgb(114, 114, 114); + letter-spacing: .2px; +} + +#rankp div.rankingContainer table tr td:nth-child(3) .name { + font-size: 15px; + letter-spacing: .2px; +} + +#rankp div.rankingContainer table tr td.number:nth-child(4) { + color: #3c7be7; + font-size: 16px; + font-weight: bold; +} + +#rankp div.rankingContainer table thead tr th:nth-child(3) { + text-align: left; +} + +#rankp div.rankingContainer table tbody tr[data-rank="1"] { + background-color: rgba(111, 241, 134, 0.2); +} + +#rankp div.rankingContainer table tbody tr[data-rank="2"] { + background-color: rgba(239, 241, 111, 0.2); +} + +#rankp div.rankingContainer table tbody tr[data-rank="3"] { + background-color: rgba(230, 111, 241, 0.2); +} + +#rankp div.rankingContainer table tbody tr[data-rank="1"] td:nth-child(3) .name, +#rankp div.rankingContainer table tbody tr[data-rank="2"] td:nth-child(3) .name, +#rankp div.rankingContainer table tbody tr[data-rank="3"] td:nth-child(3) .name { + font-family: Nunito; + font-size: 16px; + font-weight: 850; + letter-spacing: .4px; + color: rgb(65, 65, 65); +} + +#rankp div.rankingContainer table tr th { + position: sticky; + top: 0; + background-color: #fafafa; + border-bottom: 1px solid #9b9b9b; + color: rgb(82, 82, 82); + font-family: Segoe UI; + font-size: 13px; + font-weight: bold; + z-index: 1; +} + +#rankp div.rankingContainer table tr th.problem > t { + display: inline-block; + color: rgb(82, 82, 82); + font-family: Segoe UI; + font-size: 13px; + font-weight: bold; +} + +#rankp div.rankingContainer table tr th.problem > .toggler { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + padding: 0 4px; + cursor: pointer; + + transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +#rankp div.rankingContainer table tr th.problem > .toggler::after { + content: "\f104"; + position: relative; + display: block; + font-family: "Font Awesome 5 Free"; + font-size: 18px; + font-weight: 900; + transform: translateY(2px); +} + +#rankp div.rankingContainer table tr th.problem[data-folding="true"] { + width: 10px; + padding: unset; +} + +#rankp div.rankingContainer table tr th.problem[data-folding="true"] > t { + display: none; +} + +#rankp div.rankingContainer table tr th.problem[data-folding="true"] > .toggler { + transform: rotate(180deg); +} + +#rankp div.rankingContainer table tr th.problem[data-folding="true"] > .toggler::after { + transform: unset; +} + +#rankp div.rankingContainer table tr th, +#rankp div.rankingContainer table tr td { + padding: 10px 12px; +} + +#rankp div.rankingContainer table tr td { + font-size: 13px; +} + +#rankp div.rankingContainer table tr td.number { + font-size: 13px; + text-align: right; + color: rgb(172, 172, 172); +} + +#rankp div.rankingContainer table tr td.number[data-folding="true"] { + font-size: 0; + padding: unset; +} + +#rankp div.rankingContainer table tr td.number.link { + cursor: pointer; +} + +#rankp div.rankingContainer table tr .number.link, +#rankp div.rankingContainer table tr .number.correct, +#rankp div.rankingContainer table tr .number.passed, +#rankp div.rankingContainer table tr .number.accepted, +#rankp div.rankingContainer table tr .number.failed, +#rankp div.rankingContainer table tr .number.skipped { + color: rgb(75, 75, 75); +} + +#rankp div.rankingContainer table tr td.number.correct { + background-color: rgb(147, 243, 158); +} + +#rankp div.rankingContainer table tr td.number.passed { + background-color: rgb(150, 245, 248); +} + +#rankp div.rankingContainer table tr td.number.accepted { + background-color: rgb(240, 237, 157); +} + +#rankp div.rankingContainer table tr td.number.failed { + background-color: rgb(248, 187, 187) +} + +#rankp div.rankingContainer table tr td.number.skipped { + background-color: rgb(212, 212, 212); +} + +#rankp div.rankingContainer table tr td.number.link:hover { + filter: brightness(1.1); +} + +#wrapper #wrapp .main .full { + display: block; + margin: auto; +} + +.problemEnlarged { + position: relative; + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; +} + +.problemEnlarged .left { + position: relative; + display: flex; + flex-grow: 1; + flex-shrink: 1; + flex-direction: column; + height: 100%; + overflow-x: hidden; + overflow-y: auto; +} + +.problemEnlarged .left .top { + position: relative; + display: flex; + flex-direction: column; + flex-shrink: 0; + align-items: center; + width: 100%; + padding: 20px 0; + box-sizing: border-box; + overflow-x: hidden; + overflow-y: auto; +} + +.problemEnlarged .left .top .group { + position: relative; + display: flex; + flex-direction: row; + width: 100%; + align-items: center; + justify-content: center; +} + +.problemEnlarged .left .top .group .col { + position: relative; + display: flex; + flex: 1 1 0; + flex-direction: column; + padding: 0 20px; + align-items: center; +} + +.problemEnlarged .left .top .group .col .name { + font-size: 26px; + font-weight: bold; + text-align: center; + color: #34495e; +} + +.problemEnlarged .left .top .group .col .point { + font-size: 12px; + color: #ecf0f1; + letter-spacing: 0.4px; + background-color: #1f8d4d; + padding: 2px 6px; + margin: 2px 0 10px; + border-radius: 4px; +} + +.problemEnlarged .left .top .attachment { + position: relative; + display: flex; + flex-direction: row; + align-items: flex-end; + width: 100%; + box-sizing: border-box; + padding: 10px 20px; +} + +.problemEnlarged .left .top .attachment::before { + content: "Tệp đính kèm:"; + position: relative; + display: inline-block; + font-family: "Calibri"; + font-size: 13px; + font-weight: bold; + padding-right: 6px; + color: rgb(124, 124, 124); +} + +.problemEnlarged .left .top .attachment .link { + font-size: 14px; +} + +.problemEnlarged .left .top .simpleTableWrapper .simpleTable { + width: 100%; +} + +.problemEnlarged .left .bottom { + position: relative; + display: flex; + flex-grow: 1; + flex-direction: column; + align-items: center; + padding: 20px; + box-sizing: border-box; + background-color: rgb(238, 238, 238); +} + +.problemEnlarged .left .bottom .simpleTableWrapper { + position: relative; + display: block; + width: auto; + max-width: 100%; + margin-top: 20px; +} + +.problemEnlarged .left .bottom .simpleTableWrapper .simpleTable.test tr td { + font-family: "Consolas"; + white-space: pre; +} + +.problemEnlarged .left .bottom .description { + position: relative; + width: 100%; + box-sizing: border-box; + white-space: pre-wrap; + line-height: 1.4em; +} + +.problemEnlarged .left .bottom .description > a, +.problemEnlarged .left .bottom .description > table, +.problemEnlarged .left .bottom .description > ul { + display: block; +} + +.problemEnlarged .left .bottom .image { + position: relative; + display: block; + min-width: 30px; + min-height: 30px; + width: 100%; + flex-shrink: 0; + margin-top: 20px; + border: 1px solid #ccc; +} + +.problemEnlarged .right { + position: relative; + display: none; + flex-grow: 2; + width: calc(100% - 100px); +} + +#wrapperPanel[data-size="large"] .problemEnlarged .right { + display: block; +} + +.problemEnlarged .right > .embedAttachment { + position: relative; + display: block; + width: 100%; + height: 100%; +} + +@media only screen and (max-width: 800px) { + .problemEnlarged { + flex-direction: column; + } + + .problemEnlarged .right { + width: 100%; + height: 50%; + } +} + +.viewLog-container { + position: relative; + display: flex; + flex-direction: row; + width: 100%; + height: 100%; +} + +.viewLog-container .header { + position: relative; + display: inline-flex; + flex-direction: column; + flex-grow: 1; + box-sizing: border-box; + padding-left: 10px; + height: 100%; +} + +.viewLog-container .header::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 10px; + height: 100%; + background-color: #b9b9b9; +} + +.viewLog-container .header .top { + position: relative; + display: flex; + padding: 20px 0 10px; + flex-direction: column; + align-items: center; + flex-grow: 0; +} + +.viewLog-container .header .top .problemIcon { + position: relative; + width: 92px; + height: 92px; + border-radius: 50%; +} + +.viewLog-container .header .top .problemName { + position: relative; + font-family: Nunito; + font-size: 25px; + font-weight: 950; + letter-spacing: .8px; + color: rgb(70, 70, 70); + margin-top: 10px; +} + +.viewLog-container .header .top .point { + position: relative; + font-size: 12px; + color: #ecf0f1; + letter-spacing: 0.4px; + background-color: #27ae60; + padding: 2px 6px; + margin-top: 2px; + border-radius: 4px; +} + +.viewLog-container .header .bottom { + position: relative; + display: flex; + flex-direction: column; + flex-grow: 1; + overflow-x: hidden; + overflow-y: auto; +} + +.viewLog-container .header .bottom .line { + position: relative; + display: flex; + flex-direction: row; + flex-grow: 0; + margin: 10px 0; +} + +.viewLog-container .header .bottom .line .left { + position: relative; + display: flex; + flex-direction: column; + flex-grow: 1; + box-sizing: border-box; + padding: 0 0 0 20px; +} + +.viewLog-container .header .bottom .line .left .row { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + margin: 1px 0; +} + +.viewLog-container .header .bottom .line .left .row::before { + content: "\f111"; + position: relative; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + font-weight: 600; + margin-right: 10px; + width: 20px; + text-align: center; + color: rgba(46, 46, 46, 0.5); +} + +.viewLog-container .header .bottom .line .left .problemInfo { + margin-bottom: 10px; +} + +.viewLog-container .header .bottom .line .left .problemInfo::before { + content: "\f128"; + color: #464646; + font-size: 21px; + margin-right: 20px; +} + +.viewLog-container .header .bottom .line .left .problemInfo .problemid, +.viewLog-container .header .bottom .line .left .problemInfo .language { + position: relative; + font-family: Consolas; + font-weight: bold; + font-size: 18px; + color: #464646; +} + +.viewLog-container .header .bottom .line .left .problemInfo .language { + font-family: Calibri; + font-size: 16px; + margin-left: 20px; +} + +/*? Correct */ + +.viewLog-container .header.correct .bottom .line .left .problemInfo .problemid, +.viewLog-container .header.correct .bottom .line .left .problemInfo .language, +.viewLog-container .header.correct .bottom .line .left .problemInfo::before { + color: #39aa56; +} + +.viewLog-container .header.correct::before { + background-color: #39aa56; +} + +.viewLog-container .header.correct .bottom .line .left .problemInfo::before { + content: "\f00c"; +} + +/*? Passed */ + +.viewLog-container .header.passed .bottom .line .left .problemInfo .problemid, +.viewLog-container .header.passed .bottom .line .left .problemInfo .language, +.viewLog-container .header.passed .bottom .line .left .problemInfo::before { + color: #39aaa1; +} + +.viewLog-container .header.passed::before { + background-color: #39aaa1; +} + +.viewLog-container .header.passed .bottom .line .left .problemInfo::before { + content: "\f129"; +} + +/*? Accepted */ + +.viewLog-container .header.accepted .bottom .line .left .problemInfo .problemid, +.viewLog-container .header.accepted .bottom .line .left .problemInfo .language, +.viewLog-container .header.accepted .bottom .line .left .problemInfo::before { + color: #cfc337; +} + +.viewLog-container .header.accepted::before { + background-color: #edde3f; +} + +.viewLog-container .header.accepted .bottom .line .left .problemInfo::before { + content: "\f12a"; +} + +/*? Failed */ + +.viewLog-container .header.failed .bottom .line .left .problemInfo .problemid, +.viewLog-container .header.failed .bottom .line .left .problemInfo .language, +.viewLog-container .header.failed .bottom .line .left .problemInfo::before { + color: #db4545; +} + +.viewLog-container .header.failed::before { + background-color: #db4545; +} + +.viewLog-container .header.failed .bottom .line .left .problemInfo::before { + content: "\f00d"; +} + +.viewLog-container .header .bottom .line .left .submitTime, +.viewLog-container .header .bottom .line .left .status, +.viewLog-container .header .bottom .line .left .result, +.viewLog-container .header .bottom .line .left .point { + position: relative; + font-family: "Calibri", "Segoe UI"; + font-size: 15px; + color: rgb(56, 56, 56); +} + + +.viewLog-container .header .bottom .line .left .submitTime::before { + content: "\f783"; +} + +.viewLog-container .header .bottom .line .left .submitted::before { + content: "\f093"; +} + +.viewLog-container .header .bottom .line .left .status::before { + content: "\f05a"; +} + +.viewLog-container .header .bottom .line .left .result::before { + content: "\f682"; +} + +.viewLog-container .header .bottom .line .left .point::before { + content: "\f044"; +} + +.viewLog-container .header .bottom .line .left .result b { + display: inline; + padding: 0 4px; +} + +.viewLog-container .header .bottom .line .left .result b.green { + color: #39aa56; +} + +.viewLog-container .header .bottom .line .left .result b.red { + color: #db4545; +} + +.viewLog-container .header .bottom .line .left .point { + font-weight: bold; + font-size: 16px; +} + +.viewLog-container .header .bottom .line .right { + position: relative; + display: inline-flex; + flex-direction: column; + flex-grow: 0; + margin-right: 20px; +} + +.viewLog-container .header .bottom .line .right .submitter { + position: relative; + display: flex; + flex-direction: row-reverse; + align-items: center; + margin-bottom: 20px; +} + +.viewLog-container .header .bottom .line .right .submitter .avatar { + position: relative; + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; +} + +.viewLog-container .header .bottom .line .right .submitter .info { + position: relative; + margin-right: 10px; +} + +.viewLog-container .header .bottom .line .right .submitter .info .tag { + font-family: "Calibri"; + font-size: 11px; + letter-spacing: 0.4px; + color: #546e7a; + font-weight: bold; + text-align: right; +} + +.viewLog-container .header .bottom .line .right .submitter .info .name { + font-family: Nunito; + font-size: 16px; + font-weight: 850; + color: #425161; + text-align: right; +} + +.viewLog-container .header .bottom .line.log { + flex-direction: column; +} + +.viewLog-container .testList { + position: relative; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + width: 280px; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + background-color: rgb(238, 238, 238); +} + +.viewLog-container .testList:empty::before { + content: "Không tìm thấy test nào cả :("; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-family: "Calibri", "Segoe UI"; + font-weight: bold; + font-size: 16px; + color: gray; +} + +.viewLog-container .testList .item { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 10px 10px 10px 16px; + background-color: rgb(245, 245, 245); + counter-increment: testItem; + + transition: background-color 0.2s ease; +} + +.viewLog-container .testList .item:hover { + background-color: rgb(255, 255, 255); +} + +.viewLog-container .testList .item::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 6px; + height: 100%; + background-color: #b9b9b9 +} + +.viewLog-container .testList .item .line { + position: relative; + display: flex; + width: 100%; + flex-direction: row; + align-items: center; + flex-grow: 1; +} + +.viewLog-container .testList .item .line .left { + position: relative; + flex-grow: 1; +} + +.viewLog-container .testList .item .line .left .testid { + position: relative; + font-size: 15px; + font-weight: bold; + color: #464646; +} + +.viewLog-container .testList .item .line .left .testid::before { + content: "#"counter(testItem); + position: relative; + display: inline-block; + font-size: 11px; + width: 25px; +} + +.viewLog-container .testList .item .line .left .status { + position: relative; + font-size: 12px; +} + +.viewLog-container .testList .item .line.detail { + position: relative; + flex-direction: column; + align-items: flex-start; + margin-top: 10px; +} + +.viewLog-container .testList .item .line.detail > t { + display: block; + width: 100%; + font-size: 13px; + white-space: pre-wrap; + color: rgb(80, 80, 80); +} + +.viewLog-container .testList .item .right { + position: relative; + display: inline-flex; + flex-direction: column; + align-items: flex-end; + flex-grow: 0; + flex-shrink: 0; +} + +.viewLog-container .testList .item .right .point { + position: relative; + font-size: 13px; + font-weight: bold; + text-align: right; + color: rgb(78, 78, 78); +} + +.viewLog-container .testList .item .right .runtime { + position: relative; + font-size: 12px; + color: rgb(114, 114, 114); +} + +.viewLog-container .testList .item.passed::before { + background-color: #39aa56; +} + +.viewLog-container .testList .item.passed .line .left .testid { + color: #39aa56; +} + +.viewLog-container .testList .item.accepted::before { + background-color: #edde3f; +} + +.viewLog-container .testList .item.accepted .line .left .testid { + color: #cfc337; +} + +.viewLog-container .testList .item.failed::before { + background-color: #c0392b; +} + +.viewLog-container .testList .item.failed .line .left .testid { + color: #c0392b; +} + + +/* Mobile Responsive */ + +@media only screen and (max-width: 800px) { + #wrapper #wrapp { + width: 100%; + height: 100%; + max-height: unset; + } + + .viewLog-container { + flex-direction: column; + } + + .viewLog-container .header { + height: unset; + } + + .viewLog-container .testList { + width: 100%; + height: unset; + } + + .viewLog-container .testList .item { + padding-left: 20px; + } + + .viewLog-container .testList .item::before { + width: 10px; + } +} + +.cpanel-container, +.publicFiles-container { + position: relative; + display: block; + width: 100%; + height: 100%; + border: unset; + overflow: hidden; +} + +.rateLimitedClock { + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: center; + font-size: 25px; + font-weight: bold; +} + +.rateLimitedClock > .inner { + font-size: 13px; + margin: 0 0 4px 4px; +} + +.disconnectedRetry { + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: center; + font-size: 13px; + font-weight: bold; + overflow: hidden; +} + +.disconnectedRetry > .inner { + font-size: 25px; + margin: 0 0 0 4px; + line-height: 24px; +} + +#unsecureProtocolWarning > .right::after { + content: "\f13e"; + color: rgb(185, 5, 50); + font-size: 24px; +} + +footer { + position: relative; + box-sizing: border-box; + width: 100%; + padding: 20px; + display: block; + float: left; +} + +footer .header { + position: relative; + display: block; + padding-top: 10px; + padding-bottom: 16px; +} + +footer .header .logo { + position: relative; + display: block; + margin: auto; + margin-bottom: 12px; + background-image: url("/assets/img/icon.webp"); + background-position: center; + background-size: cover; + border-radius: 50%; + width: 82px; + height: 82px; +} + +footer .header .button { + position: relative; + display: flex; + flex-direction: row; + margin-top: 20px; +} + +footer .header .button button { + flex-grow: 1; + margin: 0 5px; +} + +footer .header > t { + position: relative; + display: block; + text-align: center; + font-family: "Calibri"; + font-weight: normal; + font-size: 13px; + padding-top: 2px; +} + +footer .header > t.title { + font-family: "Nunito"; + font-size: 17px; + font-weight: 750; + text-transform: uppercase; + color: #4d6783; +} + +footer .header > t.version { + font-weight: bold; + color: #3a5068; +} + +footer .header > t.subtitle { + color: rgb(90, 90, 90); +} + +footer .simpleTable { + width: 100%; + max-width: 220px; + margin: auto; + margin-bottom: 10px; +} + +footer .badge { + position: relative; + padding-bottom: 10px; +} + +footer .description { + display: block; + font-weight: lighter; + font-size: 14px; + color: #333333; + padding: 2px 10px; +} + +footer t.contact { + position: relative; + display: block; + padding: 10px 0 0 10px; + font-weight: bold; +} + +footer ul.contact { + position: relative; + box-sizing: border-box; + display: block; + list-style: none; + margin: unset; + padding: unset; +} + +footer ul.contact li { + position: relative; + padding-left: 40px; + padding-bottom: 2px; + color: rgb(0, 0, 0); + font-weight: lighter; + font-size: 14px; +} + +footer ul.contact li t, +footer ul.contact li a { + font-weight: bold; +} + +footer ul.contact li::before { + content: ""; + position: absolute; + display: inline-block; + top: 50%; + transform: translate(calc(-100% - 10px), -50%); + font-family: "Font Awesome 5 Free"; + font-size: 14px; + font-weight: 600; +} + +footer ul.contact li.tel::before { + content: "\f095"; + color: rgb(53, 172, 53); +} + +footer ul.contact li.email::before { + content: "\f0e0"; + color: #2c3e50; +} + +footer ul.contact li.facebook::before { + content: "\f09a"; + font-family: "Font Awesome 5 Brands"; + color: #4267B2; +} + +footer ul.contact li.github::before { + content: "\f092"; + font-family: "Font Awesome 5 Brands"; + color: #2c3e50; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@media only screen and (max-width: 750px) { + footer .left { + max-width: 100%; + } + + footer ul.contact { + float: left; + max-width: 100%; + } +} + +/* Unset all Transition */ +body.disableTransition * { + transition: unset!important; +} + +/* Element to hide when user is not admin */ + +body.user span#user_profile div.body ul#usett_left_panel li.navlink { + display: none!important; + visibility: hidden!important; +} + +/* Element to hide when user is guest */ + +body.guest #uploadp, +body.guest #logp, +body.guest span#user_profile { + display: none!important; + visibility: hidden!important; } \ No newline at end of file diff --git a/assets/css/dark.css b/static/css/dark.css similarity index 95% rename from assets/css/dark.css rename to static/css/dark.css index f4177744..ad3a1639 100644 --- a/assets/css/dark.css +++ b/static/css/dark.css @@ -1,627 +1,627 @@ -/* -? |-----------------------------------------------------------------------------------------------| -? | /assets/css/dark.css | -? | | -? | Copyright (c) 2018-2020 Belikhun. All right reserved | -? | Licensed under the MIT License. See LICENSE in the project root for license information. | -? |-----------------------------------------------------------------------------------------------| -*/ - -body.dark .formGroup.blue .formField { - color: rgb(204, 204, 204); -} - -body.dark #container { - background-color: rgb(30, 30, 30); -} - -/* Navigation Bar */ - -body.dark .navBar { - background-color: rgb(56, 56, 56); -} - -body.dark .navBar .top .right .info .name, -body.dark .navBar .top .left .title .main { - color: rgb(218, 218, 218); -} - -body.dark .navBar .top .right .info .tag, -body.dark .navBar .top .left .title .sub { - color: rgb(182, 182, 182); -} - -body.dark .navBar .top .right .hamburger span { - background-color: rgb(216, 216, 216); -} - -/* Panel */ - -body.dark panel { - box-shadow: 0 0 5px rgba(42, 42, 42, 0.2); -} - -body.dark panel .head { - background-color: rgb(40, 40, 40); - border-bottom-color: rgb(67, 67, 67); -} - -body.dark panel .head .le { - color: rgb(216, 216, 216); -} - -body.dark panel .head .ri i { - color: rgba(218, 218, 218, 0.54); -} - -body.dark panel .head .ri i:hover { - color: rgba(218, 218, 218, 0.82); -} - -body.dark panel .main { - background-color: rgb(48, 48, 48); -} - -/* File Upload Panel */ - -body.dark #uploadp .fileupload-container #submitDropzone { - border-color: rgb(124, 124, 124); - color: rgb(124, 124, 124); -} - -body.dark #uploadp .fileupload-container #submitDropzone.drag { - background-color: rgb(98, 98, 98); - border-color: rgb(156, 156, 156); - color: rgb(156, 156, 156); -} - -body.dark #uploadp .fileupload-container #submitDropzone .title { - color: rgb(180, 180, 180); -} - -body.dark #uploadp .fileupload-container #submitDropzone .sub { - color: rgb(160, 160, 160); -} - -body.dark #uploadp .fileupload-container .info #submitStatus { - color: rgb(214, 214, 214); -} - -body.dark #uploadp .fileupload-container .info #submitFileName { - color: rgb(160, 160, 160); -} - -/* Problems Panel */ - -body.dark #problemp .problemsContainer .problemsList .item { - background-color: rgb(56, 56, 56); - border-bottom-color: rgb(88, 88, 88); -} - -body.dark #problemp .problemsContainer .problemsList .item[disabled="true"] { - background-color: rgba(117, 57, 78, 0.6); -} - -body.dark #problemp .problemsContainer .problemsList .item:hover { - background-color: rgb(70, 70, 70); -} - -body.dark #problemp .problemsContainer .problemsList .item .title .name { - color: rgb(214, 214, 214); -} - -body.dark #problemp .problemsContainer .problemsList .item .title .point { - background-color: #269555; -} - -body.dark #problemp .problemsContainer .problem .name { - color: rgb(216, 216, 216); -} - -body.dark #problemp .problemsContainer .problem .point { - color: #29db73; -} - -body.dark #problemp .problemsContainer .problem .enlarge::before, -body.dark #problemp .problemsContainer .problem .close::before { - color: rgb(202, 202, 202); -} - -body.dark .problemEnlarged .top .group .col .name { - color: rgb(216, 216, 216); -} - -body.dark .problemEnlarged .bottom { - background-color: rgb(54, 54, 54); -} - -body.dark .problemEnlarged .bottom .description { - color: rgb(214, 214, 214); -} - -body.dark .problemEnlarged .bottom .description::before { - color: rgb(216, 216, 216); -} - -/* Time Panel */ - -body.dark .contestTimer #contestTimeState { - color: rgb(195, 195, 195); -} - -body.dark .contestTimer .reload { - color: rgba(218, 218, 218, 0.54); -} - -body.dark .contestTimer .reload:hover { - color: rgba(218, 218, 218, 0.82); -} - -/* Rank Panel */ - -body.dark #rankp div.rankingContainer table tr td:nth-child(3) .username { - color: rgb(160, 160, 160); -} - -body.dark #rankp div.rankingContainer table tbody tr[data-rank="1"] { - background-color: rgba(11, 129, 33, 0.2); -} - -body.dark #rankp div.rankingContainer table tbody tr[data-rank="2"] { - background-color: rgba(136, 138, 15, 0.2); -} - -body.dark #rankp div.rankingContainer table tbody tr[data-rank="3"] { - background-color: rgba(112, 12, 121, 0.2); -} - -body.dark #rankp div.rankingContainer table tbody tr[data-rank="1"] td:nth-child(3) .name, -body.dark #rankp div.rankingContainer table tbody tr[data-rank="2"] td:nth-child(3) .name, -body.dark #rankp div.rankingContainer table tbody tr[data-rank="3"] td:nth-child(3) .name { - color: rgb(236, 236, 236); -} - -body.dark #rankp div.rankingContainer table tr th { - background-color: #303030; - color: rgb(202, 202, 202); - border-bottom-color: rgb(88, 88, 88); -} - -body.dark #rankp div.rankingContainer table tr th.problem > t { - color: rgb(202, 202, 202); -} - -body.dark #rankp div.rankingContainer table tr th:nth-child(1), -body.dark #rankp div.rankingContainer table tr td:nth-child(1) { - color: rgb(184, 184, 184); -} - -body.dark #rankp div.rankingContainer table tr td.number { - color: rgb(124, 124, 124); -} - -body.dark #rankp div.rankingContainer table tr td.number:nth-child(4) { - color: rgb(98, 202, 246); -} - -body.dark #rankp div.rankingContainer table tr .number.link, -body.dark #rankp div.rankingContainer table tr .number.correct, -body.dark #rankp div.rankingContainer table tr .number.passed, -body.dark #rankp div.rankingContainer table tr .number.accepted, -body.dark #rankp div.rankingContainer table tr .number.failed, -body.dark #rankp div.rankingContainer table tr .number.skipped { - color: rgb(224, 224, 224); -} - -body.dark #rankp div.rankingContainer table tr .number.correct { - background-color: rgb(19, 148, 34); -} - -body.dark #rankp div.rankingContainer table tr .number.passed { - background-color: rgb(20, 119, 144); -} - -body.dark #rankp div.rankingContainer table tr .number.accepted { - background-color: rgb(138, 134, 24); -} - -body.dark #rankp div.rankingContainer table tr .number.failed { - background-color: rgb(151, 20, 20); -} - -body.dark #rankp div.rankingContainer table tr .number.skipped { - background-color: rgb(90, 90, 90); -} - -body.dark #rankp div.rankingContainer table tr td:nth-child(3) { - color: #6099fb; -} - -body.dark #rankp div.rankingContainer table tr:nth-child(3) td:nth-child(2) .name { - background-color: #2b9959; -} - -/* Log Panel */ - -body.dark #logp .logItemContainer .logItem .h { - border-bottom-color: rgb(88, 88, 88); -} - -body.dark #logp .logItemContainer .logItem .h .l .t { - color: rgba(216, 216, 216, 0.7); -} - -body.dark #logp .logItemContainer .logItem .h .r .s { - color: rgb(218, 218, 218); -} - -body.dark #logp .logItemContainer .logItem .h .r .l { - color: rgb(200, 200, 200); -} - -body.dark #logp .logItemContainer .logItem .d { - background-color: rgb(44, 44, 44); - color: #aaaaaa; -} - -body.dark #logp .logItemContainer .logItem .d:hover { - color: #e0e0e0; -} - -body.dark #logp .logItemContainer .logItem.queue .h .l .n { - color: #bc75fd; -} - -body.dark #logp .logItemContainer .logItem.judging .h .l .n { - color: #ff84f5; -} - -body.dark #logp .logItemContainer .logItem .h .l .n { - color: rgb(204, 204, 204); -} - -body.dark #logp .logItemContainer .logItem.scored .h .l .n { - color: #a1a3ff; -} - -body.dark #logp .logItemContainer .logItem.correct .h .l .n { - color: #36f666; -} - -body.dark #logp .logItemContainer .logItem.passed .h .l .n { - color: #2bd1ee; -} - -body.dark #logp .logItemContainer .logItem.accepted .h .l .n { - color: #eedf3c; -} - -body.dark #logp .logItemContainer .logItem.failed .h .l .n { - color: #fe8f8f; -} - -/* userSettings */ - -body.dark #userSettings .sub .panel .container { - background-color: rgba(56, 56, 56, 0.8); -} - -body.dark #userSettings .sub .panel .container .btn-group { - background-color: rgba(56, 56, 56, 0.8); -} - -body.dark #userSettings .sub .panel .container .btn-group:hover { - background-color: rgb(56, 56, 56); -} - -body.dark #userSettings .sub .panel .container .btn-group span::before, -body.dark #userSettings .sub .panel .container .btn-group span::after { - color: rgb(192, 192, 192); -} - -body.dark #userSettings .sub .panel .container .btn-group span:hover { - background-color: rgba(41, 140, 206, 0.2); -} - -body.dark #userSettings .sub .panel .container .btn-group span:hover::before, -body.dark #userSettings .sub .panel .container .btn-group span:hover::after { - color: #67c2ff; -} - -body.dark #userSettings .sub .panel .container .btn-group .close:hover { - background-color: rgba(219, 60, 43, 0.2); -} - -body.dark #userSettings .sub .panel .container .btn-group .close:hover::before, -body.dark #userSettings .sub .panel .container .btn-group .close:hover::after { - color: #ff8577; -} - -body.dark #userSettings .main .container .group .item .info .right { - color: rgb(168, 168, 168); -} - -/* Problems Editor */ - -body.dark .problemSettings .header { - background-color: rgb(56, 56, 56); -} - -body.dark .problemSettings .header div span::before { - color: rgba(190, 190, 190, 0.54); -} - -body.dark .problemSettings .problemsContainer .problemsList li.item:hover { - background-color: rgba(36, 36, 36, 0.4); -} - -body.dark .problemSettings .problemsContainer .problemsList li.item .title .id { - color: rgb(160, 160, 160); -} - -body.dark .problemSettings .problemsContainer .problemsList li.item .title .name { - color: rgb(214, 214, 214); -} - -body.dark .problemSettings .problemsContainer.problem .test-container .test-list .cell textarea { - color: rgb(204, 204, 204); -} - -body.dark .problemSettings .problemsContainer.problem .test-container .test-add:hover { - background-color: rgba(202, 202, 202, 0.1); -} - -body.dark .problemSettings .problemsContainer.problem .test-container .test-add:hover::after { - color: rgb(204, 204, 204); -} - -/* Log Viewer */ - -body.dark .viewLog-container .header .top .problemName { - color: rgb(228, 228, 228); -} - -body.dark .viewLog-container .header .bottom .line .left .row::before { - color: rgb(180, 180, 180); -} - -body.dark .viewLog-container .header .bottom .line .left .problemInfo .problemid, -body.dark .viewLog-container .header .bottom .line .left .problemInfo .language { - color: rgb(224, 224, 224); -} - -/*? Correct */ - -body.dark .viewLog-container .header.correct .bottom .line .left .problemInfo .problemid, -body.dark .viewLog-container .header.correct .bottom .line .left .problemInfo .language, -body.dark .viewLog-container .header.correct .bottom .line .left .problemInfo::before { - color: #38ce5d; -} - -body.dark .viewLog-container .header.correct::before { - background-color: #38ce5d; -} - -/*? Passed */ - -body.dark .viewLog-container .header.passed .bottom .line .left .problemInfo .problemid, -body.dark .viewLog-container .header.passed .bottom .line .left .problemInfo .language, -body.dark .viewLog-container .header.passed .bottom .line .left .problemInfo::before { - color: #38bdce; -} - -body.dark .viewLog-container .header.passed::before { - background-color: #38bdce; -} - -/*? Accepted */ - -body.dark .viewLog-container .header.accepted .bottom .line .left .problemInfo .problemid, -body.dark .viewLog-container .header.accepted .bottom .line .left .problemInfo .language, -body.dark .viewLog-container .header.accepted .bottom .line .left .problemInfo::before { - color: #e4d429; -} - -body.dark .viewLog-container .header.accepted::before { - background-color: #e4d429; -} - -/*? Failed */ - -body.dark .viewLog-container .header.failed .bottom .line .left .problemInfo .problemid, -body.dark .viewLog-container .header.failed .bottom .line .left .problemInfo .language, -body.dark .viewLog-container .header.failed .bottom .line .left .problemInfo::before { - color: #f56a6a; -} - -body.dark .viewLog-container .header.failed::before { - background-color: #ee4c4c; -} - -body.dark .viewLog-container .header .bottom .line .left .submitTime, -body.dark .viewLog-container .header .bottom .line .left .status, -body.dark .viewLog-container .header .bottom .line .left .result, -body.dark .viewLog-container .header .bottom .line .left .point { - color: rgb(224, 224, 224); -} - - -body.dark .viewLog-container .header .bottom .line .left .result b.green { - color: #38ce5d; -} - -body.dark .viewLog-container .header .bottom .line .left .result b.red { - color: #f56a6a; -} - -body.dark .viewLog-container .header .bottom .line .right .submitter .info .tag { - color: rgb(185, 185, 185); -} - -body.dark .viewLog-container .header .bottom .line .right .submitter .info .name { - color: rgb(228, 228, 228); -} - -body.dark .viewLog-container .header .bottom .line .right > t { - color: rgb(250, 250, 250); -} - - -body.dark .viewLog-container .testList .item .line .left .testid { - color: rgb(214, 214, 214); -} - -body.dark .viewLog-container .testList .item.passed::before { - background-color: #38ce5d; -} - -body.dark .viewLog-container .testList .item.passed .line .left .testid { - color: #38ce5d; -} - -body.dark .viewLog-container .testList .item.accepted::before { - background-color: #e4d429; -} - -body.dark .viewLog-container .testList .item.accepted .line .left .testid { - color: #e4d429; -} - -body.dark .viewLog-container .testList .item.failed::before { - background-color: #ee4c4c; -} - -body.dark .viewLog-container .testList .item.failed .line .left .testid { - color: #f56a6a; -} - -body.dark .viewLog-container .testList .item .right .point { - color: rgb(204, 204, 204); -} - -body.dark .viewLog-container .testList .item .right .runtime { - color: rgb(180, 180, 180); -} - -body.dark .viewLog-container .testList { - background-color: rgb(54, 54, 54); -} - -body.dark .viewLog-container .testList .item { - background-color: rgb(48, 48, 48); -} - -body.dark .viewLog-container .testList .item:hover { - background-color: rgb(60, 60, 60); -} - -body.dark .viewLog-container .testList .item .line.detail > t { - color: rgb(172, 172, 172); -} - -/* SysLogs */ - -body.dark .syslogs-settings .logsContainer .log { - background-color: transparent; -} - -body.dark .syslogs-settings .logsContainer .log:hover { - background-color: rgba(42, 42, 42, 0.8); -} - -body.dark .syslogs-settings .logsContainer .log .level { - background-color: rgba(65, 65, 65, 0.8); - color: rgb(218, 218, 218); -} - -body.dark .syslogs-settings .logsContainer .log.enlarge .level { - background-color: rgba(75, 75, 75, 0.8); -} - -body.dark .syslogs-settings .logsContainer .log .detail { - border-left: 2px solid rgb(104, 104, 104); -} - -body.dark .syslogs-settings .logsContainer .log .detail .info t { - color: rgb(155, 155, 155); -} - -body.dark .syslogs-settings .logsContainer .log .detail .text { - color: rgb(228, 228, 228); -} - -body.dark .syslogs-settings .logsContainer .log.okay .detail { - border-left-color: rgb(14, 194, 26); -} - -body.dark .syslogs-settings .logsContainer .log.okay .level { - color: rgb(15, 228, 30); -} - -body.dark .syslogs-settings .logsContainer .log.warn .detail { - border-left-color: rgb(194, 194, 16); -} - -body.dark .syslogs-settings .logsContainer .log.warn .level { - color: rgb(224, 224, 20); -} - -body.dark .syslogs-settings .logsContainer .log.errr .detail { - border-left-color: rgb(241, 80, 80); -} - -body.dark .syslogs-settings .logsContainer .log.errr .level { - color: rgb(248, 154, 154); -} - -body.dark .syslogs-settings .logsContainer .log.verb .detail { - border-left-color: rgb(196, 110, 236); -} - -body.dark .syslogs-settings .logsContainer .log.verb .level { - color: rgb(217, 153, 246); -} - -body.dark .syslogs-settings .navBarigation { - background-color: rgba(65, 65, 65, 0.8); -} - -body.dark .syslogs-settings .navBarigation .left, -body.dark .syslogs-settings .navBarigation .right { - color: rgb(204, 204, 204); -} - -body.dark .syslogs-settings .navBarigation .middle .icon::before { - color: rgb(95, 95, 95); -} - -body.dark .syslogs-settings .navBarigation .middle .icon:hover::before { - color: #f67fe6; -} - -body.dark .syslogs-settings .navBarigation .middle .currentPage { - color: rgb(230, 230, 230); -} - -/* Footer */ - -body.dark footer .header .title { - color: #3498db; -} - -body.dark footer .header .version { - color: rgb(204, 204, 204); -} - -body.dark footer .header .subtitle { - color: rgb(170, 170, 170); -} - -body.dark footer .contact li { - color: rgb(228, 228, 228); -} - -body.dark footer ul.contact .email::before, -body.dark footer ul.contact .github::before { - color: rgb(180, 180, 180); +/* +? |-----------------------------------------------------------------------------------------------| +? | /static/css/dark.css | +? | | +? | Copyright (c) 2018-2020 Belikhun. All right reserved | +? | Licensed under the MIT License. See LICENSE in the project root for license information. | +? |-----------------------------------------------------------------------------------------------| +*/ + +body.dark .formGroup[data-color="blue"] .formField { + color: rgb(204, 204, 204); +} + +body.dark #container { + background-color: rgb(30, 30, 30); +} + +/* Navigation Bar */ + +body.dark .navBar { + background-color: rgb(56, 56, 56); +} + +body.dark .navBar .top .right .info .name, +body.dark .navBar .top .left .title .main { + color: rgb(218, 218, 218); +} + +body.dark .navBar .top .right .info .tag, +body.dark .navBar .top .left .title .sub { + color: rgb(182, 182, 182); +} + +body.dark .navBar .top .right .hamburger span { + background-color: rgb(216, 216, 216); +} + +/* Panel */ + +body.dark panel { + box-shadow: 0 0 5px rgba(42, 42, 42, 0.2); +} + +body.dark panel .head { + background-color: rgb(40, 40, 40); + border-bottom-color: rgb(67, 67, 67); +} + +body.dark panel .head .le { + color: rgb(216, 216, 216); +} + +body.dark panel .head .ri i { + color: rgba(218, 218, 218, 0.54); +} + +body.dark panel .head .ri i:hover { + color: rgba(218, 218, 218, 0.82); +} + +body.dark panel .main { + background-color: rgb(48, 48, 48); +} + +/* File Upload Panel */ + +body.dark #uploadp .fileupload-container #submitDropzone { + border-color: rgb(124, 124, 124); + color: rgb(124, 124, 124); +} + +body.dark #uploadp .fileupload-container #submitDropzone.drag { + background-color: rgb(98, 98, 98); + border-color: rgb(156, 156, 156); + color: rgb(156, 156, 156); +} + +body.dark #uploadp .fileupload-container #submitDropzone .title { + color: rgb(180, 180, 180); +} + +body.dark #uploadp .fileupload-container #submitDropzone .sub { + color: rgb(160, 160, 160); +} + +body.dark #uploadp .fileupload-container .info #submitStatus { + color: rgb(214, 214, 214); +} + +body.dark #uploadp .fileupload-container .info #submitFileName { + color: rgb(160, 160, 160); +} + +/* Problems Panel */ + +body.dark #problemp .problemsContainer .problemsList .item { + background-color: rgb(56, 56, 56); + border-bottom-color: rgb(88, 88, 88); +} + +body.dark #problemp .problemsContainer .problemsList .item[disabled="true"] { + background-color: rgba(117, 57, 78, 0.6); +} + +body.dark #problemp .problemsContainer .problemsList .item:hover { + background-color: rgb(70, 70, 70); +} + +body.dark #problemp .problemsContainer .problemsList .item .title .name { + color: rgb(214, 214, 214); +} + +body.dark #problemp .problemsContainer .problemsList .item .title .point { + background-color: #269555; +} + +body.dark #problemp .problemsContainer .problem .name { + color: rgb(216, 216, 216); +} + +body.dark #problemp .problemsContainer .problem .point { + color: #29db73; +} + +body.dark #problemp .problemsContainer .problem .enlarge::before, +body.dark #problemp .problemsContainer .problem .close::before { + color: rgb(202, 202, 202); +} + +body.dark .problemEnlarged .top .group .col .name { + color: rgb(216, 216, 216); +} + +body.dark .problemEnlarged .bottom { + background-color: rgb(54, 54, 54); +} + +body.dark .problemEnlarged .bottom .description { + color: rgb(214, 214, 214); +} + +body.dark .problemEnlarged .bottom .description::before { + color: rgb(216, 216, 216); +} + +/* Time Panel */ + +body.dark .contestTimer #contestTimeState { + color: rgb(195, 195, 195); +} + +body.dark .contestTimer .reload { + color: rgba(218, 218, 218, 0.54); +} + +body.dark .contestTimer .reload:hover { + color: rgba(218, 218, 218, 0.82); +} + +/* Rank Panel */ + +body.dark #rankp div.rankingContainer table tr td:nth-child(3) .username { + color: rgb(160, 160, 160); +} + +body.dark #rankp div.rankingContainer table tbody tr[data-rank="1"] { + background-color: rgba(11, 129, 33, 0.2); +} + +body.dark #rankp div.rankingContainer table tbody tr[data-rank="2"] { + background-color: rgba(136, 138, 15, 0.2); +} + +body.dark #rankp div.rankingContainer table tbody tr[data-rank="3"] { + background-color: rgba(112, 12, 121, 0.2); +} + +body.dark #rankp div.rankingContainer table tbody tr[data-rank="1"] td:nth-child(3) .name, +body.dark #rankp div.rankingContainer table tbody tr[data-rank="2"] td:nth-child(3) .name, +body.dark #rankp div.rankingContainer table tbody tr[data-rank="3"] td:nth-child(3) .name { + color: rgb(236, 236, 236); +} + +body.dark #rankp div.rankingContainer table tr th { + background-color: #303030; + color: rgb(202, 202, 202); + border-bottom-color: rgb(88, 88, 88); +} + +body.dark #rankp div.rankingContainer table tr th.problem > t { + color: rgb(202, 202, 202); +} + +body.dark #rankp div.rankingContainer table tr th:nth-child(1), +body.dark #rankp div.rankingContainer table tr td:nth-child(1) { + color: rgb(184, 184, 184); +} + +body.dark #rankp div.rankingContainer table tr td.number { + color: rgb(124, 124, 124); +} + +body.dark #rankp div.rankingContainer table tr td.number:nth-child(4) { + color: rgb(98, 202, 246); +} + +body.dark #rankp div.rankingContainer table tr .number.link, +body.dark #rankp div.rankingContainer table tr .number.correct, +body.dark #rankp div.rankingContainer table tr .number.passed, +body.dark #rankp div.rankingContainer table tr .number.accepted, +body.dark #rankp div.rankingContainer table tr .number.failed, +body.dark #rankp div.rankingContainer table tr .number.skipped { + color: rgb(224, 224, 224); +} + +body.dark #rankp div.rankingContainer table tr .number.correct { + background-color: rgb(19, 148, 34); +} + +body.dark #rankp div.rankingContainer table tr .number.passed { + background-color: rgb(20, 119, 144); +} + +body.dark #rankp div.rankingContainer table tr .number.accepted { + background-color: rgb(138, 134, 24); +} + +body.dark #rankp div.rankingContainer table tr .number.failed { + background-color: rgb(151, 20, 20); +} + +body.dark #rankp div.rankingContainer table tr .number.skipped { + background-color: rgb(90, 90, 90); +} + +body.dark #rankp div.rankingContainer table tr td:nth-child(3) { + color: #6099fb; +} + +body.dark #rankp div.rankingContainer table tr:nth-child(3) td:nth-child(2) .name { + background-color: #2b9959; +} + +/* Log Panel */ + +body.dark #logp .logItemContainer .logItem .h { + border-bottom-color: rgb(88, 88, 88); +} + +body.dark #logp .logItemContainer .logItem .h .l .t { + color: rgba(216, 216, 216, 0.7); +} + +body.dark #logp .logItemContainer .logItem .h .r .s { + color: rgb(218, 218, 218); +} + +body.dark #logp .logItemContainer .logItem .h .r .l { + color: rgb(200, 200, 200); +} + +body.dark #logp .logItemContainer .logItem .d { + background-color: rgb(44, 44, 44); + color: #aaaaaa; +} + +body.dark #logp .logItemContainer .logItem .d:hover { + color: #e0e0e0; +} + +body.dark #logp .logItemContainer .logItem.queue .h .l .n { + color: #bc75fd; +} + +body.dark #logp .logItemContainer .logItem.judging .h .l .n { + color: #ff84f5; +} + +body.dark #logp .logItemContainer .logItem .h .l .n { + color: rgb(204, 204, 204); +} + +body.dark #logp .logItemContainer .logItem.scored .h .l .n { + color: #a1a3ff; +} + +body.dark #logp .logItemContainer .logItem.correct .h .l .n { + color: #36f666; +} + +body.dark #logp .logItemContainer .logItem.passed .h .l .n { + color: #2bd1ee; +} + +body.dark #logp .logItemContainer .logItem.accepted .h .l .n { + color: #eedf3c; +} + +body.dark #logp .logItemContainer .logItem.failed .h .l .n { + color: #fe8f8f; +} + +/* userSettings */ + +body.dark #userSettings .sub .panel .container { + background-color: rgba(56, 56, 56, 0.8); +} + +body.dark #userSettings .sub .panel .container .btn-group { + background-color: rgba(56, 56, 56, 0.8); +} + +body.dark #userSettings .sub .panel .container .btn-group:hover { + background-color: rgb(56, 56, 56); +} + +body.dark #userSettings .sub .panel .container .btn-group span::before, +body.dark #userSettings .sub .panel .container .btn-group span::after { + color: rgb(192, 192, 192); +} + +body.dark #userSettings .sub .panel .container .btn-group span:hover { + background-color: rgba(41, 140, 206, 0.2); +} + +body.dark #userSettings .sub .panel .container .btn-group span:hover::before, +body.dark #userSettings .sub .panel .container .btn-group span:hover::after { + color: #67c2ff; +} + +body.dark #userSettings .sub .panel .container .btn-group .close:hover { + background-color: rgba(219, 60, 43, 0.2); +} + +body.dark #userSettings .sub .panel .container .btn-group .close:hover::before, +body.dark #userSettings .sub .panel .container .btn-group .close:hover::after { + color: #ff8577; +} + +body.dark #userSettings .main .container .group .item .info .right { + color: rgb(168, 168, 168); +} + +/* Problems Editor */ + +body.dark .problemSettings .header { + background-color: rgb(56, 56, 56); +} + +body.dark .problemSettings .header div span::before { + color: rgba(190, 190, 190, 0.54); +} + +body.dark .problemSettings .problemsContainer .problemsList li.item:hover { + background-color: rgba(36, 36, 36, 0.4); +} + +body.dark .problemSettings .problemsContainer .problemsList li.item .title .id { + color: rgb(160, 160, 160); +} + +body.dark .problemSettings .problemsContainer .problemsList li.item .title .name { + color: rgb(214, 214, 214); +} + +body.dark .problemSettings .problemsContainer.problem .test-container .test-list .cell textarea { + color: rgb(204, 204, 204); +} + +body.dark .problemSettings .problemsContainer.problem .test-container .test-add:hover { + background-color: rgba(202, 202, 202, 0.1); +} + +body.dark .problemSettings .problemsContainer.problem .test-container .test-add:hover::after { + color: rgb(204, 204, 204); +} + +/* Log Viewer */ + +body.dark .viewLog-container .header .top .problemName { + color: rgb(228, 228, 228); +} + +body.dark .viewLog-container .header .bottom .line .left .row::before { + color: rgb(180, 180, 180); +} + +body.dark .viewLog-container .header .bottom .line .left .problemInfo .problemid, +body.dark .viewLog-container .header .bottom .line .left .problemInfo .language { + color: rgb(224, 224, 224); +} + +/*? Correct */ + +body.dark .viewLog-container .header.correct .bottom .line .left .problemInfo .problemid, +body.dark .viewLog-container .header.correct .bottom .line .left .problemInfo .language, +body.dark .viewLog-container .header.correct .bottom .line .left .problemInfo::before { + color: #38ce5d; +} + +body.dark .viewLog-container .header.correct::before { + background-color: #38ce5d; +} + +/*? Passed */ + +body.dark .viewLog-container .header.passed .bottom .line .left .problemInfo .problemid, +body.dark .viewLog-container .header.passed .bottom .line .left .problemInfo .language, +body.dark .viewLog-container .header.passed .bottom .line .left .problemInfo::before { + color: #38bdce; +} + +body.dark .viewLog-container .header.passed::before { + background-color: #38bdce; +} + +/*? Accepted */ + +body.dark .viewLog-container .header.accepted .bottom .line .left .problemInfo .problemid, +body.dark .viewLog-container .header.accepted .bottom .line .left .problemInfo .language, +body.dark .viewLog-container .header.accepted .bottom .line .left .problemInfo::before { + color: #e4d429; +} + +body.dark .viewLog-container .header.accepted::before { + background-color: #e4d429; +} + +/*? Failed */ + +body.dark .viewLog-container .header.failed .bottom .line .left .problemInfo .problemid, +body.dark .viewLog-container .header.failed .bottom .line .left .problemInfo .language, +body.dark .viewLog-container .header.failed .bottom .line .left .problemInfo::before { + color: #f56a6a; +} + +body.dark .viewLog-container .header.failed::before { + background-color: #ee4c4c; +} + +body.dark .viewLog-container .header .bottom .line .left .submitTime, +body.dark .viewLog-container .header .bottom .line .left .status, +body.dark .viewLog-container .header .bottom .line .left .result, +body.dark .viewLog-container .header .bottom .line .left .point { + color: rgb(224, 224, 224); +} + + +body.dark .viewLog-container .header .bottom .line .left .result b.green { + color: #38ce5d; +} + +body.dark .viewLog-container .header .bottom .line .left .result b.red { + color: #f56a6a; +} + +body.dark .viewLog-container .header .bottom .line .right .submitter .info .tag { + color: rgb(185, 185, 185); +} + +body.dark .viewLog-container .header .bottom .line .right .submitter .info .name { + color: rgb(228, 228, 228); +} + +body.dark .viewLog-container .header .bottom .line .right > t { + color: rgb(250, 250, 250); +} + + +body.dark .viewLog-container .testList .item .line .left .testid { + color: rgb(214, 214, 214); +} + +body.dark .viewLog-container .testList .item.passed::before { + background-color: #38ce5d; +} + +body.dark .viewLog-container .testList .item.passed .line .left .testid { + color: #38ce5d; +} + +body.dark .viewLog-container .testList .item.accepted::before { + background-color: #e4d429; +} + +body.dark .viewLog-container .testList .item.accepted .line .left .testid { + color: #e4d429; +} + +body.dark .viewLog-container .testList .item.failed::before { + background-color: #ee4c4c; +} + +body.dark .viewLog-container .testList .item.failed .line .left .testid { + color: #f56a6a; +} + +body.dark .viewLog-container .testList .item .right .point { + color: rgb(204, 204, 204); +} + +body.dark .viewLog-container .testList .item .right .runtime { + color: rgb(180, 180, 180); +} + +body.dark .viewLog-container .testList { + background-color: rgb(54, 54, 54); +} + +body.dark .viewLog-container .testList .item { + background-color: rgb(48, 48, 48); +} + +body.dark .viewLog-container .testList .item:hover { + background-color: rgb(60, 60, 60); +} + +body.dark .viewLog-container .testList .item .line.detail > t { + color: rgb(172, 172, 172); +} + +/* SysLogs */ + +body.dark .syslogs-settings .logsContainer .log { + background-color: transparent; +} + +body.dark .syslogs-settings .logsContainer .log:hover { + background-color: rgba(42, 42, 42, 0.8); +} + +body.dark .syslogs-settings .logsContainer .log .level { + background-color: rgba(65, 65, 65, 0.8); + color: rgb(218, 218, 218); +} + +body.dark .syslogs-settings .logsContainer .log.enlarge .level { + background-color: rgba(75, 75, 75, 0.8); +} + +body.dark .syslogs-settings .logsContainer .log .detail { + border-left: 2px solid rgb(104, 104, 104); +} + +body.dark .syslogs-settings .logsContainer .log .detail .info t { + color: rgb(155, 155, 155); +} + +body.dark .syslogs-settings .logsContainer .log .detail .text { + color: rgb(228, 228, 228); +} + +body.dark .syslogs-settings .logsContainer .log.okay .detail { + border-left-color: rgb(14, 194, 26); +} + +body.dark .syslogs-settings .logsContainer .log.okay .level { + color: rgb(15, 228, 30); +} + +body.dark .syslogs-settings .logsContainer .log.warn .detail { + border-left-color: rgb(194, 194, 16); +} + +body.dark .syslogs-settings .logsContainer .log.warn .level { + color: rgb(224, 224, 20); +} + +body.dark .syslogs-settings .logsContainer .log.errr .detail { + border-left-color: rgb(241, 80, 80); +} + +body.dark .syslogs-settings .logsContainer .log.errr .level { + color: rgb(248, 154, 154); +} + +body.dark .syslogs-settings .logsContainer .log.verb .detail { + border-left-color: rgb(196, 110, 236); +} + +body.dark .syslogs-settings .logsContainer .log.verb .level { + color: rgb(217, 153, 246); +} + +body.dark .syslogs-settings .navBarigation { + background-color: rgba(65, 65, 65, 0.8); +} + +body.dark .syslogs-settings .navBarigation .left, +body.dark .syslogs-settings .navBarigation .right { + color: rgb(204, 204, 204); +} + +body.dark .syslogs-settings .navBarigation .middle .icon::before { + color: rgb(95, 95, 95); +} + +body.dark .syslogs-settings .navBarigation .middle .icon:hover::before { + color: #f67fe6; +} + +body.dark .syslogs-settings .navBarigation .middle .currentPage { + color: rgb(230, 230, 230); +} + +/* Footer */ + +body.dark footer .header .title { + color: #3498db; +} + +body.dark footer .header .version { + color: rgb(204, 204, 204); +} + +body.dark footer .header .subtitle { + color: rgb(170, 170, 170); +} + +body.dark footer .contact li { + color: rgb(228, 228, 228); +} + +body.dark footer ul.contact .email::before, +body.dark footer ul.contact .github::before { + color: rgb(180, 180, 180); } \ No newline at end of file diff --git a/assets/css/navbar.css b/static/css/navbar.css similarity index 94% rename from assets/css/navbar.css rename to static/css/navbar.css index 1776248a..1465ee25 100644 --- a/assets/css/navbar.css +++ b/static/css/navbar.css @@ -1,221 +1,221 @@ -/* -? |-----------------------------------------------------------------------------------------------| -? | /assets/css/navbar.css | -? | | -? | Copyright (c) 2018-2020 Belikhun. All right reserved | -? | Licensed under the MIT License. See LICENSE in the project root for license information. | -? |-----------------------------------------------------------------------------------------------| -*/ - -.navBar { - position: fixed; - display: flex; - flex-direction: column; - top: 0; - left: 0; - width: 100%; - background-color: #ebebeb; - box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2); - z-index: 99; - user-select: none; -} - -.navBar .top { - position: relative; - display: flex; - flex-direction: row; - height: 56px; -} - -.navBar .top .left { - position: relative; - display: flex; - flex-grow: 1; - align-items: center; - height: 100%; -} - -.navBar .top .left .icon { - position: relative; - height: 44px; - width: 44px; - border-radius: 100%; - margin: 0 10px; - float: left; -} - -.navBar .top .left .title { - position: relative; - max-width: calc(100% - 58px); - padding-left: 0; - float: left; - list-style: none; - text-align: left; - font-weight: bold; - margin: unset; -} - -.navBar .top .left .title .main { - position: relative; - font-family: Nunito; - font-size: 18px; - font-weight: 750; - letter-spacing: .8px; - color: #425161; - overflow: hidden; - white-space: nowrap; -} - -.navBar .top .left .title .sub { - position: relative; - font-size: 12px; - color: #546e7a; - overflow: hidden; - letter-spacing: 0.4px; - font-weight: lighter; - white-space: nowrap; -} - -.navBar .top .right { - position: relative; - display: flex; - flex-grow: 0; - flex-shrink: 0; - align-items: center; - height: 100%; - cursor: pointer; -} - -.navBar .top .right .hamburger { - position: relative; - width: 22px; - height: 20px; - margin-right: 10px; - -webkit-transition: all 1s cubic-bezier(0.06, 0.81, 0, 0.98); - -o-transition: all 1s cubic-bezier(0.06, 0.81, 0, 0.98); - transition: all 1s cubic-bezier(0.06, 0.81, 0, 0.98); - z-index: 2; -} - -.navBar .top .right .hamburger span { - position: absolute; - width: 100%; - height: 4px; - border-radius: 4px; - background-color: #2c3e50; - left: 0; - -webkit-transition-property: opacity, -webkit-transform; - -o-transition-property: transform, opacity; - transition-property: transform, opacity; - -webkit-transition-duration: 0.5s; - -o-transition-duration: 0.5s; - transition-duration: 0.5s; - -webkit-transition-timing-function: ease; - -o-transition-timing-function: ease; - transition-timing-function: ease; -} - -.navBar .top .right .hamburger span:nth-child(1) { - top: 0; -} - -.navBar .top .right .hamburger span:nth-child(2) { - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} - -.navBar .top .right .hamburger span:nth-child(3) { - bottom: 0; -} - -.navBar .top .right.active .hamburger span:nth-child(1){ - -webkit-transform: translateY(8px) rotate(45deg); - -ms-transform: translateY(8px) rotate(45deg); - transform: translateY(8px) rotate(45deg); -} - -.navBar .top .right.active .hamburger span:nth-child(2){ - opacity: 0; -} - -.navBar .top .right.active .hamburger span:nth-child(3){ - -webkit-transform: translateY(-8px) rotate(-45deg); - -ms-transform: translateY(-8px) rotate(-45deg); - transform: translateY(-8px) rotate(-45deg); -} - -.navBar .top .right .avatar { - position: relative; - height: 44px; - width: 44px; - border-radius: 100%; - margin: 0 10px; - object-fit: cover; -} - -.navBar .top .right .info { - position: relative; - margin: unset; - padding: unset; - max-width: calc(100% - 82px); - list-style: none; - text-align: right; - font-weight: bold; -} - -.navBar .top .right .info .tag { - position: relative; - font-family: Nunito; - font-size: 12px; - letter-spacing: 0.4px; - color: #546e7a; -} - -.navBar .top .right .info .name { - position: relative; - font-family: Nunito; - font-size: 18px; - font-weight: 750; - font-style: italic; - color: #425161; -} - -.navBar .bottom { - position: relative; -} - -@media only screen and (max-width: 800px) { - .navBar .top .left { - position: absolute; - width: 100%; - height: 100%; - max-width: unset; - } - - body:not(.guest) .navBar .top .left .icon { - display: none; - } - - .navBar .top .left .title { - position: absolute; - text-align: center; - max-width: calc(100% - 180px); - left: 50%; - transform: translateX(-50%); - } - - .navBar .top .right { - width: 100%; - justify-content: space-between; - } - - body.guest .navBar .top .right { - flex-flow: row-reverse; - } - - .navBar .top .right .info { - display: none; - } +/* +? |-----------------------------------------------------------------------------------------------| +? | /static/css/navbar.css | +? | | +? | Copyright (c) 2018-2020 Belikhun. All right reserved | +? | Licensed under the MIT License. See LICENSE in the project root for license information. | +? |-----------------------------------------------------------------------------------------------| +*/ + +.navBar { + position: fixed; + display: flex; + flex-direction: column; + top: 0; + left: 0; + width: 100%; + background-color: #ebebeb; + box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2); + z-index: 99; + user-select: none; +} + +.navBar .top { + position: relative; + display: flex; + flex-direction: row; + height: 56px; +} + +.navBar .top .left { + position: relative; + display: flex; + flex-grow: 1; + align-items: center; + height: 100%; +} + +.navBar .top .left .icon { + position: relative; + height: 44px; + width: 44px; + border-radius: 100%; + margin: 0 10px; + float: left; +} + +.navBar .top .left .title { + position: relative; + max-width: calc(100% - 58px); + padding-left: 0; + float: left; + list-style: none; + text-align: left; + font-weight: bold; + margin: unset; +} + +.navBar .top .left .title .main { + position: relative; + font-family: Nunito; + font-size: 18px; + font-weight: 750; + letter-spacing: .8px; + color: #425161; + overflow: hidden; + white-space: nowrap; +} + +.navBar .top .left .title .sub { + position: relative; + font-size: 12px; + color: #546e7a; + overflow: hidden; + letter-spacing: 0.4px; + font-weight: lighter; + white-space: nowrap; +} + +.navBar .top .right { + position: relative; + display: flex; + flex-grow: 0; + flex-shrink: 0; + align-items: center; + height: 100%; + cursor: pointer; +} + +.navBar .top .right .hamburger { + position: relative; + width: 22px; + height: 20px; + margin-right: 10px; + -webkit-transition: all 1s cubic-bezier(0.06, 0.81, 0, 0.98); + -o-transition: all 1s cubic-bezier(0.06, 0.81, 0, 0.98); + transition: all 1s cubic-bezier(0.06, 0.81, 0, 0.98); + z-index: 2; +} + +.navBar .top .right .hamburger span { + position: absolute; + width: 100%; + height: 4px; + border-radius: 4px; + background-color: #2c3e50; + left: 0; + -webkit-transition-property: opacity, -webkit-transform; + -o-transition-property: transform, opacity; + transition-property: transform, opacity; + -webkit-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} + +.navBar .top .right .hamburger span:nth-child(1) { + top: 0; +} + +.navBar .top .right .hamburger span:nth-child(2) { + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.navBar .top .right .hamburger span:nth-child(3) { + bottom: 0; +} + +.navBar .top .right.active .hamburger span:nth-child(1){ + -webkit-transform: translateY(8px) rotate(45deg); + -ms-transform: translateY(8px) rotate(45deg); + transform: translateY(8px) rotate(45deg); +} + +.navBar .top .right.active .hamburger span:nth-child(2){ + opacity: 0; +} + +.navBar .top .right.active .hamburger span:nth-child(3){ + -webkit-transform: translateY(-8px) rotate(-45deg); + -ms-transform: translateY(-8px) rotate(-45deg); + transform: translateY(-8px) rotate(-45deg); +} + +.navBar .top .right .avatar { + position: relative; + height: 44px; + width: 44px; + border-radius: 100%; + margin: 0 10px; + object-fit: cover; +} + +.navBar .top .right .info { + position: relative; + margin: unset; + padding: unset; + max-width: calc(100% - 82px); + list-style: none; + text-align: right; + font-weight: bold; +} + +.navBar .top .right .info .tag { + position: relative; + font-family: Nunito; + font-size: 12px; + letter-spacing: 0.4px; + color: #546e7a; +} + +.navBar .top .right .info .name { + position: relative; + font-family: Nunito; + font-size: 18px; + font-weight: 750; + font-style: italic; + color: #425161; +} + +.navBar .bottom { + position: relative; +} + +@media only screen and (max-width: 800px) { + .navBar .top .left { + position: absolute; + width: 100%; + height: 100%; + max-width: unset; + } + + body:not(.guest) .navBar .top .left .icon { + display: none; + } + + .navBar .top .left .title { + position: absolute; + text-align: center; + max-width: calc(100% - 180px); + left: 50%; + transform: translateX(-50%); + } + + .navBar .top .right { + width: 100%; + justify-content: space-between; + } + + body.guest .navBar .top .right { + flex-flow: row-reverse; + } + + .navBar .top .right .info { + display: none; + } } \ No newline at end of file diff --git a/assets/css/userSetting.css b/static/css/userSetting.css similarity index 99% rename from assets/css/userSetting.css rename to static/css/userSetting.css index 5bbf3fa3..c33ac38e 100644 --- a/assets/css/userSetting.css +++ b/static/css/userSetting.css @@ -1,6 +1,6 @@ /* ? |-----------------------------------------------------------------------------------------------| -? | /assets/css/userSetting.css | +? | /static/css/userSetting.css | ? | | ? | Copyright (c) 2018-2020 Belikhun. All right reserved | ? | Licensed under the MIT License. See LICENSE in the project root for license information. | diff --git a/assets/js/config.js b/static/js/config.js similarity index 99% rename from assets/js/config.js rename to static/js/config.js index 350f7c29..68b0302a 100644 --- a/assets/js/config.js +++ b/static/js/config.js @@ -1,5 +1,5 @@ //? |-----------------------------------------------------------------------------------------------| -//? | /assets/js/config.js | +//? | /static/js/config.js | //? | | //? | Copyright (c) 2018-2020 Belikhun. All right reserved | //? | Licensed under the MIT License. See LICENSE in the project root for license information. | diff --git a/assets/js/core.js b/static/js/core.js similarity index 98% rename from assets/js/core.js rename to static/js/core.js index 893274b8..c861fd23 100644 --- a/assets/js/core.js +++ b/static/js/core.js @@ -1,5 +1,5 @@ //? |-----------------------------------------------------------------------------------------------| -//? | /assets/js/core.js | +//? | /static/js/core.js | //? | | //? | Copyright (c) 2018-2020 Belikhun. All right reserved | //? | Licensed under the MIT License. See LICENSE in the project root for license information. | @@ -485,7 +485,8 @@ const core = { let updateRankTimer = new stopClock(); if (data.list.length === 0 && data.rank.length === 0) { - this.rankPanel.main.innerHTML = ""; + emptyNode(this.rankPanel); + this.previousRankHash = hash; clog("debg", "Rank Is Empty. Took", { color: flatc("blue"), @@ -515,7 +516,7 @@ const core = { > ${data.nameList[i] || i} - `; + `; out += ""; let ptotal = 0; @@ -2317,14 +2318,19 @@ const core = { sounds.confirm(1); - await myajax({ - url: "/api/contest/problems/remove", - method: "POST", - form: { - id: id, - token: API_TOKEN - } - }); + try { + await myajax({ + url: "/api/contest/problems/remove", + method: "POST", + form: { + id: id, + token: API_TOKEN + } + }); + } catch(e) { + errorHandler(e); + throw e; + } clog("okay", "Deleted Problem", { color: flatc("yellow"), @@ -2388,25 +2394,30 @@ const core = { text: data.id }); - await myajax({ - url: "/api/contest/problems/" + action, - method: "POST", - form: { - id: data.id, - name: data.name, - point: data.point, - time: data.time, - memory: data.memory, - inpType: data.inpType, - outType: data.outType, - acpt: JSON.stringify(data.accept), - img: data.image, - desc: data.desc, - attm: data.attachment, - test: JSON.stringify(data.test), - token: API_TOKEN - } - }); + try { + await myajax({ + url: "/api/contest/problems/" + action, + method: "POST", + form: { + id: data.id, + name: data.name, + point: data.point, + time: data.time, + memory: data.memory, + inpType: data.inpType, + outType: data.outType, + acpt: JSON.stringify(data.accept), + img: data.image, + desc: data.desc, + attm: data.attachment, + test: JSON.stringify(data.test), + token: API_TOKEN + } + }); + } catch(e) { + errorHandler(e); + throw e; + } }, async deleteFile(type, id, fileName = null) {