split project

README.md

@@ -1,5 +1,5 @@
 ## pc_kingdee_large_screen
 
-### 金蝶大屏项目
+### 金蝶大屏项目（人力manpower、投资中心investment、焦煤）
   
 

manpower/js/request.js

@@ -0,0 +1,179 @@
+//如果部署在同域名的话可以直接取cookie,后端需 HttpOnly 设置成否
+// var cookie_name = 'wolfking.jeesharp.session.id'
+// getCookie(cookie_name)
+
+// 是否本地环境
+function isLocalEnv() {
+  let domain = window.location.origin
+  if (['http://127.0.0.1:5500', 'file://'].includes(domain)) {
+    return true
+  } else {
+    return false
+  }
+}
+
+// api 前缀
+function getApiUrl() {
+  // 为线上时
+  if (!isLocalEnv()) {
+    return window.location.origin
+  } else {
+    // 本地时
+    // return 'http://sxtc.com:10002'        // 内网环境
+    // return 'http://10.8.8.100:10002'   // 内网环境
+    // return 'http://1.71.170.214:18080' // 线上环境
+    // return 'http://szxm.sxcig.com:8012' // 线上环境
+    // return 'http://10.0.0.27:8080'     // 超哥环境
+    // return 'http://10.0.0.22:8080'     // 闫敏的环境
+    // return 'http://10.0.0.8:8080' // 祥慧的环境
+    // return 'http://10.0.0.115:8080'    // 王蒙的环境
+	return 'http://10.0.0.82:8080'
+  }
+}
+// websocket 前缀
+function getWsUrl() {
+  let prefix = location.protocol === 'https:' ? 'wss://' : 'ws://'
+  // 为线上时
+  if (!isLocalEnv()) {
+    return prefix + window.location.host
+  } else {
+    return prefix + 'sxtc.com:10002'
+    // return prefix + '10.0.0.115:8080'
+  }
+}
+
+// minio 前缀
+function getMinioUrl() {
+  let isProduction = location.origin.indexOf('1.71.170.214') != -1
+  if (isProduction) {
+    return 'http://1.71.170.214:19000/constr-documents/'
+  } else {
+    return 'http://10.8.8.191:9000/constr-documents-test/'
+  }
+}
+
+/** axios封装
+ * 请求拦截、相应拦截、错误统一处理
+ */
+const httpRequest = axios.create({
+  baseURL: 'http://10.0.0.82:8080', // 测试环境
+  timeout: 3 * 60 * 1000, // 3分钟等待
+  withCredentials: true // 携带cookie
+})
+
+// 请求拦截器
+// httpRequest.interceptors.request.use(
+//   function (config) {
+//     if (!isLocalEnv()) {
+//       if (getQueryVariable('token')) {
+//         config.headers['access_token'] = getQueryVariable('token')
+//       }
+//     } else {
+//       config.headers['access_token'] = localStorage.getItem('token')
+//       // config.headers['access_token'] = '4b3ed521-f509-48d9-b907-ab127479df41'
+//     }
+//     // 上传文件
+//     if (config.url == '/apiSys/oss/upload') {
+//       config.headers['Content-Type'] = 'multipart/form-data'
+//     } else {
+//       config.headers['Content-Type'] = 'application/json'
+//     }
+//     return config
+//   },
+//   function (error) {
+//     return Promise.reject(error)
+//   }
+// )
+
+//响应拦截
+httpRequest.interceptors.response.use(
+  function (response) {
+    const res = response.data
+    // if (res.code == 201) {
+    //   this.ELEMENT.Message.error(res.msg)
+    //   if (!isLocalEnv()) {
+    //     // 跳登录页
+    //     window.location = window.location.origin
+    //   } else {
+    //     localEnvLogin()
+    //   }
+    // }
+    return response
+  },
+  function (error) {
+    this.ELEMENT.Message.error(error.message)
+    return Promise.reject(error)
+  }
+)
+
+function get(url, params) {
+  return new Promise((resolve, reject) => {
+    httpRequest
+      .get(url, { params: params })
+      .then(res => {
+        resolve(res.data)
+      })
+      .catch(err => {
+        reject(err.data)
+      })
+  })
+}
+// qs.stringify(data)
+function post(url, data, config) {
+  return new Promise((resolve, reject) => {
+    httpRequest
+      .post(url, data, config)
+      .then(res => {
+        resolve(res.data)
+      })
+      .catch(err => {
+        reject(err)
+      })
+  })
+}
+
+function postFile(url, blob) {
+  return new Promise((resolve, reject) => {
+    let formdata = new FormData()
+    formdata.append('multipartFile', blob)
+    httpRequest
+      .post(url, formdata)
+      .then(res => {
+        resolve(res.data)
+      })
+      .catch(err => {
+        reject(err)
+      })
+  })
+}
+
+function localEnvLogin() {
+  post(
+    '/apiSys/login',
+    {
+      username: 'admin',
+      password: '1q2w3e4r5t'
+    },
+    {
+      transformRequest: [
+        function (data, headers) {
+          // 将请求数据转换成功 formdata 接收格式
+          headers['Content-Type'] = 'application/x-www-form-urlencoded'
+          return stringify(data)
+        }
+      ]
+    }
+  ).then(res => {
+    localStorage.setItem('token', res.data.token || getQueryVariable('token'))
+  })
+}
+
+// 将参数转换成功 formdata 接收格式
+function stringify(data) {
+  let ret = ''
+  for (const it in data) {
+    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+  }
+  ret = ret.substring(0, ret.lastIndexOf('&'))
+  return ret
+}

manpower/styles/common.css

@@ -0,0 +1,745 @@
+*,
+*:before,
+*:after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+  font-size: 13px;
+  background-color: #f3f3f3;
+  font-family: 'Microsoft YaHei','Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB', Arial,sans-serif;
+  /* overflow: hidden; */
+}
+
+.flex {
+  display: flex;
+}
+.flex1 {
+  flex: 1;
+}
+.flex-around {
+  display: flex;
+  justify-content: space-around;
+}
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+.text-center {
+  text-align: center;
+}
+.font12 {
+  font-size: 12px;
+}
+.main-color {
+  color: #228af5;
+}
+.danger-color {
+  color: #f56c6c;
+}
+.btm10 {
+  margin-bottom: 10px;
+}
+.btm20 {
+  margin-bottom: 20px;
+}
+a {
+  text-decoration: none;
+  cursor: pointer;
+}
+.dialog-full-icon {
+  padding: 5px;
+  color: #fff;
+  position: absolute;
+  right: 50px;
+  top: 18px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+[v-cloak] {
+  display: none;
+}
+#app {
+  height: 100vh;
+}
+/* 头部 */
+.header {
+  height: 77px;
+  flex: 0 0 auto;
+  background-color: #fff;
+  display: flex;
+}
+.header-item {
+  padding: 15px;
+  text-align: center;
+  color: #333;
+  cursor: pointer;
+  position: relative;
+}
+.header-item p {
+ width: 150%;
+ margin-left: -25%;
+}
+.header-item:hover {
+  background-color: #cae5fb;
+  color: #228af5;
+}
+.header-item.active {
+  background-color: #cae5fb;
+  color: #228af5;
+}
+.nav-dropdown {
+  display: block;
+  font-size: 13px;
+  color: #333;
+}
+
+#designer {
+  width: 100%;
+  height: 100%;
+}
+.main-wrap {
+  height: calc(100vh - 77px);
+  padding: 10px 0;
+  flex: 1;
+}
+.main {
+  display: flex;
+  padding: 0px;
+  height: 100%;
+  margin: 0 10px;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+}
+/* 左侧 */
+.aside {
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+}
+.el-tree > .el-tree-node {
+  display: inline-block;
+  min-width: 100%;
+}
+
+/* el-tree 操作弹出 */
+.contextmenu__item {
+  display: block;
+  line-height: 34px;
+  text-align: left;
+  padding: 0 20px;
+}
+.contextmenu__item:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.menu {
+  position: fixed;
+  background-color: #fff;
+  font-size: 14px;
+  color: #444040;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  white-space: nowrap;
+  z-index: 1000;
+}
+.contextmenu__item:hover {
+  cursor: pointer;
+  background: #66b1ff;
+  border-color: #66b1ff;
+  color: #fff;
+}
+.main > div.left {
+  flex: 1;
+  overflow: hidden;
+  padding: 5px;
+}
+.main > div.right {
+  flex: 1;
+  overflow: hidden;
+  padding: 5px;
+  border-left: 1px solid #ccc;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #e8f3fe;
+}
+/* 公共弹框样式 */
+.el-dialog {
+  border-radius: 8px;
+  overflow: hidden;
+}
+.el-dialog__header {
+  padding: 15px;
+  background-color: #228af5;
+}
+
+.el-dialog__header .el-dialog__title {
+  color: #fff;
+  font-size: 16px;
+}
+.el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+  font-size: 20px;
+}
+.el-dialog__body {
+  padding: 15px;
+  border-top: 1px solid #f1f1f1;
+}
+.el-form-item--mini.el-form-item,
+.el-form-item--small.el-form-item {
+  margin-bottom: 15px;
+}
+.build-modal .el-dialog__body {
+  padding: 0;
+}
+.build-modal .el-card {
+  margin-bottom: 10px;
+}
+.build-modal .el-card p {
+  line-height: 1.6;
+}
+.build-modal .el-form {
+  flex: 0 0 300px;
+  margin-right: 30px;
+}
+.build-modal .el-card__header {
+  padding: 10px;
+  background-color: whitesmoke;
+}
+.build-modal .el-card__body {
+  padding: 15px;
+}
+.inline-inputs .el-form-item__content {
+  display: flex;
+  justify-content: space-between;
+}
+.inline-inputs .el-form-item__content span {
+  margin: 0 20px;
+}
+
+.select-box .el-radio-group {
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+}
+.select-box .el-checkbox-group {
+  display: flex;
+  flex-direction: column;
+}
+.select-box .el-radio-group label {
+  margin-bottom: 20px;
+}
+.select-box .el-checkbox-group label {
+  margin-bottom: 15px;
+}
+.nav-icon {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  margin-bottom: 3px;
+}
+.nav-icon1 {
+  background: url(../images/navs/1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon2 {
+  background: url(../images/navs/2.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon3 {
+  background: url(../images/navs/3.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon4 {
+  background: url(../images/navs/4.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon5 {
+  background: url(../images/navs/5.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon6 {
+  background: url(../images/navs/6.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon7 {
+  background: url(../images/navs/7.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon8 {
+  background: url(../images/navs/8.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon9 {
+  background: url(../images/navs/9.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon10 {
+  background: url(../images/navs/10.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.nav-icon11 {
+  background: url(../images/navs/11.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon12 {
+  background: url(../images/navs/12.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon13 {
+  background: url(../images/navs/13.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon14 {
+  background: url(../images/navs/14.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon15 {
+  background: url(../images/navs/15.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon16 {
+  background: url(../images/navs/16.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon17 {
+  background: url(../images/navs/17.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon18 {
+  background: url(../images/navs/18.png) no-repeat;
+  background-size: 100% 100%;
+}
+.nav-icon19 {
+  background: url(../images/navs/19.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tree-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 5px;
+  vertical-align: -2px;
+}
+.tree-icon01 {
+  background: url(../images/tree/project-1@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon02 {
+  background: url(../images/tree/project-2@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon03 {
+  background: url(../images/tree/project-3@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon1, .tree-icon18, .tree-icon20, .tree-icon22 {
+  background: url(../images/tree/project@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon2 {
+  background: url(../images/tree/class@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon3 {
+  background: url(../images/tree/sub-class@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon4 {
+  background: url(../images/tree/sub-class-child@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon5 {
+  background: url(../images/tree/form@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon6, .tree-icon17, .tree-icon19, .tree-icon21 {
+  background: url(../images/tree/floor@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon7 {
+  background: url(../images/tree/build@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon8 {
+  background: url(../images/tree/form8@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon9 {
+  background: url(../images/tree/floor@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon10 {
+  background: url(../images/tree/project@2x.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon11 {
+  background: url(../images/tree/tong1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon12 {
+  background: url(../images/tree/tong2.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon13 {
+  background: url(../images/tree/tong3.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon14 {
+  background: url(../images/tree/tong4.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon15 {
+  background: url(../images/tree/tong5.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon16 {
+  background: url(../images/tree/tong6.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon100 {
+  background: url(../images/tree/tong7.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon101 {
+  background: url(../images/tree/tong8.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon102 {
+  background: url(../images/tree/tong9.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon103 {
+  background: url(../images/tree/tong10.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon104 {
+  background: url(../images/tree/tong1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tree-icon105 {
+  background: url(../images/tree/tong2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tree-icon-company {
+  background: url(../images/icons/company.png) no-repeat;
+  background-size: 110% 110%;
+}
+
+
+.home-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+.home-content h1 {
+  margin-bottom: 50px;
+}
+.home-content img {
+  width: 80%;
+  height: 50%;
+}
+.dialog-nowrap {
+  pointer-events: none;
+}
+.dialog-nowrap .el-dialog {
+  pointer-events: auto;
+}
+.el-drawer__wrapper {
+  pointer-events: none;
+}
+.el-drawer__wrapper .el-drawer {
+  pointer-events: auto;
+}
+/* 新建表格tab ...限制宽度 */
+.sheet-modal .el-tabs__item {
+  max-width: 400px;
+  overflow: hidden;
+  padding: 0 15px 0 10px;
+  text-overflow: ellipsis;
+}
+/* 使用element 滚动条样式 */
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  width: 6px;
+  background: #b4bccc;
+}
+::-webkit-scrollbar-corner {
+  background: #fff;
+}
+::-webkit-scrollbar-track {
+  background: #fff;
+}
+::-webkit-scrollbar-track-piece {
+  background: #fff;
+  width: 6px;
+}
+.ribbon-button-lock {
+  background-image: url('../images/icons/lock.png');
+  background-size: 100% 100% !important;
+}
+.ribbon-button-unlock {
+  background-image: url('../images/icons/unlock.png');
+  background-size: 100% 100% !important;
+}
+.ribbon-button-tags {
+  background-image: url('../images/icons/tags.png');
+  background-size: 100% 100% !important;
+}
+.ribbon-button-check {
+  background-image: url('../images/icons/check.png');
+  background-size: 100% 100% !important;
+}
+.ribbon-button-clear-source {
+  background-image: url('../images/icons/clear.png');
+  background-size: 100% 100% !important;
+}
+.ribbon-button-select {
+  background-image: url('../images/icons/select.png');
+  background-size: 100% 100% !important;
+}
+
+.gc-ribbon-bar .ribbon-button-item.ribbon-bigbutton {
+  min-width: 40px;
+  max-width: 60px;
+  min-height: 0;
+}
+.grid-box {
+  display: flex;
+  flex-wrap: wrap;
+  border-left: 1px solid #ccc;
+}
+.grid-box > div {
+  width: 30px;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  color: #000;
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+  cursor: pointer;
+  font-size: 18px;
+}
+.grid-box > div:nth-child(n + 21) {
+  border-top: none;
+}
+.grid-box > div.checked {
+  background-color: #409eff;
+  color: #f1f1f1;
+}
+
+.char-tab .el-tabs__nav,
+.char-tab .el-tabs__content {
+  max-height: 300px;
+  overflow: auto;
+}
+.char-tab .el-tabs__item {
+  height: 25px;
+  line-height: 25px;
+  font-family: 'chars';
+}
+.char-input .el-input__inner {
+  font-family: 'chars';
+}
+.fonts {
+  font-family: 'chars';
+}
+.char-pop {
+  text-align: center;
+  height: 80px;
+  line-height: 60px;
+  width: 80px;
+  font-size: 60px;
+  font-family: 'chars';
+}
+
+/* 拖拽的线 */
+#box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /* background-color:royalblue; */
+}
+#resize {
+  width: 2px;
+  height: 100%;
+  cursor: w-resize;
+  background-color: #ccc;
+  float: left;
+  position: relative;
+}
+#resize2 {
+  height: 5px;
+  width: 100%;
+  background-color: #ccc;
+  cursor: n-resize;
+  position: relative;
+}
+#left {
+  width: 350px;
+  height: 100%;
+  /* background:skyblue; */
+  float: left;
+  overflow: auto;
+}
+#right {
+  float: right;
+  width: calc(100% - 352px);
+  height: 100%;
+  /* background:tomato; */
+  overflow: auto;
+}
+#top {
+  height: 300px;
+  width: 100%;
+  /* background:skyblue; */
+  overflow: auto;
+}
+
+#bottom {
+  height: calc(100% - 305px);
+  width: 100%;
+  /* background:tomato; */
+  overflow: auto;
+}
+.resImg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 12px;
+  height: 60px;
+  cursor: pointer;
+}
+#resize2 .resImg {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 12px;
+  width: 60px;
+  cursor: pointer;
+}
+.left-tree {
+  flex: 0 0 300px;
+  padding: 10px 10px 10px 0;
+  border: 1px solid #ccc;
+  min-height: 400px;
+  height: 100%;
+  /* margin-right: 15px;
+  border-radius: 5px; */
+  overflow: auto;
+}
+.el-table tbody tr:hover > td {
+  background-color: unset!important;
+}
+.el-table .cell {
+  line-height: 1.2;
+}
+.capacity-cell {
+  background-color: rgb(212, 243, 255);
+  position: relative;
+}
+.capacity-cell:hover .xuan-btn {
+  display: block;
+}
+.xuan-btn {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  right: 0;
+  padding: 4px;
+  display: none;
+}
+.bottom-cell {
+  position: relative;
+  padding-top: 20px!important;
+}
+.inline-input .el-input__inner {
+  padding: 0 4px;
+}
+.scheme-table.el-table .cell {
+  padding: 0 5px;
+  line-height: 1.3;
+}
+.bottom-cell:hover .opration {
+  display: block;
+}
+.opration {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  border: 1px solid #ccc;
+  line-height: 1;
+  display: none;
+}
+.opration i {
+  cursor: pointer;
+  font-size: 14px;
+  color: #409EFF;
+  border: 1px solid #409EFF;
+}
+.branch-list .el-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+.branch-list .el-radio-group label {
+  flex: 0 0 50%;
+  margin-right: 0px;
+  margin: 6px 0;
+}
+.input-number input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+.input-number input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+.input-number input[type='number']{
+  -moz-appearance: textfield;
+}
+/* table 行内编辑使用 */
+.item_input {
+  display: none;
+}
+.item_input .el-input__inner {
+  padding: 0px 2px;
+  height: 18px;
+  line-height: 18px;
+}
+.text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.is-tooltipStyle {
+  max-width: 20%;
+  color: #fff;
+  background-color: #444040;
+}

manpower/styles/normalize.css

@@ -0,0 +1,264 @@
+/* Document
+ * ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ */
+
+:where(html) {
+  line-height: 1.15; /* 1 */
+}
+
+/* Sections
+ * ========================================================================== */
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Edge, Firefox, and Safari.
+ */
+
+:where(h1) {
+  font-size: 2em;
+  margin-block-end: 0.67em;
+  margin-block-start: 0.67em;
+}
+
+/* Grouping content
+ * ========================================================================== */
+
+/**
+ * Remove the margin on nested lists in Chrome, Edge, and Safari.
+ */
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin-block-end: 0;
+  margin-block-start: 0;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Correct the inheritance of border color in Firefox.
+ */
+
+:where(hr) {
+  box-sizing: content-box; /* 1 */
+  color: inherit; /* 2 */
+  height: 0; /* 1 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+:where(pre) {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ * ========================================================================== */
+
+/**
+ * Add the correct text decoration in Safari.
+ */
+
+:where(abbr[title]) {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+:where(b, strong) {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+:where(code, kbd, samp) {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+:where(small) {
+  font-size: 80%;
+}
+
+/* Tabular data
+ * ========================================================================== */
+
+/**
+ * 1. Correct table border color in Chrome, Edge, and Safari.
+ * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
+ */
+
+:where(table) {
+  border-color: currentColor; /* 1 */
+  text-indent: 0; /* 2 */
+}
+
+/* Forms
+ * ========================================================================== */
+
+/**
+ * Remove the margin on controls in Safari.
+ */
+
+:where(button, input, select) {
+  margin: 0;
+}
+
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+
+:where(button) {
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style buttons in iOS and Safari.
+ */
+
+:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
+  -webkit-appearance: button;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Edge, and Firefox.
+ */
+
+:where(progress) {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+
+:where(select) {
+  text-transform: none;
+}
+
+/**
+ * Remove the margin in Firefox and Safari.
+ */
+
+:where(textarea) {
+  margin: 0;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+:where(input[type="search" i]) {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
+ */
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding of focus outlines in Firefox.
+ */
+
+:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus outline styles unset by the previous rule in Firefox.
+ */
+
+:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Remove the additional :invalid styles in Firefox.
+ */
+
+:where(:-moz-ui-invalid) {
+  box-shadow: none;
+}
+
+/* Interactive
+ * ========================================================================== */
+
+/*
+ * Add the correct styles in Safari.
+ */
+
+:where(dialog) {
+  background-color: white;
+  border: solid;
+  color: black;
+  height: -moz-fit-content;
+  height: fit-content;
+  left: 0;
+  margin: auto;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+:where(dialog:not([open])) {
+  display: none;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+:where(summary) {
+  display: list-item;
+}