diff --git a/package.json b/package.json index a945a056869..119c7a6018f 100644 --- a/package.json +++ b/package.json @@ -1,54 +1,84 @@ { - "name": "woocommerce-monorepo", - "title": "WooCommerce Monorepo", - "description": "Monorepo for the WooCommerce ecosystem", - "homepage": "https://woocommerce.com/", - "private": true, - "repository": { - "type": "git", - "url": "https://github.com/woocommerce/woocommerce.git" - }, - "author": "Automattic", - "license": "GPL-3.0-or-later", - "bugs": { - "url": "https://github.com/woocommerce/woocommerce/issues" - }, - "scripts": { - "preinstall": "npx only-allow pnpm", - "postinstall": "pnpm git:update-hooks", - "git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && husky install", - "create-extension": "node ./tools/create-extension/index.js" - }, - "devDependencies": { - "@automattic/nx-composer": "^0.1.0", - "@nrwl/cli": "^13.3.4", - "@nrwl/devkit": "^13.1.4", - "@nrwl/linter": "^13.3.4", - "@nrwl/tao": "13.3.4", - "@nrwl/web": "^13.3.4", - "@nrwl/workspace": "^13.3.4", - "@types/node": "14.14.33", - "@woocommerce/eslint-plugin": "workspace:*", - "@wordpress/eslint-plugin": "^11.0.0", - "@wordpress/prettier-config": "^1.1.1", - "chalk": "^4.1.2", - "glob": "^7.2.0", - "husky": "^7.0.4", - "jest": "^27.3.1", - "lint-staged": "^12.3.7", - "mkdirp": "^1.0.4", - "node-stream-zip": "^1.15.0", - "prettier": "npm:wp-prettier@^2.2.1-beta-1", - "request": "^2.88.2", - "typescript": "4.2.4" - }, - "dependencies": { - "@babel/core": "7.12.9", - "@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0", - "@wordpress/babel-preset-default": "^6.4.1", - "fs-extra": "^10.0.1", - "lodash": "^4.17.21", - "promptly": "^3.2.0", - "wp-textdomain": "1.0.1" - } + "name": "woocommerce-monorepo", + "title": "WooCommerce Monorepo", + "description": "Monorepo for the WooCommerce ecosystem", + "homepage": "https://woocommerce.com/", + "private": true, + "repository": { + "type": "git", + "url": "https://github.com/woocommerce/woocommerce.git" + }, + "author": "Automattic", + "license": "GPL-3.0-or-later", + "bugs": { + "url": "https://github.com/woocommerce/woocommerce/issues" + }, + "scripts": { + "build-storybook": "build-storybook -c ./tools/storybook/.storybook", + "preinstall": "npx only-allow pnpm", + "postinstall": "pnpm git:update-hooks", + "git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && husky install", + "storybook": "./tools/storybook/import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./tools/storybook/.storybook -p 6007 --ci", + "storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook", + "create-extension": "node ./tools/create-extension/index.js" + }, + "devDependencies": { + "@automattic/nx-composer": "^0.1.0", + "@babel/preset-env": "^7.16.11", + "@babel/runtime": "^7.17.2", + "@nrwl/cli": "^13.3.4", + "@nrwl/devkit": "^13.1.4", + "@nrwl/linter": "^13.3.4", + "@nrwl/tao": "13.3.4", + "@nrwl/web": "^13.3.4", + "@nrwl/workspace": "^13.3.4", + "@storybook/addon-a11y": "^6.4.19", + "@storybook/addon-actions": "^6.4.19", + "@storybook/addon-console": "^1.2.3", + "@storybook/addon-controls": "^6.4.19", + "@storybook/addon-docs": "^6.4.19", + "@storybook/addon-knobs": "^6.4.0", + "@storybook/addon-links": "^6.4.19", + "@storybook/addon-storysource": "^6.4.19", + "@storybook/addon-viewport": "^6.4.19", + "@storybook/addons": "^6.4.19", + "@storybook/api": "^6.4.19", + "@storybook/builder-webpack5": "^6.4.19", + "@storybook/components": "^6.4.19", + "@storybook/core-events": "^6.4.19", + "@storybook/manager-webpack5": "^6.4.19", + "@storybook/react": "^6.4.19", + "@storybook/theming": "^6.4.19", + "@types/node": "14.14.33", + "@woocommerce/eslint-plugin": "workspace:*", + "@wordpress/data": "^6.3.0", + "@wordpress/eslint-plugin": "^11.0.0", + "@wordpress/prettier-config": "^1.1.1", + "babel-loader": "^8.2.3", + "chalk": "^4.1.2", + "core-js": "^3.21.1", + "css-loader": "^6.7.0", + "glob": "^7.2.0", + "husky": "^7.0.4", + "jest": "^27.3.1", + "lint-staged": "^12.3.7", + "moment": "^2.29.1", + "mkdirp": "^1.0.4", + "node-stream-zip": "^1.15.0", + "prettier": "npm:wp-prettier@^2.2.1-beta-1", + "postcss-loader": "^3.0.0", + "regenerator-runtime": "^0.13.9", + "request": "^2.88.2", + "sass": "^1.49.9", + "sass-loader": "^10.2.1", + "typescript": "4.2.4", + "webpack": "^5.70.0" + }, + "dependencies": { + "@babel/core": "7.12.9", + "@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0", + "@wordpress/babel-preset-default": "^6.4.1", + "lodash": "^4.17.21", + "wp-textdomain": "1.0.1" + } } diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index e281bf46a71..f7149f13fde 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -12,7 +12,6 @@ "analyze": "cross-env NODE_ENV=production ANALYZE=true webpack", "prebuild": "pnpm run install-if-deps-outdated", "build": "WC_ADMIN_PHASE=core pnpm run build:feature-config && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", - "build-storybook": "build-storybook -c ./storybook/.storybook", "build:feature-config": "php ../woocommerce/bin/generate-feature-config.php", "build:packages": "cross-env NODE_ENV=production pnpm run:packages -- build", "clean": "rimraf ../woocommerce/assets/client/admin/* && pnpm run:packages -- clean --parallel", @@ -44,8 +43,6 @@ "prestart": "pnpm run install-if-deps-outdated", "start": "cross-env WC_ADMIN_PHASE=development pnpm run build:packages && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm run:packages -- start --parallel\"", "start:package": "pnpm run:packages -- start --parallel", - "storybook": "./bin/import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./storybook/.storybook -p 6007 --ci", - "storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook", "pretest": "pnpm run -s install-if-no-packages", "test": "pnpm nx build @woocommerce/js-tests && pnpm run test:client", "test-staged": "pnpm run test:client -- --bail --findRelatedTests", @@ -121,23 +118,6 @@ "@babel/preset-typescript": "^7.16.7", "@babel/runtime": "^7.17.2", "@octokit/core": "^3.5.1", - "@storybook/addon-a11y": "^6.4.19", - "@storybook/addon-actions": "^6.4.19", - "@storybook/addon-console": "^1.2.3", - "@storybook/addon-controls": "^6.4.19", - "@storybook/addon-docs": "^6.4.19", - "@storybook/addon-knobs": "^6.4.0", - "@storybook/addon-links": "^6.4.19", - "@storybook/addon-storysource": "^6.4.19", - "@storybook/addon-viewport": "^6.4.19", - "@storybook/addons": "^6.4.19", - "@storybook/api": "^6.4.19", - "@storybook/builder-webpack5": "^6.4.19", - "@storybook/components": "^6.4.19", - "@storybook/core-events": "^6.4.19", - "@storybook/manager-webpack5": "^6.4.19", - "@storybook/react": "^6.4.19", - "@storybook/theming": "^6.4.19", "@testing-library/dom": "^8.11.3", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 1a2a4536a00..483c2199d0c 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -140,7 +140,7 @@ const webpackConfig = { plugins: [ ...styleConfig.plugins, // Runs TypeScript type checker on a separate process. - new ForkTsCheckerWebpackPlugin(), + ! process.env.STORYBOOK && new ForkTsCheckerWebpackPlugin(), new CustomTemplatedPathPlugin( { modulename( outputPath, data ) { const entryName = get( data, [ 'chunk', 'name' ] ); diff --git a/plugins/woocommerce/changelog/fix-storybook-location b/plugins/woocommerce/changelog/fix-storybook-location new file mode 100644 index 00000000000..c996b22b7f3 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-storybook-location @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Move Storybook to better monorepo location diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9df70e5a7f7..1685a1a3ca2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,62 +6,116 @@ importers: specifiers: '@automattic/nx-composer': ^0.1.0 '@babel/core': 7.12.9 + '@babel/preset-env': ^7.16.11 + '@babel/runtime': ^7.17.2 '@nrwl/cli': ^13.3.4 '@nrwl/devkit': ^13.1.4 '@nrwl/linter': ^13.3.4 '@nrwl/tao': 13.3.4 '@nrwl/web': ^13.3.4 '@nrwl/workspace': ^13.3.4 + '@storybook/addon-a11y': ^6.4.19 + '@storybook/addon-actions': ^6.4.19 + '@storybook/addon-console': ^1.2.3 + '@storybook/addon-controls': ^6.4.19 + '@storybook/addon-docs': ^6.4.19 + '@storybook/addon-knobs': ^6.4.0 + '@storybook/addon-links': ^6.4.19 + '@storybook/addon-storysource': ^6.4.19 + '@storybook/addon-viewport': ^6.4.19 + '@storybook/addons': ^6.4.19 + '@storybook/api': ^6.4.19 + '@storybook/builder-webpack5': ^6.4.19 + '@storybook/components': ^6.4.19 + '@storybook/core-events': ^6.4.19 + '@storybook/manager-webpack5': ^6.4.19 + '@storybook/react': ^6.4.19 + '@storybook/theming': ^6.4.19 '@types/node': 14.14.33 '@woocommerce/eslint-plugin': workspace:* '@wordpress/babel-plugin-import-jsx-pragma': ^3.1.0 '@wordpress/babel-preset-default': ^6.4.1 + '@wordpress/data': ^6.3.0 '@wordpress/eslint-plugin': ^11.0.0 '@wordpress/prettier-config': ^1.1.1 + babel-loader: ^8.2.3 chalk: ^4.1.2 - fs-extra: ^10.0.1 + core-js: ^3.21.1 + css-loader: ^6.7.0 glob: ^7.2.0 husky: ^7.0.4 jest: ^27.3.1 lint-staged: ^12.3.7 lodash: ^4.17.21 mkdirp: ^1.0.4 + moment: ^2.29.1 node-stream-zip: ^1.15.0 + postcss-loader: ^3.0.0 prettier: npm:wp-prettier@^2.2.1-beta-1 - promptly: ^3.2.0 + regenerator-runtime: ^0.13.9 request: ^2.88.2 + sass: ^1.49.9 + sass-loader: ^10.2.1 typescript: 4.2.4 + webpack: ^5.70.0 wp-textdomain: 1.0.1 dependencies: '@babel/core': 7.12.9 '@wordpress/babel-plugin-import-jsx-pragma': 3.1.0_@babel+core@7.12.9 '@wordpress/babel-preset-default': 6.4.1 - fs-extra: 10.0.1 lodash: 4.17.21 - promptly: 3.2.0 wp-textdomain: 1.0.1 devDependencies: '@automattic/nx-composer': 0.1.0 + '@babel/preset-env': 7.16.11_@babel+core@7.12.9 + '@babel/runtime': 7.17.7 '@nrwl/cli': 13.3.5 '@nrwl/devkit': 13.3.5 '@nrwl/linter': 13.3.5_typescript@4.2.4 '@nrwl/tao': 13.3.4 '@nrwl/web': 13.3.5_42cab1dece2b2240094de84cfd414406 '@nrwl/workspace': 13.3.5_42cab1dece2b2240094de84cfd414406 + '@storybook/addon-a11y': 6.4.19 + '@storybook/addon-actions': 6.4.19 + '@storybook/addon-console': 1.2.3_@storybook+addon-actions@6.4.19 + '@storybook/addon-controls': 6.4.19_typescript@4.2.4 + '@storybook/addon-docs': 6.4.19_a84ef1f946d21a14f1015f55f0de5456 + '@storybook/addon-knobs': 6.4.0_bdb88cf577f190583d60d23c102288af + '@storybook/addon-links': 6.4.19 + '@storybook/addon-storysource': 6.4.19 + '@storybook/addon-viewport': 6.4.19 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 + '@storybook/components': 6.4.19 + '@storybook/core-events': 6.4.19 + '@storybook/manager-webpack5': 6.4.19_typescript@4.2.4 + '@storybook/react': 6.4.19_1a3cbc393c8e54a301ca95e65ea44c36 + '@storybook/theming': 6.4.19 '@types/node': 14.14.33 '@woocommerce/eslint-plugin': link:packages/js/eslint-plugin + '@wordpress/data': 6.4.1 '@wordpress/eslint-plugin': 11.0.1_e97ea7521b9baec0e8686a2ccc3f1625 '@wordpress/prettier-config': 1.1.1 + babel-loader: 8.2.3_d3f6fe5812216e437b67a6bf164a056c chalk: 4.1.2 + core-js: 3.21.1 + css-loader: 6.7.1_webpack@5.70.0 glob: 7.2.0 husky: 7.0.4 jest: 27.3.1 lint-staged: 12.3.7 mkdirp: 1.0.4 + moment: 2.29.1 node-stream-zip: 1.15.0 + postcss-loader: 3.0.0 prettier: /wp-prettier/2.2.1-beta-1 + regenerator-runtime: 0.13.9 request: 2.88.2 + sass: 1.49.9 + sass-loader: 10.2.1_sass@1.49.9+webpack@5.70.0 typescript: 4.2.4 + webpack: 5.70.0 packages/js/admin-e2e-tests: specifiers: @@ -270,14 +324,14 @@ importers: '@storybook/addon-actions': 6.4.19 '@storybook/addon-console': 1.2.3_@storybook+addon-actions@6.4.19 '@storybook/addon-controls': 6.4.19_ad5fc232a476648e022b673b2e1293fc - '@storybook/addon-docs': 6.4.19_c07d33072055753b44e1c9d473b78732 + '@storybook/addon-docs': 6.4.19_4bb52bfb586c30b5fcb8732c940fa2c0 '@storybook/addon-knobs': 6.4.0_bdb88cf577f190583d60d23c102288af '@storybook/addon-links': 6.4.19 '@storybook/addons': 6.4.19 '@storybook/api': 6.4.19 '@storybook/components': 6.4.19 '@storybook/core-events': 6.4.19 - '@storybook/react': 6.4.19_df9bce9a6d10cedcb22cc302b49e05b8 + '@storybook/react': 6.4.19_ce33fa78e84ed7674385e603320a18f7 '@storybook/theming': 6.4.19 '@testing-library/dom': 8.11.3 '@testing-library/jest-dom': 5.16.2 @@ -294,7 +348,7 @@ importers: jest-cli: 27.5.1 postcss-loader: 3.0.0 rimraf: 3.0.2 - sass-loader: 10.2.1_webpack@5.70.0 + sass-loader: 10.2.1_sass@1.49.9+webpack@5.70.0 ts-jest: 27.1.3_b64eba0a9f1c7068f7f3a75addda5ccd typescript: 4.6.2 webpack: 5.70.0_webpack-cli@3.3.12 @@ -413,7 +467,7 @@ importers: jest-cli: 27.5.1 postcss-loader: 3.0.0 rimraf: 3.0.2 - sass-loader: 10.2.1_webpack@5.70.0 + sass-loader: 10.2.1_sass@1.49.9+webpack@5.70.0 ts-jest: 27.1.3_b64eba0a9f1c7068f7f3a75addda5ccd typescript: 4.6.2 webpack: 5.70.0_webpack-cli@3.3.12 @@ -795,7 +849,7 @@ importers: '@babel/runtime': 7.17.7 '@storybook/addon-actions': 6.4.19 '@storybook/addon-console': 1.2.3_@storybook+addon-actions@6.4.19 - '@storybook/react': 6.4.19_df9bce9a6d10cedcb22cc302b49e05b8 + '@storybook/react': 6.4.19_ce33fa78e84ed7674385e603320a18f7 '@testing-library/dom': 8.11.3 '@testing-library/react': 12.1.4 '@testing-library/user-event': 13.5.0_@testing-library+dom@8.11.3 @@ -811,7 +865,7 @@ importers: jest-cli: 27.5.1 postcss-loader: 3.0.0 rimraf: 3.0.2 - sass-loader: 10.2.1_webpack@5.70.0 + sass-loader: 10.2.1_sass@1.49.9+webpack@5.70.0 ts-jest: 27.1.3_b64eba0a9f1c7068f7f3a75addda5ccd typescript: 4.6.2 webpack: 5.70.0_webpack-cli@3.3.12 @@ -1029,7 +1083,7 @@ importers: jest-cli: 27.5.1 postcss-loader: 3.0.0 rimraf: 3.0.2 - sass-loader: 10.2.1_webpack@5.70.0 + sass-loader: 10.2.1_sass@1.49.9+webpack@5.70.0 ts-jest: 27.1.3_b64eba0a9f1c7068f7f3a75addda5ccd typescript: 4.6.2 webpack: 5.70.0_webpack-cli@3.3.12 @@ -1062,7 +1116,7 @@ importers: css-loader: 3.6.0_webpack@5.70.0 mini-css-extract-plugin: 2.6.0_webpack@5.70.0 postcss-loader: 3.0.0 - sass-loader: 10.2.1_webpack@5.70.0 + sass-loader: 10.2.1_sass@1.49.9+webpack@5.70.0 webpack-remove-empty-scripts: 0.7.3_webpack@5.70.0 webpack-rtl-plugin: 2.0.0 devDependencies: @@ -1197,23 +1251,6 @@ importers: '@babel/runtime': ^7.17.2 '@octokit/core': ^3.5.1 '@react-spring/web': ^9.4.3 - '@storybook/addon-a11y': ^6.4.19 - '@storybook/addon-actions': ^6.4.19 - '@storybook/addon-console': ^1.2.3 - '@storybook/addon-controls': ^6.4.19 - '@storybook/addon-docs': ^6.4.19 - '@storybook/addon-knobs': ^6.4.0 - '@storybook/addon-links': ^6.4.19 - '@storybook/addon-storysource': ^6.4.19 - '@storybook/addon-viewport': ^6.4.19 - '@storybook/addons': ^6.4.19 - '@storybook/api': ^6.4.19 - '@storybook/builder-webpack5': ^6.4.19 - '@storybook/components': ^6.4.19 - '@storybook/core-events': ^6.4.19 - '@storybook/manager-webpack5': ^6.4.19 - '@storybook/react': ^6.4.19 - '@storybook/theming': ^6.4.19 '@testing-library/dom': ^8.11.3 '@testing-library/jest-dom': ^5.16.2 '@testing-library/react': ^12.1.3 @@ -1426,23 +1463,6 @@ importers: '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 '@babel/runtime': 7.17.7 '@octokit/core': 3.5.1 - '@storybook/addon-a11y': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/addon-actions': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/addon-console': 1.2.3_@storybook+addon-actions@6.4.19 - '@storybook/addon-controls': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/addon-docs': 6.4.19_0f3f6342a67dc2ef4115448ec44f733f - '@storybook/addon-knobs': 6.4.0_6d3fd42cc2dc28673127a5aba3ab9a43 - '@storybook/addon-links': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/addon-storysource': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/addon-viewport': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/builder-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-events': 6.4.19 - '@storybook/manager-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/react': 6.4.19_9f1f8f17cdd455b6ef8e501a921b145c - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 '@testing-library/dom': 8.11.3 '@testing-library/jest-dom': 5.16.2 '@testing-library/react': 12.1.4_react-dom@17.0.2+react@17.0.2 @@ -1628,7 +1648,7 @@ importers: '@types/node': 16.10.3 eslint: 7.32.0 globby: 11.0.4 - jscodeshift: 0.13.1 + jscodeshift: 0.13.1_@babel+preset-env@7.16.11 oclif: 2.4.5 shx: 0.3.4 ts-node: 10.5.0_e0d88945dfc7787883e9c330c9196a96 @@ -1949,6 +1969,7 @@ packages: dependencies: '@babel/helper-explode-assignable-expression': 7.16.0 '@babel/types': 7.16.0 + dev: true /@babel/helper-builder-binary-assignment-operator-visitor/7.16.7: resolution: {integrity: sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==} @@ -2007,6 +2028,19 @@ packages: browserslist: 4.18.1 semver: 6.3.0 + /@babel/helper-compilation-targets/7.17.7_@babel+core@7.12.9: + resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/compat-data': 7.17.7 + '@babel/core': 7.12.9 + '@babel/helper-validator-option': 7.16.7 + browserslist: 4.20.2 + semver: 6.3.0 + dev: true + /@babel/helper-compilation-targets/7.17.7_@babel+core@7.16.0: resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==} engines: {node: '>=6.9.0'} @@ -2078,23 +2112,6 @@ packages: - supports-color dev: true - /@babel/helper-create-class-features-plugin/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-XLwWvqEaq19zFlF5PTgOod4bUA+XbkR4WLQBct1bkzmxJGB0ZEJaoKF4c8cgH9oBtCDuYJ8BP5NB9uFiEgO5QA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.16.12 - '@babel/helper-annotate-as-pure': 7.16.0 - '@babel/helper-function-name': 7.16.0 - '@babel/helper-member-expression-to-functions': 7.16.0 - '@babel/helper-optimise-call-expression': 7.16.0 - '@babel/helper-replace-supers': 7.16.0 - '@babel/helper-split-export-declaration': 7.16.0 - transitivePeerDependencies: - - supports-color - dev: false - /@babel/helper-create-class-features-plugin/7.16.0_@babel+core@7.17.8: resolution: {integrity: sha512-XLwWvqEaq19zFlF5PTgOod4bUA+XbkR4WLQBct1bkzmxJGB0ZEJaoKF4c8cgH9oBtCDuYJ8BP5NB9uFiEgO5QA==} engines: {node: '>=6.9.0'} @@ -2112,6 +2129,24 @@ packages: - supports-color dev: true + /@babel/helper-create-class-features-plugin/7.17.6_@babel+core@7.12.9: + resolution: {integrity: sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-environment-visitor': 7.16.7 + '@babel/helper-function-name': 7.16.7 + '@babel/helper-member-expression-to-functions': 7.17.7 + '@babel/helper-optimise-call-expression': 7.16.7 + '@babel/helper-replace-supers': 7.16.7 + '@babel/helper-split-export-declaration': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + /@babel/helper-create-class-features-plugin/7.17.6_@babel+core@7.16.0: resolution: {integrity: sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==} engines: {node: '>=6.9.0'} @@ -2208,6 +2243,39 @@ packages: '@babel/helper-annotate-as-pure': 7.16.0 regexpu-core: 4.8.0 + /@babel/helper-create-regexp-features-plugin/7.17.0_@babel+core@7.12.9: + resolution: {integrity: sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-annotate-as-pure': 7.16.7 + regexpu-core: 5.0.1 + dev: true + + /@babel/helper-create-regexp-features-plugin/7.17.0_@babel+core@7.16.0: + resolution: {integrity: sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-annotate-as-pure': 7.16.7 + regexpu-core: 5.0.1 + dev: true + + /@babel/helper-create-regexp-features-plugin/7.17.0_@babel+core@7.16.12: + resolution: {integrity: sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.16.12 + '@babel/helper-annotate-as-pure': 7.16.7 + regexpu-core: 5.0.1 + dev: false + /@babel/helper-create-regexp-features-plugin/7.17.0_@babel+core@7.17.8: resolution: {integrity: sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==} engines: {node: '>=6.9.0'} @@ -2307,6 +2375,60 @@ packages: transitivePeerDependencies: - supports-color + /@babel/helper-define-polyfill-provider/0.3.1_@babel+core@7.12.9: + resolution: {integrity: sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==} + peerDependencies: + '@babel/core': ^7.4.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.12.9 + '@babel/helper-module-imports': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/traverse': 7.17.3 + debug: 4.3.4 + lodash.debounce: 4.0.8 + resolve: 1.20.0 + semver: 6.3.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/helper-define-polyfill-provider/0.3.1_@babel+core@7.16.0: + resolution: {integrity: sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==} + peerDependencies: + '@babel/core': ^7.4.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.0 + '@babel/helper-module-imports': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/traverse': 7.17.3 + debug: 4.3.4 + lodash.debounce: 4.0.8 + resolve: 1.20.0 + semver: 6.3.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/helper-define-polyfill-provider/0.3.1_@babel+core@7.16.12: + resolution: {integrity: sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==} + peerDependencies: + '@babel/core': ^7.4.0-0 + dependencies: + '@babel/core': 7.16.12 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.12 + '@babel/helper-module-imports': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/traverse': 7.17.3 + debug: 4.3.4 + lodash.debounce: 4.0.8 + resolve: 1.20.0 + semver: 6.3.0 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/helper-define-polyfill-provider/0.3.1_@babel+core@7.17.8: resolution: {integrity: sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==} peerDependencies: @@ -2317,7 +2439,7 @@ packages: '@babel/helper-module-imports': 7.16.7 '@babel/helper-plugin-utils': 7.16.7 '@babel/traverse': 7.17.3 - debug: 4.3.3 + debug: 4.3.4 lodash.debounce: 4.0.8 resolve: 1.20.0 semver: 6.3.0 @@ -2335,6 +2457,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.16.0 + dev: true /@babel/helper-explode-assignable-expression/7.16.7: resolution: {integrity: sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==} @@ -2469,6 +2592,7 @@ packages: '@babel/types': 7.16.0 transitivePeerDependencies: - supports-color + dev: true /@babel/helper-remap-async-to-generator/7.16.8: resolution: {integrity: sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==} @@ -2559,6 +2683,7 @@ packages: '@babel/types': 7.17.0 transitivePeerDependencies: - supports-color + dev: true /@babel/helper-wrap-function/7.16.8: resolution: {integrity: sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==} @@ -2642,8 +2767,28 @@ packages: '@babel/helper-plugin-utils': 7.16.7 dev: true - /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.16.2_@babel+core@7.16.12: - resolution: {integrity: sha512-h37CvpLSf8gb2lIJ2CgC3t+EjFbi0t8qS7LCS1xcJIlEXE4czlofwaW7W1HA8zpgOCzI9C1nmoqNR1zWkk0pQg==} + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 @@ -2673,8 +2818,32 @@ packages: '@babel/plugin-proposal-optional-chaining': 7.16.0_@babel+core@7.16.0 dev: true - /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-4tcFwwicpWTrpl9qjf7UsoosaArgImF85AxqCRZlgc3IQDvkUHjJpruXAL58Wmj+T6fypWTC/BakfEkwIL/pwA==} + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.13.0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.12.9 + dev: true + + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.13.0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.16.0 + dev: true + + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.13.0 @@ -2682,7 +2851,7 @@ packages: '@babel/core': 7.16.12 '@babel/helper-plugin-utils': 7.16.7 '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 - '@babel/plugin-proposal-optional-chaining': 7.16.0_@babel+core@7.16.12 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.16.12 dev: false /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.16.7_@babel+core@7.17.8: @@ -2724,15 +2893,43 @@ packages: - supports-color dev: true - /@babel/plugin-proposal-async-generator-functions/7.16.4_@babel+core@7.16.12: - resolution: {integrity: sha512-/CUekqaAaZCQHleSK/9HajvcD/zdnJiKRiuUFq8ITE+0HsPzquf53cpFiqAwl/UfmJbR6n5uGPQSPdrmKOvHHg==} + /@babel/plugin-proposal-async-generator-functions/7.16.8_@babel+core@7.12.9: + resolution: {integrity: sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-remap-async-to-generator': 7.16.8 + '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.12.9 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-async-generator-functions/7.16.8_@babel+core@7.16.0: + resolution: {integrity: sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-remap-async-to-generator': 7.16.8 + '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.16.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-async-generator-functions/7.16.8_@babel+core@7.16.12: + resolution: {integrity: sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 - '@babel/helper-remap-async-to-generator': 7.16.4 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-remap-async-to-generator': 7.16.8 '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.16.12 transitivePeerDependencies: - supports-color @@ -2777,6 +2974,19 @@ packages: - supports-color dev: true + /@babel/plugin-proposal-class-properties/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + /@babel/plugin-proposal-class-properties/7.16.7_@babel+core@7.16.0: resolution: {integrity: sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==} engines: {node: '>=6.9.0'} @@ -2829,8 +3039,36 @@ packages: - supports-color dev: true - /@babel/plugin-proposal-class-static-block/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-mAy3sdcY9sKAkf3lQbDiv3olOfiLqI51c9DR9b19uMoR2Z6r5pmGl7dfNFqEvqOyqbf1ta4lknK4gc5PJn3mfA==} + /@babel/plugin-proposal-class-static-block/7.17.6_@babel+core@7.12.9: + resolution: {integrity: sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.12.0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.12.9 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-class-static-block/7.17.6_@babel+core@7.16.0: + resolution: {integrity: sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.12.0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.16.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-class-static-block/7.17.6_@babel+core@7.16.12: + resolution: {integrity: sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.12.0 @@ -2906,14 +3144,36 @@ packages: '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-dynamic-import/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-QGSA6ExWk95jFQgwz5GQ2Dr95cf7eI7TKutIXXTb7B1gCLTCz5hTjFTQGfLFBBiC5WSNi7udNwWsqbbMh1c4yQ==} + /@babel/plugin-proposal-dynamic-import/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-dynamic-import/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-dynamic-import/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.12 dev: false @@ -2960,14 +3220,36 @@ packages: '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-export-namespace-from/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-CjI4nxM/D+5wCnhD11MHB1AwRSAYeDT+h8gCdcVJZ/OK7+wRzFsf7PFPWVpVpNRkHMmMkQWAHpTq+15IXQ1diA==} + /@babel/plugin-proposal-export-namespace-from/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-export-namespace-from/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-export-namespace-from/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.16.12 dev: false @@ -3003,14 +3285,36 @@ packages: '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-json-strings/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-kouIPuiv8mSi5JkEhzApg5Gn6hFyKPnlkO0a9YSzqRurH8wYzSlf6RJdzluAsbqecdW5pBvDJDfyDIUR/vLxvg==} + /@babel/plugin-proposal-json-strings/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-json-strings/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-json-strings/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.16.12 dev: false @@ -3046,14 +3350,36 @@ packages: '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-logical-assignment-operators/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-pbW0fE30sVTYXXm9lpVQQ/Vc+iTeQKiXlaNRZPPN2A2VdlWyAtsUrsQ3xydSlDW00TFMK7a8m3cDTkBF5WnV3Q==} + /@babel/plugin-proposal-logical-assignment-operators/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-logical-assignment-operators/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-logical-assignment-operators/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.16.12 dev: false @@ -3089,14 +3415,36 @@ packages: '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-nullish-coalescing-operator/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-3bnHA8CAFm7cG93v8loghDYyQ8r97Qydf63BeYiGgYbjKKB/XP53W15wfRC7dvKfoiJ34f6Rbyyx2btExc8XsQ==} + /@babel/plugin-proposal-nullish-coalescing-operator/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-nullish-coalescing-operator/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-nullish-coalescing-operator/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.16.12 dev: false @@ -3132,14 +3480,36 @@ packages: '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-numeric-separator/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-FAhE2I6mjispy+vwwd6xWPyEx3NYFS13pikDBWUAFGZvq6POGs5eNchw8+1CYoEgBl9n11I3NkzD7ghn25PQ9Q==} + /@babel/plugin-proposal-numeric-separator/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-numeric-separator/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-numeric-separator/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.16.12 dev: false @@ -3192,18 +3562,46 @@ packages: '@babel/plugin-transform-parameters': 7.16.3_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-object-rest-spread/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-LU/+jp89efe5HuWJLmMmFG0+xbz+I2rSI7iLc1AlaeSMDMOGzWlc5yJrMN1d04osXN4sSfpo4O+azkBNBes0jg==} + /@babel/plugin-proposal-object-rest-spread/7.17.3_@babel+core@7.12.9: + resolution: {integrity: sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/compat-data': 7.16.4 + '@babel/compat-data': 7.17.7 + '@babel/core': 7.12.9 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-object-rest-spread/7.17.3_@babel+core@7.16.0: + resolution: {integrity: sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/compat-data': 7.17.7 + '@babel/core': 7.16.0 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-object-rest-spread/7.17.3_@babel+core@7.16.12: + resolution: {integrity: sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/compat-data': 7.17.7 '@babel/core': 7.16.12 - '@babel/helper-compilation-targets': 7.16.3_@babel+core@7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.12 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-transform-parameters': 7.16.3_@babel+core@7.16.12 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.16.12 dev: false /@babel/plugin-proposal-object-rest-spread/7.17.3_@babel+core@7.17.8: @@ -3241,14 +3639,36 @@ packages: '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-optional-catch-binding/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-kicDo0A/5J0nrsCPbn89mTG3Bm4XgYi0CZtvex9Oyw7gGZE3HXGD0zpQNH+mo+tEfbo8wbmMvJftOwpmPy7aVw==} + /@babel/plugin-proposal-optional-catch-binding/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-optional-catch-binding/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-optional-catch-binding/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.16.12 dev: false @@ -3286,14 +3706,38 @@ packages: '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.0 dev: true - /@babel/plugin-proposal-optional-chaining/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-Y4rFpkZODfHrVo70Uaj6cC1JJOt3Pp0MdWSwIKtb8z1/lsjl9AmnB7ErRFV+QNGIfcY1Eruc2UMx5KaRnXjMyg==} + /@babel/plugin-proposal-optional-chaining/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 + '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.12.9 + dev: true + + /@babel/plugin-proposal-optional-chaining/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 + '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.0 + dev: true + + /@babel/plugin-proposal-optional-chaining/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.12 dev: false @@ -3335,15 +3779,41 @@ packages: - supports-color dev: true - /@babel/plugin-proposal-private-methods/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-IvHmcTHDFztQGnn6aWq4t12QaBXTKr1whF/dgp9kz84X6GUcwq9utj7z2wFCUfeOup/QKnOlt2k0zxkGFx9ubg==} + /@babel/plugin-proposal-private-methods/7.16.11_@babel+core@7.12.9: + resolution: {integrity: sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-private-methods/7.16.11_@babel+core@7.16.0: + resolution: {integrity: sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-private-methods/7.16.11_@babel+core@7.16.12: + resolution: {integrity: sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-create-class-features-plugin': 7.16.0_@babel+core@7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.16.12 + '@babel/helper-plugin-utils': 7.16.7 transitivePeerDependencies: - supports-color dev: false @@ -3375,8 +3845,38 @@ packages: - supports-color dev: true - /@babel/plugin-proposal-private-property-in-object/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-3jQUr/HBbMVZmi72LpjQwlZ55i1queL8KcDTQEkAHihttJnAPrcvG9ZNXIfsd2ugpizZo595egYV6xy+pv4Ofw==} + /@babel/plugin-proposal-private-property-in-object/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.12.9 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-private-property-in-object/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-proposal-private-property-in-object/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 @@ -3447,6 +3947,39 @@ packages: '@babel/helper-create-regexp-features-plugin': 7.16.0_@babel+core@7.17.8 '@babel/helper-plugin-utils': 7.14.5 + /@babel/plugin-proposal-unicode-property-regex/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==} + engines: {node: '>=4'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-proposal-unicode-property-regex/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==} + engines: {node: '>=4'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-proposal-unicode-property-regex/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==} + engines: {node: '>=4'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.12 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.12 + '@babel/helper-plugin-utils': 7.16.7 + dev: false + /@babel/plugin-proposal-unicode-property-regex/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==} engines: {node: '>=4'} @@ -3558,6 +4091,16 @@ packages: '@babel/core': 7.17.8 '@babel/helper-plugin-utils': 7.14.5 + /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.12.9: + resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.16.0: resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} engines: {node: '>=6.9.0'} @@ -3687,6 +4230,16 @@ packages: '@babel/core': 7.17.8 '@babel/helper-plugin-utils': 7.14.5 + /@babel/plugin-syntax-flow/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-UDo3YGQO0jH6ytzVwgSLv9i/CzMcUjbKenL67dTrAZPPv6GFAtDhe6jqnvmoKzC/7htNTohhos+onPtDMqJwaQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + /@babel/plugin-syntax-flow/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-UDo3YGQO0jH6ytzVwgSLv9i/CzMcUjbKenL67dTrAZPPv6GFAtDhe6jqnvmoKzC/7htNTohhos+onPtDMqJwaQ==} engines: {node: '>=6.9.0'} @@ -3804,6 +4357,16 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: false + /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==} engines: {node: '>=6.9.0'} @@ -4011,6 +4574,16 @@ packages: '@babel/core': 7.17.8 '@babel/helper-plugin-utils': 7.14.5 + /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.12.9: + resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.16.0: resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} engines: {node: '>=6.9.0'} @@ -4125,14 +4698,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-arrow-functions/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-vIFb5250Rbh7roWARvCLvIJ/PtAU5Lhv7BtZ1u24COwpI9Ypjsh+bZcKk6rlIyalK+r0jOc1XQ8I4ovNxNrWrA==} + /@babel/plugin-transform-arrow-functions/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-arrow-functions/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-arrow-functions/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-arrow-functions/7.16.7_@babel+core@7.17.8: @@ -4172,16 +4765,44 @@ packages: - supports-color dev: true - /@babel/plugin-transform-async-to-generator/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-PbIr7G9kR8tdH6g8Wouir5uVjklETk91GMVSUq+VaOgiinbCkBP6Q7NN/suM/QutZkMJMvcyAriogcYAdhg8Gw==} + /@babel/plugin-transform-async-to-generator/7.16.8_@babel+core@7.12.9: + resolution: {integrity: sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-module-imports': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-remap-async-to-generator': 7.16.8 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-async-to-generator/7.16.8_@babel+core@7.16.0: + resolution: {integrity: sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-module-imports': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-remap-async-to-generator': 7.16.8 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-async-to-generator/7.16.8_@babel+core@7.16.12: + resolution: {integrity: sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-module-imports': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 - '@babel/helper-remap-async-to-generator': 7.16.4 + '@babel/helper-module-imports': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-remap-async-to-generator': 7.16.8 transitivePeerDependencies: - supports-color dev: false @@ -4219,14 +4840,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-block-scoped-functions/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-V14As3haUOP4ZWrLJ3VVx5rCnrYhMSHN/jX7z6FAt5hjRkLsb0snPCmJwSOML5oxkKO4FNoNv7V5hw/y2bjuvg==} + /@babel/plugin-transform-block-scoped-functions/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-block-scoped-functions/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-block-scoped-functions/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-block-scoped-functions/7.16.7_@babel+core@7.17.8: @@ -4258,14 +4899,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-block-scoping/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-27n3l67/R3UrXfizlvHGuTwsRIFyce3D/6a37GRxn28iyTPvNXaW4XvznexRh1zUNLPjbLL22Id0XQElV94ruw==} + /@babel/plugin-transform-block-scoping/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-block-scoping/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-block-scoping/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-block-scoping/7.16.7_@babel+core@7.17.8: @@ -4313,19 +4974,58 @@ packages: - supports-color dev: true - /@babel/plugin-transform-classes/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-HUxMvy6GtAdd+GKBNYDWCIA776byUQH8zjnfjxwT1P1ARv/wFu8eBDpmXQcLS/IwRtrxIReGiplOwMeyO7nsDQ==} + /@babel/plugin-transform-classes/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-environment-visitor': 7.16.7 + '@babel/helper-function-name': 7.16.7 + '@babel/helper-optimise-call-expression': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-replace-supers': 7.16.7 + '@babel/helper-split-export-declaration': 7.16.7 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-classes/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-environment-visitor': 7.16.7 + '@babel/helper-function-name': 7.16.7 + '@babel/helper-optimise-call-expression': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-replace-supers': 7.16.7 + '@babel/helper-split-export-declaration': 7.16.7 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-classes/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-annotate-as-pure': 7.16.0 - '@babel/helper-function-name': 7.16.0 - '@babel/helper-optimise-call-expression': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 - '@babel/helper-replace-supers': 7.16.0 - '@babel/helper-split-export-declaration': 7.16.0 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-environment-visitor': 7.16.7 + '@babel/helper-function-name': 7.16.7 + '@babel/helper-optimise-call-expression': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-replace-supers': 7.16.7 + '@babel/helper-split-export-declaration': 7.16.7 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -4369,14 +5069,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-computed-properties/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-63l1dRXday6S8V3WFY5mXJwcRAnPYxvFfTlt67bwV1rTyVTM5zrp0DBBb13Kl7+ehkCVwIZPumPpFP/4u70+Tw==} + /@babel/plugin-transform-computed-properties/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-computed-properties/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-computed-properties/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-computed-properties/7.16.7_@babel+core@7.17.8: @@ -4408,14 +5128,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-destructuring/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-Q7tBUwjxLTsHEoqktemHBMtb3NYwyJPTJdM+wDwb0g8PZ3kQUIzNvwD5lPaqW/p54TXBc/MXZu9Jr7tbUEUM8Q==} + /@babel/plugin-transform-destructuring/7.17.7_@babel+core@7.12.9: + resolution: {integrity: sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-destructuring/7.17.7_@babel+core@7.16.0: + resolution: {integrity: sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-destructuring/7.17.7_@babel+core@7.16.12: + resolution: {integrity: sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-destructuring/7.17.7_@babel+core@7.17.8: @@ -4470,6 +5210,39 @@ packages: '@babel/helper-create-regexp-features-plugin': 7.16.0_@babel+core@7.17.8 '@babel/helper-plugin-utils': 7.14.5 + /@babel/plugin-transform-dotall-regex/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-dotall-regex/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-dotall-regex/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.12 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.12 + '@babel/helper-plugin-utils': 7.16.7 + dev: false + /@babel/plugin-transform-dotall-regex/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==} engines: {node: '>=6.9.0'} @@ -4500,14 +5273,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-duplicate-keys/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-LIe2kcHKAZOJDNxujvmp6z3mfN6V9lJxubU4fJIGoQCkKe3Ec2OcbdlYP+vW++4MpxwG0d1wSDOJtQW5kLnkZQ==} + /@babel/plugin-transform-duplicate-keys/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-duplicate-keys/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-duplicate-keys/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-duplicate-keys/7.16.7_@babel+core@7.17.8: @@ -4541,15 +5334,37 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-exponentiation-operator/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-OwYEvzFI38hXklsrbNivzpO3fh87skzx8Pnqi4LoSYeav0xHlueSoCJrSgTPfnbyzopo5b3YVAJkFIcUpK2wsw==} + /@babel/plugin-transform-exponentiation-operator/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-builder-binary-assignment-operator-visitor': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-exponentiation-operator/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-builder-binary-assignment-operator-visitor': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-exponentiation-operator/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-builder-binary-assignment-operator-visitor': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-builder-binary-assignment-operator-visitor': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-exponentiation-operator/7.16.7_@babel+core@7.17.8: @@ -4562,6 +5377,17 @@ packages: '@babel/helper-builder-binary-assignment-operator-visitor': 7.16.7 '@babel/helper-plugin-utils': 7.16.7 + /@babel/plugin-transform-flow-strip-types/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-mzmCq3cNsDpZZu9FADYYyfZJIOrSONmHcop2XEKPdBNMa4PDC4eEvcOvzZaCNcjKu72v0XQlA5y1g58aLRXdYg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-flow': 7.16.7_@babel+core@7.12.9 + dev: true + /@babel/plugin-transform-flow-strip-types/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-mzmCq3cNsDpZZu9FADYYyfZJIOrSONmHcop2XEKPdBNMa4PDC4eEvcOvzZaCNcjKu72v0XQlA5y1g58aLRXdYg==} engines: {node: '>=6.9.0'} @@ -4593,14 +5419,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-for-of/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-5QKUw2kO+GVmKr2wMYSATCTTnHyscl6sxFRAY+rvN7h7WB0lcG0o4NoV6ZQU32OZGVsYUsfLGgPQpDFdkfjlJQ==} + /@babel/plugin-transform-for-of/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-for-of/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-for-of/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-for-of/7.16.7_@babel+core@7.17.8: @@ -4634,15 +5480,40 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-function-name/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-lBzMle9jcOXtSOXUpc7tvvTpENu/NuekNJVova5lCCWCV9/U1ho2HH2y0p6mBg8fPm/syEAbfaaemYGOHCY3mg==} + /@babel/plugin-transform-function-name/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.12.9 + '@babel/helper-function-name': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-function-name/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.0 + '@babel/helper-function-name': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-function-name/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-function-name': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.12 + '@babel/helper-function-name': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-function-name/7.16.7_@babel+core@7.17.8: @@ -4676,14 +5547,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-literals/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-gQDlsSF1iv9RU04clgXqRjrPyyoJMTclFt3K1cjLmTKikc0s/6vE3hlDeEVC71wLTRu72Fq7650kABrdTc2wMQ==} + /@babel/plugin-transform-literals/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-literals/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-literals/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-literals/7.16.7_@babel+core@7.17.8: @@ -4715,14 +5606,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-member-expression-literals/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-WRpw5HL4Jhnxw8QARzRvwojp9MIE7Tdk3ez6vRyUk1MwgjJN0aNpRoXainLR5SgxmoXx/vsXGZ6OthP6t/RbUg==} + /@babel/plugin-transform-member-expression-literals/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-member-expression-literals/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-member-expression-literals/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-member-expression-literals/7.16.7_@babel+core@7.17.8: @@ -4762,15 +5673,43 @@ packages: - supports-color dev: true - /@babel/plugin-transform-modules-amd/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-rWFhWbCJ9Wdmzln1NmSCqn7P0RAD+ogXG/bd9Kg5c7PKWkJtkiXmYsMBeXjDlzHpVTJ4I/hnjs45zX4dEv81xw==} + /@babel/plugin-transform-modules-amd/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + babel-plugin-dynamic-import-node: 2.3.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-amd/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + babel-plugin-dynamic-import-node: 2.3.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-amd/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-module-transforms': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 babel-plugin-dynamic-import-node: 2.3.3 transitivePeerDependencies: - supports-color @@ -4819,16 +5758,46 @@ packages: - supports-color dev: true - /@babel/plugin-transform-modules-commonjs/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-Dzi+NWqyEotgzk/sb7kgQPJQf7AJkQBWsVp1N6JWc1lBVo0vkElUnGdr1PzUBmfsCCN5OOFya3RtpeHk15oLKQ==} + /@babel/plugin-transform-modules-commonjs/7.17.7_@babel+core@7.12.9: + resolution: {integrity: sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-simple-access': 7.17.7 + babel-plugin-dynamic-import-node: 2.3.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-commonjs/7.17.7_@babel+core@7.16.0: + resolution: {integrity: sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-simple-access': 7.17.7 + babel-plugin-dynamic-import-node: 2.3.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-commonjs/7.17.7_@babel+core@7.16.12: + resolution: {integrity: sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-module-transforms': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 - '@babel/helper-simple-access': 7.16.0 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-simple-access': 7.17.7 babel-plugin-dynamic-import-node: 2.3.3 transitivePeerDependencies: - supports-color @@ -4880,17 +5849,49 @@ packages: - supports-color dev: true - /@babel/plugin-transform-modules-systemjs/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-yuGBaHS3lF1m/5R+6fjIke64ii5luRUg97N2wr+z1sF0V+sNSXPxXDdEEL/iYLszsN5VKxVB1IPfEqhzVpiqvg==} + /@babel/plugin-transform-modules-systemjs/7.17.8_@babel+core@7.12.9: + resolution: {integrity: sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-hoist-variables': 7.16.7 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-validator-identifier': 7.16.7 + babel-plugin-dynamic-import-node: 2.3.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-systemjs/7.17.8_@babel+core@7.16.0: + resolution: {integrity: sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-hoist-variables': 7.16.7 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-validator-identifier': 7.16.7 + babel-plugin-dynamic-import-node: 2.3.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-systemjs/7.17.8_@babel+core@7.16.12: + resolution: {integrity: sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-hoist-variables': 7.16.0 - '@babel/helper-module-transforms': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 - '@babel/helper-validator-identifier': 7.15.7 + '@babel/helper-hoist-variables': 7.16.7 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-validator-identifier': 7.16.7 babel-plugin-dynamic-import-node: 2.3.3 transitivePeerDependencies: - supports-color @@ -4937,15 +5938,41 @@ packages: - supports-color dev: true - /@babel/plugin-transform-modules-umd/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-nx4f6no57himWiHhxDM5pjwhae5vLpTK2zCnDH8+wNLJy0TVER/LJRHl2bkt6w9Aad2sPD5iNNoUpY3X9sTGDg==} + /@babel/plugin-transform-modules-umd/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-umd/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-modules-umd/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-module-transforms': 7.16.0 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-module-transforms': 7.17.7 + '@babel/helper-plugin-utils': 7.16.7 transitivePeerDependencies: - supports-color dev: false @@ -4982,14 +6009,34 @@ packages: '@babel/helper-create-regexp-features-plugin': 7.16.0_@babel+core@7.16.0 dev: true - /@babel/plugin-transform-named-capturing-groups-regex/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-LogN88uO+7EhxWc8WZuQ8vxdSyVGxhkh8WTC3tzlT8LccMuQdA81e9SGV6zY7kY2LjDhhDOFdQVxdGwPyBCnvg==} + /@babel/plugin-transform-named-capturing-groups-regex/7.16.8_@babel+core@7.12.9: + resolution: {integrity: sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.12.9 + dev: true + + /@babel/plugin-transform-named-capturing-groups-regex/7.16.8_@babel+core@7.16.0: + resolution: {integrity: sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.0 + dev: true + + /@babel/plugin-transform-named-capturing-groups-regex/7.16.8_@babel+core@7.16.12: + resolution: {integrity: sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-create-regexp-features-plugin': 7.16.0_@babel+core@7.16.12 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.12 dev: false /@babel/plugin-transform-named-capturing-groups-regex/7.16.8_@babel+core@7.17.8: @@ -5021,14 +6068,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-new-target/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-fhjrDEYv2DBsGN/P6rlqakwRwIp7rBGLPbrKxwh7oVt5NNkIhZVOY2GRV+ULLsQri1bDqwDWnU3vhlmx5B2aCw==} + /@babel/plugin-transform-new-target/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-new-target/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-new-target/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-new-target/7.16.7_@babel+core@7.17.8: @@ -5066,15 +6133,41 @@ packages: - supports-color dev: true - /@babel/plugin-transform-object-super/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-fds+puedQHn4cPLshoHcR1DTMN0q1V9ou0mUjm8whx9pGcNvDrVVrgw+KJzzCaiTdaYhldtrUps8DWVMgrSEyg==} + /@babel/plugin-transform-object-super/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-replace-supers': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-object-super/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-replace-supers': 7.16.7 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/plugin-transform-object-super/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 - '@babel/helper-replace-supers': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-replace-supers': 7.16.7 transitivePeerDependencies: - supports-color dev: false @@ -5111,16 +6204,6 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-parameters/7.16.3_@babel+core@7.16.12: - resolution: {integrity: sha512-3MaDpJrOXT1MZ/WCmkOFo7EtmVVC8H4EUZVrHvFOsmwkk4lOjQj8rzv8JKUZV4YoQKeoIgk07GO+acPU9IMu/w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 - dev: false - /@babel/plugin-transform-parameters/7.16.7_@babel+core@7.12.9: resolution: {integrity: sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==} engines: {node: '>=6.9.0'} @@ -5131,6 +6214,26 @@ packages: '@babel/helper-plugin-utils': 7.16.7 dev: true + /@babel/plugin-transform-parameters/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-parameters/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.12 + '@babel/helper-plugin-utils': 7.16.7 + dev: false + /@babel/plugin-transform-parameters/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==} engines: {node: '>=6.9.0'} @@ -5160,14 +6263,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-property-literals/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-XLldD4V8+pOqX2hwfWhgwXzGdnDOThxaNTgqagOcpBgIxbUvpgU2FMvo5E1RyHbk756WYgdbS0T8y0Cj9FKkWQ==} + /@babel/plugin-transform-property-literals/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-property-literals/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-property-literals/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-property-literals/7.16.7_@babel+core@7.17.8: @@ -5189,6 +6312,16 @@ packages: '@babel/helper-plugin-utils': 7.16.7 dev: true + /@babel/plugin-transform-react-display-name/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + /@babel/plugin-transform-react-display-name/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==} engines: {node: '>=6.9.0'} @@ -5199,6 +6332,16 @@ packages: '@babel/helper-plugin-utils': 7.16.7 dev: true + /@babel/plugin-transform-react-jsx-development/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.12.9 + dev: true + /@babel/plugin-transform-react-jsx-development/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==} engines: {node: '>=6.9.0'} @@ -5251,6 +6394,20 @@ packages: '@babel/types': 7.16.0 dev: false + /@babel/plugin-transform-react-jsx/7.17.3_@babel+core@7.12.9: + resolution: {integrity: sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-module-imports': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/plugin-syntax-jsx': 7.16.7_@babel+core@7.12.9 + '@babel/types': 7.17.0 + dev: true + /@babel/plugin-transform-react-jsx/7.17.3_@babel+core@7.17.8: resolution: {integrity: sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==} engines: {node: '>=6.9.0'} @@ -5264,6 +6421,17 @@ packages: '@babel/plugin-syntax-jsx': 7.16.7_@babel+core@7.17.8 '@babel/types': 7.17.0 + /@babel/plugin-transform-react-pure-annotations/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-annotate-as-pure': 7.16.7 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + /@babel/plugin-transform-react-pure-annotations/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==} engines: {node: '>=6.9.0'} @@ -5295,8 +6463,28 @@ packages: regenerator-transform: 0.14.5 dev: true - /@babel/plugin-transform-regenerator/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-JAvGxgKuwS2PihiSFaDrp94XOzzTUeDeOQlcKzVAyaPap7BnZXK/lvMDiubkPTdotPKOIZq9xWXWnggUMYiExg==} + /@babel/plugin-transform-regenerator/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + regenerator-transform: 0.14.5 + dev: true + + /@babel/plugin-transform-regenerator/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + regenerator-transform: 0.14.5 + dev: true + + /@babel/plugin-transform-regenerator/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 @@ -5334,14 +6522,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-reserved-words/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-Dgs8NNCehHSvXdhEhln8u/TtJxfVwGYCgP2OOr5Z3Ar+B+zXicEOKNTyc+eca2cuEOMtjW6m9P9ijOt8QdqWkg==} + /@babel/plugin-transform-reserved-words/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-reserved-words/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-reserved-words/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-reserved-words/7.16.7_@babel+core@7.17.8: @@ -5440,14 +6648,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-shorthand-properties/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-iVb1mTcD8fuhSv3k99+5tlXu5N0v8/DPm2mO3WACLG6al1CGZH7v09HJyUb1TtYl/Z+KrM6pHSIJdZxP5A+xow==} + /@babel/plugin-transform-shorthand-properties/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-shorthand-properties/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-shorthand-properties/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-shorthand-properties/7.16.7_@babel+core@7.17.8: @@ -5481,14 +6709,36 @@ packages: '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 dev: true - /@babel/plugin-transform-spread/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-Ao4MSYRaLAQczZVp9/7E7QHsCuK92yHRrmVNRe/SlEJjhzivq0BSn8mEraimL8wizHZ3fuaHxKH0iwzI13GyGg==} + /@babel/plugin-transform-spread/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 + dev: true + + /@babel/plugin-transform-spread/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 + dev: true + + /@babel/plugin-transform-spread/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 '@babel/helper-skip-transparent-expression-wrappers': 7.16.0 dev: false @@ -5522,14 +6772,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-sticky-regex/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-/ntT2NljR9foobKk4E/YyOSwcGUXtYWv5tinMK/3RkypyNBNdhHUaq6Orw5DWq9ZcNlS03BIlEALFeQgeVAo4Q==} + /@babel/plugin-transform-sticky-regex/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-sticky-regex/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-sticky-regex/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-sticky-regex/7.16.7_@babel+core@7.17.8: @@ -5561,14 +6831,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-template-literals/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-Rd4Ic89hA/f7xUSJQk5PnC+4so50vBoBfxjdQAdvngwidM8jYIBVxBZ/sARxD4e0yMXRbJVDrYf7dyRtIIKT6Q==} + /@babel/plugin-transform-template-literals/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-template-literals/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-template-literals/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-template-literals/7.16.7_@babel+core@7.17.8: @@ -5600,14 +6890,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-typeof-symbol/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-++V2L8Bdf4vcaHi2raILnptTBjGEFxn5315YU+e8+EqXIucA+q349qWngCLpUYqqv233suJ6NOienIVUpS9cqg==} + /@babel/plugin-transform-typeof-symbol/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-typeof-symbol/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-typeof-symbol/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-typeof-symbol/7.16.7_@babel+core@7.17.8: @@ -5680,14 +6990,34 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-unicode-escapes/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-VFi4dhgJM7Bpk8lRc5CMaRGlKZ29W9C3geZjt9beuzSUrlJxsNwX7ReLwaL6WEvsOf2EQkyIJEPtF8EXjB/g2A==} + /@babel/plugin-transform-unicode-escapes/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-unicode-escapes/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-unicode-escapes/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-unicode-escapes/7.16.7_@babel+core@7.17.8: @@ -5721,15 +7051,37 @@ packages: '@babel/helper-plugin-utils': 7.14.5 dev: true - /@babel/plugin-transform-unicode-regex/7.16.0_@babel+core@7.16.12: - resolution: {integrity: sha512-jHLK4LxhHjvCeZDWyA9c+P9XH1sOxRd1RO9xMtDVRAOND/PczPqizEtVdx4TQF/wyPaewqpT+tgQFYMnN/P94A==} + /@babel/plugin-transform-unicode-regex/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-unicode-regex/7.16.7_@babel+core@7.16.0: + resolution: {integrity: sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + dev: true + + /@babel/plugin-transform-unicode-regex/7.16.7_@babel+core@7.16.12: + resolution: {integrity: sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.16.12 - '@babel/helper-create-regexp-features-plugin': 7.16.0_@babel+core@7.16.12 - '@babel/helper-plugin-utils': 7.14.5 + '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.12 + '@babel/helper-plugin-utils': 7.16.7 dev: false /@babel/plugin-transform-unicode-regex/7.16.7_@babel+core@7.17.8: @@ -5826,6 +7178,261 @@ packages: - supports-color dev: true + /@babel/preset-env/7.16.11_@babel+core@7.12.9: + resolution: {integrity: sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/compat-data': 7.17.7 + '@babel/core': 7.12.9 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-validator-option': 7.16.7 + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-async-generator-functions': 7.16.8_@babel+core@7.12.9 + '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-class-static-block': 7.17.6_@babel+core@7.12.9 + '@babel/plugin-proposal-dynamic-import': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-export-namespace-from': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-json-strings': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-logical-assignment-operators': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-numeric-separator': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-object-rest-spread': 7.17.3_@babel+core@7.12.9 + '@babel/plugin-proposal-optional-catch-binding': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.12.9 + '@babel/plugin-proposal-private-property-in-object': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-proposal-unicode-property-regex': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.12.9 + '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.12.9 + '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.12.9 + '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.12.9 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.12.9 + '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.12.9 + '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.12.9 + '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.12.9 + '@babel/plugin-transform-arrow-functions': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-async-to-generator': 7.16.8_@babel+core@7.12.9 + '@babel/plugin-transform-block-scoped-functions': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-block-scoping': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-classes': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-computed-properties': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-destructuring': 7.17.7_@babel+core@7.12.9 + '@babel/plugin-transform-dotall-regex': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-duplicate-keys': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-exponentiation-operator': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-for-of': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-function-name': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-literals': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-member-expression-literals': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-modules-amd': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-modules-commonjs': 7.17.7_@babel+core@7.12.9 + '@babel/plugin-transform-modules-systemjs': 7.17.8_@babel+core@7.12.9 + '@babel/plugin-transform-modules-umd': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-named-capturing-groups-regex': 7.16.8_@babel+core@7.12.9 + '@babel/plugin-transform-new-target': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-object-super': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-property-literals': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-regenerator': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-reserved-words': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-shorthand-properties': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-spread': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-sticky-regex': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-typeof-symbol': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-unicode-escapes': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-unicode-regex': 7.16.7_@babel+core@7.12.9 + '@babel/preset-modules': 0.1.5_@babel+core@7.12.9 + '@babel/types': 7.17.0 + babel-plugin-polyfill-corejs2: 0.3.0_@babel+core@7.12.9 + babel-plugin-polyfill-corejs3: 0.5.2_@babel+core@7.12.9 + babel-plugin-polyfill-regenerator: 0.3.0_@babel+core@7.12.9 + core-js-compat: 3.21.1 + semver: 6.3.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/preset-env/7.16.11_@babel+core@7.16.0: + resolution: {integrity: sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/compat-data': 7.17.7 + '@babel/core': 7.16.0 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.0 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-validator-option': 7.16.7 + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-async-generator-functions': 7.16.8_@babel+core@7.16.0 + '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-class-static-block': 7.17.6_@babel+core@7.16.0 + '@babel/plugin-proposal-dynamic-import': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-export-namespace-from': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-json-strings': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-logical-assignment-operators': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-numeric-separator': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-object-rest-spread': 7.17.3_@babel+core@7.16.0 + '@babel/plugin-proposal-optional-catch-binding': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.16.0 + '@babel/plugin-proposal-private-property-in-object': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-proposal-unicode-property-regex': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.16.0 + '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.16.0 + '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.16.0 + '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.16.0 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.16.0 + '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.0 + '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.0 + '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.16.0 + '@babel/plugin-transform-arrow-functions': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-async-to-generator': 7.16.8_@babel+core@7.16.0 + '@babel/plugin-transform-block-scoped-functions': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-block-scoping': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-classes': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-computed-properties': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-destructuring': 7.17.7_@babel+core@7.16.0 + '@babel/plugin-transform-dotall-regex': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-duplicate-keys': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-exponentiation-operator': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-for-of': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-function-name': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-literals': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-member-expression-literals': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-modules-amd': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-modules-commonjs': 7.17.7_@babel+core@7.16.0 + '@babel/plugin-transform-modules-systemjs': 7.17.8_@babel+core@7.16.0 + '@babel/plugin-transform-modules-umd': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-named-capturing-groups-regex': 7.16.8_@babel+core@7.16.0 + '@babel/plugin-transform-new-target': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-object-super': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-property-literals': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-regenerator': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-reserved-words': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-shorthand-properties': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-spread': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-sticky-regex': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-typeof-symbol': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-unicode-escapes': 7.16.7_@babel+core@7.16.0 + '@babel/plugin-transform-unicode-regex': 7.16.7_@babel+core@7.16.0 + '@babel/preset-modules': 0.1.5_@babel+core@7.16.0 + '@babel/types': 7.17.0 + babel-plugin-polyfill-corejs2: 0.3.0_@babel+core@7.16.0 + babel-plugin-polyfill-corejs3: 0.5.2_@babel+core@7.16.0 + babel-plugin-polyfill-regenerator: 0.3.0_@babel+core@7.16.0 + core-js-compat: 3.21.1 + semver: 6.3.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/preset-env/7.16.11_@babel+core@7.16.12: + resolution: {integrity: sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/compat-data': 7.17.7 + '@babel/core': 7.16.12 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.12 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-validator-option': 7.16.7 + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-async-generator-functions': 7.16.8_@babel+core@7.16.12 + '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-class-static-block': 7.17.6_@babel+core@7.16.12 + '@babel/plugin-proposal-dynamic-import': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-export-namespace-from': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-json-strings': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-logical-assignment-operators': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-numeric-separator': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-object-rest-spread': 7.17.3_@babel+core@7.16.12 + '@babel/plugin-proposal-optional-catch-binding': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.16.12 + '@babel/plugin-proposal-private-property-in-object': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-proposal-unicode-property-regex': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.16.12 + '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.16.12 + '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.16.12 + '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.12 + '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.16.12 + '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.16.12 + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.16.12 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.16.12 + '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.16.12 + '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.16.12 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.16.12 + '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.12 + '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.12 + '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.16.12 + '@babel/plugin-transform-arrow-functions': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-async-to-generator': 7.16.8_@babel+core@7.16.12 + '@babel/plugin-transform-block-scoped-functions': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-block-scoping': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-classes': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-computed-properties': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-destructuring': 7.17.7_@babel+core@7.16.12 + '@babel/plugin-transform-dotall-regex': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-duplicate-keys': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-exponentiation-operator': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-for-of': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-function-name': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-literals': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-member-expression-literals': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-modules-amd': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-modules-commonjs': 7.17.7_@babel+core@7.16.12 + '@babel/plugin-transform-modules-systemjs': 7.17.8_@babel+core@7.16.12 + '@babel/plugin-transform-modules-umd': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-named-capturing-groups-regex': 7.16.8_@babel+core@7.16.12 + '@babel/plugin-transform-new-target': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-object-super': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-property-literals': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-regenerator': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-reserved-words': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-shorthand-properties': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-spread': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-sticky-regex': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-typeof-symbol': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-unicode-escapes': 7.16.7_@babel+core@7.16.12 + '@babel/plugin-transform-unicode-regex': 7.16.7_@babel+core@7.16.12 + '@babel/preset-modules': 0.1.5_@babel+core@7.16.12 + '@babel/types': 7.17.0 + babel-plugin-polyfill-corejs2: 0.3.0_@babel+core@7.16.12 + babel-plugin-polyfill-corejs3: 0.5.2_@babel+core@7.16.12 + babel-plugin-polyfill-regenerator: 0.3.0_@babel+core@7.16.12 + core-js-compat: 3.21.1 + semver: 6.3.0 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/preset-env/7.16.11_@babel+core@7.17.8: resolution: {integrity: sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==} engines: {node: '>=6.9.0'} @@ -5995,90 +7602,17 @@ packages: - supports-color dev: true - /@babel/preset-env/7.16.4_@babel+core@7.16.12: - resolution: {integrity: sha512-v0QtNd81v/xKj4gNKeuAerQ/azeNn/G1B1qMLeXOcV8+4TWlD2j3NV1u8q29SDFBXx/NBq5kyEAO+0mpRgacjA==} + /@babel/preset-flow/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-6ceP7IyZdUYQ3wUVqyRSQXztd1YmFHWI4Xv11MIqAlE4WqxBSd/FZ61V9k+TS5Gd4mkHOtQtPp9ymRpxH4y1Ug==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/compat-data': 7.17.7 - '@babel/core': 7.16.12 - '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.12 + '@babel/core': 7.12.9 '@babel/helper-plugin-utils': 7.16.7 '@babel/helper-validator-option': 7.16.7 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.16.2_@babel+core@7.16.12 - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-async-generator-functions': 7.16.4_@babel+core@7.16.12 - '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.16.12 - '@babel/plugin-proposal-class-static-block': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-dynamic-import': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-export-namespace-from': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-json-strings': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-logical-assignment-operators': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-numeric-separator': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-object-rest-spread': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-optional-catch-binding': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-optional-chaining': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-private-methods': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-private-property-in-object': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-proposal-unicode-property-regex': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.16.12 - '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.16.12 - '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.16.12 - '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.16.12 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.16.12 - '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.12 - '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.12 - '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.16.12 - '@babel/plugin-transform-arrow-functions': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-async-to-generator': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-block-scoped-functions': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-block-scoping': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-classes': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-computed-properties': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-destructuring': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-dotall-regex': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-duplicate-keys': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-exponentiation-operator': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-for-of': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-function-name': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-literals': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-member-expression-literals': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-modules-amd': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-modules-commonjs': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-modules-systemjs': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-modules-umd': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-named-capturing-groups-regex': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-new-target': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-object-super': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-parameters': 7.16.3_@babel+core@7.16.12 - '@babel/plugin-transform-property-literals': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-regenerator': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-reserved-words': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-shorthand-properties': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-spread': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-sticky-regex': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-template-literals': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-typeof-symbol': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-unicode-escapes': 7.16.0_@babel+core@7.16.12 - '@babel/plugin-transform-unicode-regex': 7.16.0_@babel+core@7.16.12 - '@babel/preset-modules': 0.1.5_@babel+core@7.16.12 - '@babel/types': 7.17.0 - babel-plugin-polyfill-corejs2: 0.3.0_@babel+core@7.16.12 - babel-plugin-polyfill-corejs3: 0.4.0_@babel+core@7.16.12 - babel-plugin-polyfill-regenerator: 0.3.0_@babel+core@7.16.12 - core-js-compat: 3.19.1 - semver: 6.3.0 - transitivePeerDependencies: - - supports-color - dev: false + '@babel/plugin-transform-flow-strip-types': 7.16.7_@babel+core@7.12.9 + dev: true /@babel/preset-flow/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-6ceP7IyZdUYQ3wUVqyRSQXztd1YmFHWI4Xv11MIqAlE4WqxBSd/FZ61V9k+TS5Gd4mkHOtQtPp9ymRpxH4y1Ug==} @@ -6143,6 +7677,21 @@ packages: '@babel/types': 7.16.0 esutils: 2.0.3 + /@babel/preset-react/7.16.7_@babel+core@7.12.9: + resolution: {integrity: sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-plugin-utils': 7.16.7 + '@babel/helper-validator-option': 7.16.7 + '@babel/plugin-transform-react-display-name': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.12.9 + '@babel/plugin-transform-react-jsx-development': 7.16.7_@babel+core@7.12.9 + '@babel/plugin-transform-react-pure-annotations': 7.16.7_@babel+core@7.12.9 + dev: true + /@babel/preset-react/7.16.7_@babel+core@7.17.8: resolution: {integrity: sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==} engines: {node: '>=6.9.0'} @@ -6362,7 +7911,7 @@ packages: '@cspotcode/source-map-consumer': 0.8.0 dev: true - /@cypress/webpack-preprocessor/5.10.0_8664c4230b51db280b15ba36bf8e5650: + /@cypress/webpack-preprocessor/5.10.0_eab84302f28ca27d02fd15252916451f: resolution: {integrity: sha512-KzcDBjos3rIw58imyvATYTNi9CB+Co0SFUhexmuH2c+Wk1ksSM3g4XmxUUIaJJvDwmIK4tcoBMYd9Lzle8bR7A==} peerDependencies: '@babel/core': ^7.0.1 @@ -6371,12 +7920,12 @@ packages: webpack: ^4 || ^5 dependencies: '@babel/core': 7.16.0 - '@babel/preset-env': 7.16.4_@babel+core@7.16.0 - babel-loader: 8.2.3_fda98f9ff70e0481a7d2271d8792a29b + '@babel/preset-env': 7.16.11_@babel+core@7.16.0 + babel-loader: 8.2.3_2126ca8a005869f6c62d5aa977e8d816 bluebird: 3.7.2 debug: 4.3.2 lodash: 4.17.21 - webpack: 5.64.1 + webpack: 5.70.0 transitivePeerDependencies: - supports-color dev: true @@ -6438,20 +7987,6 @@ packages: '@emotion/utils': 0.11.3 dev: true - /@emotion/core/10.3.1_react@17.0.2: - resolution: {integrity: sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==} - peerDependencies: - react: '>=16.3.0' - dependencies: - '@babel/runtime': 7.17.7 - '@emotion/cache': 10.0.29 - '@emotion/css': 10.0.27 - '@emotion/serialize': 0.11.16 - '@emotion/sheet': 0.9.4 - '@emotion/utils': 0.11.3 - react: 17.0.2 - dev: true - /@emotion/css/10.0.27: resolution: {integrity: sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==} dependencies: @@ -6570,20 +8105,6 @@ packages: resolution: {integrity: sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==} dev: false - /@emotion/styled-base/10.3.0_316248eb6686a2fd4fbadcfd00de37f3: - resolution: {integrity: sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==} - peerDependencies: - '@emotion/core': ^10.0.28 - react: '>=16.3.0' - dependencies: - '@babel/runtime': 7.17.7 - '@emotion/core': 10.3.1_react@17.0.2 - '@emotion/is-prop-valid': 0.8.8 - '@emotion/serialize': 0.11.16 - '@emotion/utils': 0.11.3 - react: 17.0.2 - dev: true - /@emotion/styled-base/10.3.0_@emotion+core@10.3.1: resolution: {integrity: sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==} peerDependencies: @@ -6597,18 +8118,6 @@ packages: '@emotion/utils': 0.11.3 dev: true - /@emotion/styled/10.3.0_316248eb6686a2fd4fbadcfd00de37f3: - resolution: {integrity: sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==} - peerDependencies: - '@emotion/core': ^10.0.27 - react: '>=16.3.0' - dependencies: - '@emotion/core': 10.3.1_react@17.0.2 - '@emotion/styled-base': 10.3.0_316248eb6686a2fd4fbadcfd00de37f3 - babel-plugin-emotion: 10.2.2 - react: 17.0.2 - dev: true - /@emotion/styled/10.3.0_@emotion+core@10.3.1: resolution: {integrity: sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==} peerDependencies: @@ -7698,17 +9207,6 @@ packages: - supports-color dev: true - /@mdx-js/loader/1.6.22_react@17.0.2: - resolution: {integrity: sha512-9CjGwy595NaxAYp0hF9B/A0lH6C8Rms97e2JS9d3jVUtILn6pT5i5IV965ra3lIWc7Rs1GG1tBdVF7dCowYe6Q==} - dependencies: - '@mdx-js/mdx': 1.6.22 - '@mdx-js/react': 1.6.22_react@17.0.2 - loader-utils: 2.0.0 - transitivePeerDependencies: - - react - - supports-color - dev: true - /@mdx-js/mdx/1.6.22: resolution: {integrity: sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA==} dependencies: @@ -7741,14 +9239,6 @@ packages: react: ^16.13.1 || ^17.0.0 dev: true - /@mdx-js/react/1.6.22_react@17.0.2: - resolution: {integrity: sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==} - peerDependencies: - react: ^16.13.1 || ^17.0.0 - dependencies: - react: 17.0.2 - dev: true - /@mdx-js/util/1.6.22: resolution: {integrity: sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==} dev: true @@ -7962,7 +9452,7 @@ packages: yargs-parser: 20.0.0 dev: true - /@nrwl/cypress/13.3.5_45e5b05f8550ddf8ad44a90a38658752: + /@nrwl/cypress/13.3.5_c038c1456e7bf90a94e00c2ec1748e38: resolution: {integrity: sha512-m4n+NxNvmqj9nUdKXETI3pAFJCd1DJVHm7Jwf1L8sYFlxOAv8MaFEmrPjmx2qY8F5TUqWqG2BgRYwIx1ImIPkg==} peerDependencies: cypress: '>= 3 < 10' @@ -7970,7 +9460,7 @@ packages: cypress: optional: true dependencies: - '@cypress/webpack-preprocessor': 5.10.0_8664c4230b51db280b15ba36bf8e5650 + '@cypress/webpack-preprocessor': 5.10.0_eab84302f28ca27d02fd15252916451f '@nrwl/devkit': 13.3.5 '@nrwl/linter': 13.3.5_ts-node@9.1.1+typescript@4.2.4 '@nrwl/workspace': 13.3.5_e77b5b0640b6ec0ecc6c8e0dab0ec669 @@ -7978,7 +9468,7 @@ packages: enhanced-resolve: 5.8.3 fork-ts-checker-webpack-plugin: 6.2.10 rxjs: 6.6.7 - ts-loader: 9.2.6_typescript@4.2.4+webpack@5.64.1 + ts-loader: 9.2.6_typescript@4.2.4+webpack@5.70.0 tsconfig-paths: 3.11.0 tsconfig-paths-webpack-plugin: 3.4.1 tslib: 2.3.1 @@ -8194,23 +9684,23 @@ packages: '@babel/plugin-proposal-decorators': 7.16.4_@babel+core@7.16.0 '@babel/plugin-transform-regenerator': 7.16.0_@babel+core@7.16.0 '@babel/plugin-transform-runtime': 7.16.4_@babel+core@7.16.0 - '@babel/preset-env': 7.16.4_@babel+core@7.16.0 + '@babel/preset-env': 7.16.11_@babel+core@7.16.0 '@babel/preset-typescript': 7.16.0_@babel+core@7.16.0 - '@babel/runtime': 7.16.3 - '@nrwl/cypress': 13.3.5_45e5b05f8550ddf8ad44a90a38658752 + '@babel/runtime': 7.17.7 + '@nrwl/cypress': 13.3.5_c038c1456e7bf90a94e00c2ec1748e38 '@nrwl/devkit': 13.3.5 '@nrwl/jest': 13.3.5_ts-node@9.1.1 '@nrwl/js': 13.3.5_e77b5b0640b6ec0ecc6c8e0dab0ec669 '@nrwl/linter': 13.3.5_ts-node@9.1.1+typescript@4.2.4 '@nrwl/workspace': 13.3.5_e77b5b0640b6ec0ecc6c8e0dab0ec669 - '@pmmmwh/react-refresh-webpack-plugin': 0.5.1_92cb4b81c6b9f71cf92f0bdb85e4210c + '@pmmmwh/react-refresh-webpack-plugin': 0.5.1_acddec6c34c518c147e4dc38c87b7252 '@rollup/plugin-babel': 5.3.0_@babel+core@7.16.0+rollup@2.60.0 '@rollup/plugin-commonjs': 20.0.0_rollup@2.60.0 '@rollup/plugin-image': 2.1.1_rollup@2.60.0 '@rollup/plugin-json': 4.1.0_rollup@2.60.0 '@rollup/plugin-node-resolve': 13.0.6_rollup@2.60.0 autoprefixer: 10.4.0_postcss@8.3.0 - babel-loader: 8.2.3_fda98f9ff70e0481a7d2271d8792a29b + babel-loader: 8.2.3_2126ca8a005869f6c62d5aa977e8d816 babel-plugin-const-enum: 1.2.0_@babel+core@7.16.0 babel-plugin-macros: 2.8.0 babel-plugin-transform-async-to-promises: 0.8.15 @@ -8220,29 +9710,29 @@ packages: caniuse-lite: 1.0.30001280 chalk: 4.1.0 chokidar: 3.5.2 - copy-webpack-plugin: 9.1.0_webpack@5.64.1 - core-js: 3.19.1 - css-loader: 6.5.1_webpack@5.64.1 - css-minimizer-webpack-plugin: 3.1.3_webpack@5.64.1 + copy-webpack-plugin: 9.1.0_webpack@5.70.0 + core-js: 3.21.1 + css-loader: 6.7.1_webpack@5.70.0 + css-minimizer-webpack-plugin: 3.1.3_webpack@5.70.0 enhanced-resolve: 5.8.3 - file-loader: 6.2.0_webpack@5.64.1 + file-loader: 6.2.0_webpack@5.70.0 fork-ts-checker-webpack-plugin: 6.2.10 fs-extra: 9.1.0 http-server: 0.12.3 identity-obj-proxy: 3.0.0 ignore: 5.1.9 less: 3.12.2 - less-loader: 10.2.0_less@3.12.2+webpack@5.64.1 + less-loader: 10.2.0_less@3.12.2+webpack@5.70.0 license-webpack-plugin: 2.3.15 loader-utils: 1.2.3 - mini-css-extract-plugin: 2.4.4_webpack@5.64.1 + mini-css-extract-plugin: 2.4.4_webpack@5.70.0 open: 7.4.2 parse5: 4.0.0 parse5-html-rewriting-stream: 6.0.1 postcss: 8.3.0 postcss-import: 14.0.2_postcss@8.3.0 - postcss-loader: 6.2.0_postcss@8.3.0+webpack@5.64.1 - raw-loader: 4.0.2_webpack@5.64.1 + postcss-loader: 6.2.0_postcss@8.3.0+webpack@5.70.0 + raw-loader: 4.0.2_webpack@5.70.0 react-refresh: 0.10.0 rimraf: 3.0.2 rollup: 2.60.0 @@ -8252,27 +9742,27 @@ packages: rollup-plugin-typescript2: 0.30.0_rollup@2.60.0+typescript@4.2.4 rxjs: 6.6.7 rxjs-for-await: 0.0.2_rxjs@6.6.7 - sass: 1.45.0 - sass-loader: 12.3.0_sass@1.45.0+webpack@5.64.1 + sass: 1.49.9 + sass-loader: 12.3.0_sass@1.49.9+webpack@5.70.0 semver: 7.3.4 source-map: 0.7.3 - source-map-loader: 3.0.0_webpack@5.64.1 - style-loader: 3.3.1_webpack@5.64.1 + source-map-loader: 3.0.0_webpack@5.70.0 + style-loader: 3.3.1_webpack@5.70.0 stylus: 0.55.0 - stylus-loader: 6.2.0_stylus@0.55.0+webpack@5.64.1 + stylus-loader: 6.2.0_stylus@0.55.0+webpack@5.70.0 terser: 4.3.8 - terser-webpack-plugin: 5.2.5_webpack@5.64.1 - ts-loader: 9.2.6_typescript@4.2.4+webpack@5.64.1 + terser-webpack-plugin: 5.2.5_webpack@5.70.0 + ts-loader: 9.2.6_typescript@4.2.4+webpack@5.70.0 ts-node: 9.1.1_typescript@4.2.4 tsconfig-paths: 3.11.0 tsconfig-paths-webpack-plugin: 3.4.1 tslib: 2.3.1 - webpack: 5.64.1 - webpack-dev-server: 4.5.0_webpack@5.64.1 + webpack: 5.70.0 + webpack-dev-server: 4.5.0_webpack@5.70.0 webpack-merge: 5.8.0 webpack-sources: 3.2.2 - webpack-subresource-integrity: 1.5.2_webpack@5.64.1 - worker-plugin: 3.2.0_webpack@5.64.1 + webpack-subresource-integrity: 1.5.2_webpack@5.70.0 + worker-plugin: 3.2.0_webpack@5.70.0 transitivePeerDependencies: - '@swc/core' - '@types/babel__core' @@ -8656,10 +10146,10 @@ packages: react-refresh: 0.11.0 schema-utils: 3.1.1 source-map: 0.7.3 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 dev: true - /@pmmmwh/react-refresh-webpack-plugin/0.5.1_92cb4b81c6b9f71cf92f0bdb85e4210c: + /@pmmmwh/react-refresh-webpack-plugin/0.5.1_acddec6c34c518c147e4dc38c87b7252: resolution: {integrity: sha512-ccap6o7+y5L8cnvkZ9h8UXCGyy2DqtwCD+/N3Yru6lxMvcdkPKtdx13qd7sAC9s5qZktOmWf9lfUjsGOvSdYhg==} engines: {node: '>= 10.13'} peerDependencies: @@ -8695,8 +10185,8 @@ packages: react-refresh: 0.10.0 schema-utils: 3.1.1 source-map: 0.7.3 - webpack: 5.64.1 - webpack-dev-server: 4.5.0_webpack@5.64.1 + webpack: 5.70.0 + webpack-dev-server: 4.5.0_webpack@5.70.0 dev: true /@popperjs/core/2.11.4: @@ -8933,7 +10423,7 @@ packages: - debug dev: false - /@storybook/addon-a11y/6.4.19_react-dom@17.0.2+react@17.0.2: + /@storybook/addon-a11y/6.4.19: resolution: {integrity: sha512-dG6easap6W4AqyggVZPq8lBrhza8StA8J4eYz/GVdoXINSGtq/casV0rkmY3+SUXhPYux5oGavHo86j5I4Q/0Q==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -8944,20 +10434,18 @@ packages: react-dom: optional: true dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 '@storybook/channels': 6.4.19 '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/components': 6.4.19 '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/theming': 6.4.19 axe-core: 4.3.5 core-js: 3.21.1 global: 4.4.0 lodash: 4.17.21 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 react-sizeme: 3.0.2 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 @@ -8999,85 +10487,15 @@ packages: - '@types/react' dev: true - /@storybook/addon-actions/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-GpSvP8xV8GfNkmtGJjfCgaOx6mbjtyTK0aT9FqX9pU0s+KVMmoCTrBh43b7dWrwxxas01yleBK9VpYggzhi/Fw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - core-js: 3.21.1 - fast-deep-equal: 3.1.3 - global: 4.4.0 - lodash: 4.17.21 - polished: 4.1.4 - prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-inspector: 5.1.1_react@17.0.2 - regenerator-runtime: 0.13.9 - telejson: 5.3.3 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - uuid-browser: 3.1.0 - transitivePeerDependencies: - - '@types/react' - dev: true - /@storybook/addon-console/1.2.3_@storybook+addon-actions@6.4.19: resolution: {integrity: sha512-w5uCUwECA28fdZWoa+A4e/RS9XzBStdd3TwwmpSM5m4fjURJI7Qr+uVq30UeRdgZRH1K7CdWzYUE6RxWXMdVyw==} peerDependencies: '@storybook/addon-actions': '*' dependencies: - '@storybook/addon-actions': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addon-actions': 6.4.19 global: 4.4.0 dev: true - /@storybook/addon-controls/6.4.19_038a1a9b7a6f260609bc9d14f1ae100e: - resolution: {integrity: sha512-JHi5z9i6NsgQLfG5WOeQE1AyOrM+QJLrjT+uOYx40bq+OC1yWHH7qHiphPP8kjJJhCZlaQk1qqXYkkQXgaeHSw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/node-logger': 6.4.19 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - core-js: 3.21.1 - lodash: 4.17.21 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - ts-dedent: 2.2.0 - transitivePeerDependencies: - - '@types/react' - - eslint - - supports-color - - typescript - - vue-template-compiler - - webpack-cli - - webpack-command - dev: true - /@storybook/addon-controls/6.4.19_ad5fc232a476648e022b673b2e1293fc: resolution: {integrity: sha512-JHi5z9i6NsgQLfG5WOeQE1AyOrM+QJLrjT+uOYx40bq+OC1yWHH7qHiphPP8kjJJhCZlaQk1qqXYkkQXgaeHSw==} peerDependencies: @@ -9111,119 +10529,40 @@ packages: - webpack-command dev: true - /@storybook/addon-docs/6.4.19_0f3f6342a67dc2ef4115448ec44f733f: - resolution: {integrity: sha512-OEPyx/5ZXmZOPqIAWoPjlIP8Q/YfNjAmBosA8tmA8t5KCSiq/vpLcAvQhxqK6n0wk/B8Xp67Z8RpLfXjU8R3tw==} + /@storybook/addon-controls/6.4.19_typescript@4.2.4: + resolution: {integrity: sha512-JHi5z9i6NsgQLfG5WOeQE1AyOrM+QJLrjT+uOYx40bq+OC1yWHH7qHiphPP8kjJJhCZlaQk1qqXYkkQXgaeHSw==} peerDependencies: - '@storybook/angular': 6.4.19 - '@storybook/html': 6.4.19 - '@storybook/react': 6.4.19 - '@storybook/vue': 6.4.19 - '@storybook/vue3': 6.4.19 - '@storybook/web-components': 6.4.19 - lit: ^2.0.0 - lit-html: ^1.4.1 || ^2.0.0 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 - svelte: ^3.31.2 - sveltedoc-parser: ^4.1.0 - vue: ^2.6.10 || ^3.0.0 - webpack: '*' peerDependenciesMeta: - '@storybook/angular': - optional: true - '@storybook/html': - optional: true - '@storybook/react': - optional: true - '@storybook/vue': - optional: true - '@storybook/vue3': - optional: true - '@storybook/web-components': - optional: true - lit: - optional: true - lit-html: - optional: true react: optional: true react-dom: optional: true - svelte: - optional: true - sveltedoc-parser: - optional: true - vue: - optional: true - webpack: - optional: true dependencies: - '@babel/core': 7.17.8 - '@babel/generator': 7.17.7 - '@babel/parser': 7.17.8 - '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.17.8 - '@babel/preset-env': 7.16.11_@babel+core@7.17.8 - '@jest/transform': 26.6.2 - '@mdx-js/loader': 1.6.22_react@17.0.2 - '@mdx-js/mdx': 1.6.22 - '@mdx-js/react': 1.6.22_react@17.0.2 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/builder-webpack4': 6.4.19_7f108b73cd811a4229905aae8cce3ccd + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core': 6.4.19_937e6324d1a779a4b68436e9ddd056f3 - '@storybook/core-events': 6.4.19 + '@storybook/components': 6.4.19 + '@storybook/core-common': 6.4.19_typescript@4.2.4 '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/csf-tools': 6.4.19 '@storybook/node-logger': 6.4.19 - '@storybook/postinstall': 6.4.19 - '@storybook/preview-web': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/react': 6.4.19_9f1f8f17cdd455b6ef8e501a921b145c - '@storybook/source-loader': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - acorn: 7.4.1 - acorn-jsx: 5.3.2_acorn@7.4.1 - acorn-walk: 7.2.0 + '@storybook/store': 6.4.19 + '@storybook/theming': 6.4.19 core-js: 3.21.1 - doctrine: 3.0.0 - escodegen: 2.0.0 - fast-deep-equal: 3.1.3 - global: 4.4.0 - html-tags: 3.1.0 - js-string-escape: 1.0.1 - loader-utils: 2.0.2 lodash: 4.17.21 - nanoid: 3.1.30 - p-limit: 3.1.0 - prettier: 2.3.0 - prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-element-to-jsx-string: 14.3.4_react-dom@17.0.2+react@17.0.2 - regenerator-runtime: 0.13.9 - remark-external-links: 8.0.0 - remark-slug: 6.1.0 ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - webpack: 5.70.0_webpack-cli@4.9.2 transitivePeerDependencies: - - '@storybook/builder-webpack5' - - '@storybook/manager-webpack5' - '@types/react' - - bufferutil - - encoding - eslint - supports-color - typescript - - utf-8-validate - vue-template-compiler - webpack-cli - webpack-command dev: true - /@storybook/addon-docs/6.4.19_c07d33072055753b44e1c9d473b78732: + /@storybook/addon-docs/6.4.19_4bb52bfb586c30b5fcb8732c940fa2c0: resolution: {integrity: sha512-OEPyx/5ZXmZOPqIAWoPjlIP8Q/YfNjAmBosA8tmA8t5KCSiq/vpLcAvQhxqK6n0wk/B8Xp67Z8RpLfXjU8R3tw==} peerDependencies: '@storybook/angular': 6.4.19 @@ -9284,14 +10623,14 @@ packages: '@storybook/builder-webpack4': 6.4.19_3c9642e85c55378a78283e2c58ad860d '@storybook/client-logger': 6.4.19 '@storybook/components': 6.4.19 - '@storybook/core': 6.4.19_4a2c49d703ffc87352c156b0c4186be7 + '@storybook/core': 6.4.19_e254c6bc0c2d82a31a4b49f99644f2ac '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/csf-tools': 6.4.19 '@storybook/node-logger': 6.4.19 '@storybook/postinstall': 6.4.19 '@storybook/preview-web': 6.4.19 - '@storybook/react': 6.4.19_df9bce9a6d10cedcb22cc302b49e05b8 + '@storybook/react': 6.4.19_ce33fa78e84ed7674385e603320a18f7 '@storybook/source-loader': 6.4.19 '@storybook/store': 6.4.19 '@storybook/theming': 6.4.19 @@ -9333,41 +10672,114 @@ packages: - webpack-command dev: true - /@storybook/addon-knobs/6.4.0_6d3fd42cc2dc28673127a5aba3ab9a43: - resolution: {integrity: sha512-DiH1/5e2AFHoHrncl1qLu18ZHPHzRMMPvOLFz8AWvvmc+VCqTdIaE+tdxKr3e8rYylKllibgvDOzrLjfTNjF+Q==} - deprecated: deprecating @storybook/addon-knobs in favor of @storybook/addon-controls + /@storybook/addon-docs/6.4.19_a84ef1f946d21a14f1015f55f0de5456: + resolution: {integrity: sha512-OEPyx/5ZXmZOPqIAWoPjlIP8Q/YfNjAmBosA8tmA8t5KCSiq/vpLcAvQhxqK6n0wk/B8Xp67Z8RpLfXjU8R3tw==} peerDependencies: - '@storybook/addons': ^6.4.0 - '@storybook/api': ^6.4.0 - '@storybook/components': ^6.4.0 - '@storybook/core-events': ^6.4.0 - '@storybook/theming': ^6.4.0 + '@storybook/angular': 6.4.19 + '@storybook/html': 6.4.19 + '@storybook/react': 6.4.19 + '@storybook/vue': 6.4.19 + '@storybook/vue3': 6.4.19 + '@storybook/web-components': 6.4.19 + lit: ^2.0.0 + lit-html: ^1.4.1 || ^2.0.0 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 + svelte: ^3.31.2 + sveltedoc-parser: ^4.1.0 + vue: ^2.6.10 || ^3.0.0 + webpack: '*' peerDependenciesMeta: + '@storybook/angular': + optional: true + '@storybook/html': + optional: true + '@storybook/react': + optional: true + '@storybook/vue': + optional: true + '@storybook/vue3': + optional: true + '@storybook/web-components': + optional: true + lit: + optional: true + lit-html: + optional: true react: optional: true react-dom: optional: true + svelte: + optional: true + sveltedoc-parser: + optional: true + vue: + optional: true + webpack: + optional: true dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@babel/core': 7.17.8 + '@babel/generator': 7.17.7 + '@babel/parser': 7.17.8 + '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.17.8 + '@babel/preset-env': 7.16.11_@babel+core@7.17.8 + '@jest/transform': 26.6.2 + '@mdx-js/loader': 1.6.22 + '@mdx-js/mdx': 1.6.22 + '@mdx-js/react': 1.6.22 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 + '@storybook/builder-webpack4': 6.4.19_acorn@7.4.1+typescript@4.2.4 + '@storybook/client-logger': 6.4.19 + '@storybook/components': 6.4.19 + '@storybook/core': 6.4.19_daa74e9ea57648d1383d4f5a915eef9c '@storybook/core-events': 6.4.19 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - copy-to-clipboard: 3.3.1 + '@storybook/csf': 0.0.2--canary.87bc651.0 + '@storybook/csf-tools': 6.4.19 + '@storybook/node-logger': 6.4.19 + '@storybook/postinstall': 6.4.19 + '@storybook/preview-web': 6.4.19 + '@storybook/react': 6.4.19_1a3cbc393c8e54a301ca95e65ea44c36 + '@storybook/source-loader': 6.4.19 + '@storybook/store': 6.4.19 + '@storybook/theming': 6.4.19 + acorn: 7.4.1 + acorn-jsx: 5.3.2_acorn@7.4.1 + acorn-walk: 7.2.0 core-js: 3.21.1 - escape-html: 1.0.3 + doctrine: 3.0.0 + escodegen: 2.0.0 fast-deep-equal: 3.1.3 global: 4.4.0 + html-tags: 3.1.0 + js-string-escape: 1.0.1 + loader-utils: 2.0.2 lodash: 4.17.21 + nanoid: 3.1.30 + p-limit: 3.1.0 + prettier: 2.3.0 prop-types: 15.8.1 - qs: 6.10.3 - react: 17.0.2 - react-colorful: 5.5.1_react-dom@17.0.2+react@17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-lifecycles-compat: 3.0.4 - react-select: 3.2.0_react-dom@17.0.2+react@17.0.2 + react-element-to-jsx-string: 14.3.4 + regenerator-runtime: 0.13.9 + remark-external-links: 8.0.0 + remark-slug: 6.1.0 + ts-dedent: 2.2.0 + util-deprecate: 1.0.2 + webpack: 5.70.0 + transitivePeerDependencies: + - '@storybook/builder-webpack5' + - '@storybook/manager-webpack5' + - '@types/react' + - bufferutil + - encoding + - eslint + - supports-color + - typescript + - utf-8-validate + - vue-template-compiler + - webpack-cli + - webpack-command dev: true /@storybook/addon-knobs/6.4.0_bdb88cf577f190583d60d23c102288af: @@ -9430,34 +10842,7 @@ packages: ts-dedent: 2.2.0 dev: true - /@storybook/addon-links/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-ebFHYlGDQkHSmI5QEJb1NxGNToVOLgjKkxXUe+JXX7AfHvrWiXVrN/57aOtBPZzj4h2jRPRTZgwR5glhPIlfEQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/client-logger': 6.4.19 - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@types/qs': 6.9.7 - core-js: 3.21.1 - global: 4.4.0 - prop-types: 15.8.1 - qs: 6.10.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - ts-dedent: 2.2.0 - dev: true - - /@storybook/addon-storysource/6.4.19_react-dom@17.0.2+react@17.0.2: + /@storybook/addon-storysource/6.4.19: resolution: {integrity: sha512-WcjPgd0/m9rGMQbf6H2/wvXUhW5lSELWdXeCCK1taQHQUjhs8tq83fa7OkI9kE25drPiUJuPzObbCoYr94hftQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -9468,27 +10853,25 @@ packages: react-dom: optional: true dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/source-loader': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/components': 6.4.19 + '@storybook/router': 6.4.19 + '@storybook/source-loader': 6.4.19 + '@storybook/theming': 6.4.19 core-js: 3.21.1 estraverse: 5.3.0 loader-utils: 2.0.2 prettier: 2.3.0 prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-syntax-highlighter: 13.5.3_react@17.0.2 + react-syntax-highlighter: 13.5.3 regenerator-runtime: 0.13.9 transitivePeerDependencies: - '@types/react' dev: true - /@storybook/addon-viewport/6.4.19_react-dom@17.0.2+react@17.0.2: + /@storybook/addon-viewport/6.4.19: resolution: {integrity: sha512-T1hdImxbLj8suQSTbp6HSA1LLHOlqaNK5jjnqzEOoAxY0O8LNPXMJ2jKIeT2fPQ0v+tWGU3tbwf+3xFq0parVQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -9499,18 +10882,16 @@ packages: react-dom: optional: true dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/components': 6.4.19 '@storybook/core-events': 6.4.19 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/theming': 6.4.19 core-js: 3.21.1 global: 4.4.0 memoizerific: 1.11.3 prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 regenerator-runtime: 0.13.9 transitivePeerDependencies: - '@types/react' @@ -9535,27 +10916,6 @@ packages: regenerator-runtime: 0.13.9 dev: true - /@storybook/addons/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-QNyRYhpqmHV8oJxxTBdkRlLSbDFhpBvfvMfIrIT1UXb/eemdBZTaCGVvXZ9UixoEEI7f8VwAQ44IvkU5B1509w==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/channels': 6.4.19 - '@storybook/client-logger': 6.4.19 - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@types/webpack-env': 1.16.3 - core-js: 3.21.1 - global: 4.4.0 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - dev: true - /@storybook/api/6.4.19: resolution: {integrity: sha512-aDvea+NpQCBjpNp9YidO1Pr7fzzCp15FSdkG+2ihGQfv5raxrN+IIJnGUXecpe71nvlYiB+29UXBVK7AL0j51Q==} peerDependencies: @@ -9581,125 +10941,6 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/api/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-aDvea+NpQCBjpNp9YidO1Pr7fzzCp15FSdkG+2ihGQfv5raxrN+IIJnGUXecpe71nvlYiB+29UXBVK7AL0j51Q==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@storybook/channels': 6.4.19 - '@storybook/client-logger': 6.4.19 - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/semver': 7.3.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - core-js: 3.21.1 - fast-deep-equal: 3.1.3 - global: 4.4.0 - lodash: 4.17.21 - memoizerific: 1.11.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - store2: 2.13.2 - telejson: 5.3.3 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - dev: true - - /@storybook/builder-webpack4/6.4.19_038a1a9b7a6f260609bc9d14f1ae100e: - resolution: {integrity: sha512-wxA6SMH11duc9D53aeVVBwrVRemFIoxHp/dOugkkg6ZZFAb4ZmWzf/ENc3vQIZdZpfNRi7IZIZEOfoHc994cmw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@babel/core': 7.17.8 - '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-decorators': 7.16.4_@babel+core@7.17.8 - '@babel/plugin-proposal-export-default-from': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-object-rest-spread': 7.17.3_@babel+core@7.17.8 - '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.17.8 - '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.17.8 - '@babel/plugin-transform-arrow-functions': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-block-scoping': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-classes': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-destructuring': 7.17.7_@babel+core@7.17.8 - '@babel/plugin-transform-for-of': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-shorthand-properties': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-spread': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.17.8 - '@babel/preset-env': 7.16.11_@babel+core@7.17.8 - '@babel/preset-react': 7.16.7_@babel+core@7.17.8 - '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/channel-postmessage': 6.4.19 - '@storybook/channels': 6.4.19 - '@storybook/client-api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/core-events': 6.4.19 - '@storybook/node-logger': 6.4.19 - '@storybook/preview-web': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/semver': 7.3.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/ui': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@types/node': 14.14.33 - '@types/webpack': 4.41.32 - autoprefixer: 9.8.6 - babel-loader: 8.2.3_b72fb7e629d39881e138edb6dcd0dfbe - babel-plugin-macros: 2.8.0 - babel-plugin-polyfill-corejs3: 0.1.7_@babel+core@7.17.8 - case-sensitive-paths-webpack-plugin: 2.4.0 - core-js: 3.21.1 - css-loader: 3.6.0_webpack@4.46.0 - file-loader: 6.2.0_webpack@4.46.0 - find-up: 5.0.0 - fork-ts-checker-webpack-plugin: 4.1.6 - glob: 7.2.0 - glob-promise: 3.4.0_glob@7.2.0 - global: 4.4.0 - html-webpack-plugin: 4.5.2_webpack@4.46.0 - pnp-webpack-plugin: 1.6.4_typescript@4.6.2 - postcss: 7.0.39 - postcss-flexbugs-fixes: 4.2.1 - postcss-loader: 4.2.0_postcss@7.0.39+webpack@4.46.0 - raw-loader: 4.0.2_webpack@4.46.0 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - stable: 0.1.8 - style-loader: 1.3.0_webpack@4.46.0 - terser-webpack-plugin: 4.2.3_webpack@4.46.0 - ts-dedent: 2.2.0 - typescript: 4.6.2 - url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 - util-deprecate: 1.0.2 - webpack: 4.46.0_webpack-cli@4.9.2 - webpack-dev-middleware: 3.7.3_webpack@4.46.0 - webpack-filter-warnings-plugin: 1.2.1_webpack@4.46.0 - webpack-hot-middleware: 2.25.1 - webpack-virtual-modules: 0.2.2 - transitivePeerDependencies: - - '@types/react' - - acorn - - eslint - - supports-color - - vue-template-compiler - - webpack-cli - - webpack-command - dev: true - /@storybook/builder-webpack4/6.4.19_3c9642e85c55378a78283e2c58ad860d: resolution: {integrity: sha512-wxA6SMH11duc9D53aeVVBwrVRemFIoxHp/dOugkkg6ZZFAb4ZmWzf/ENc3vQIZdZpfNRi7IZIZEOfoHc994cmw==} peerDependencies: @@ -9790,7 +11031,7 @@ packages: - webpack-command dev: true - /@storybook/builder-webpack4/6.4.19_7f108b73cd811a4229905aae8cce3ccd: + /@storybook/builder-webpack4/6.4.19_acorn@7.4.1+typescript@4.2.4: resolution: {integrity: sha512-wxA6SMH11duc9D53aeVVBwrVRemFIoxHp/dOugkkg6ZZFAb4ZmWzf/ENc3vQIZdZpfNRi7IZIZEOfoHc994cmw==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -9821,22 +11062,22 @@ packages: '@babel/preset-env': 7.16.11_@babel+core@7.17.8 '@babel/preset-react': 7.16.7_@babel+core@7.17.8 '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 '@storybook/channel-postmessage': 6.4.19 '@storybook/channels': 6.4.19 - '@storybook/client-api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/client-api': 6.4.19 '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e + '@storybook/components': 6.4.19 + '@storybook/core-common': 6.4.19_typescript@4.2.4 '@storybook/core-events': 6.4.19 '@storybook/node-logger': 6.4.19 - '@storybook/preview-web': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/preview-web': 6.4.19 + '@storybook/router': 6.4.19 '@storybook/semver': 7.3.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/ui': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/store': 6.4.19 + '@storybook/theming': 6.4.19 + '@storybook/ui': 6.4.19 '@types/node': 14.14.33 '@types/webpack': 4.41.32 autoprefixer: 9.8.6 @@ -9853,21 +11094,19 @@ packages: glob-promise: 3.4.0_glob@7.2.0 global: 4.4.0 html-webpack-plugin: 4.5.2_webpack@4.46.0 - pnp-webpack-plugin: 1.6.4_typescript@4.6.2 + pnp-webpack-plugin: 1.6.4_typescript@4.2.4 postcss: 7.0.39 postcss-flexbugs-fixes: 4.2.1 postcss-loader: 4.2.0_postcss@7.0.39+webpack@4.46.0 raw-loader: 4.0.2_webpack@4.46.0 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 stable: 0.1.8 style-loader: 1.3.0_webpack@4.46.0 terser-webpack-plugin: 4.2.3_acorn@7.4.1+webpack@4.46.0 ts-dedent: 2.2.0 - typescript: 4.6.2 + typescript: 4.2.4 url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 util-deprecate: 1.0.2 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 webpack-dev-middleware: 3.7.3_webpack@4.46.0 webpack-filter-warnings-plugin: 1.2.1_webpack@4.46.0 webpack-hot-middleware: 2.25.1 @@ -9972,7 +11211,97 @@ packages: - webpack-command dev: true - /@storybook/builder-webpack5/6.4.19_038a1a9b7a6f260609bc9d14f1ae100e: + /@storybook/builder-webpack4/6.4.19_typescript@4.2.4: + resolution: {integrity: sha512-wxA6SMH11duc9D53aeVVBwrVRemFIoxHp/dOugkkg6ZZFAb4ZmWzf/ENc3vQIZdZpfNRi7IZIZEOfoHc994cmw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@babel/core': 7.17.8 + '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-decorators': 7.16.4_@babel+core@7.17.8 + '@babel/plugin-proposal-export-default-from': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-object-rest-spread': 7.17.3_@babel+core@7.17.8 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.17.8 + '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.17.8 + '@babel/plugin-transform-arrow-functions': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-block-scoping': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-classes': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-destructuring': 7.17.7_@babel+core@7.17.8 + '@babel/plugin-transform-for-of': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-shorthand-properties': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-spread': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.17.8 + '@babel/preset-env': 7.16.11_@babel+core@7.17.8 + '@babel/preset-react': 7.16.7_@babel+core@7.17.8 + '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 + '@storybook/channel-postmessage': 6.4.19 + '@storybook/channels': 6.4.19 + '@storybook/client-api': 6.4.19 + '@storybook/client-logger': 6.4.19 + '@storybook/components': 6.4.19 + '@storybook/core-common': 6.4.19_typescript@4.2.4 + '@storybook/core-events': 6.4.19 + '@storybook/node-logger': 6.4.19 + '@storybook/preview-web': 6.4.19 + '@storybook/router': 6.4.19 + '@storybook/semver': 7.3.2 + '@storybook/store': 6.4.19 + '@storybook/theming': 6.4.19 + '@storybook/ui': 6.4.19 + '@types/node': 14.14.33 + '@types/webpack': 4.41.32 + autoprefixer: 9.8.6 + babel-loader: 8.2.3_b72fb7e629d39881e138edb6dcd0dfbe + babel-plugin-macros: 2.8.0 + babel-plugin-polyfill-corejs3: 0.1.7_@babel+core@7.17.8 + case-sensitive-paths-webpack-plugin: 2.4.0 + core-js: 3.21.1 + css-loader: 3.6.0_webpack@4.46.0 + file-loader: 6.2.0_webpack@4.46.0 + find-up: 5.0.0 + fork-ts-checker-webpack-plugin: 4.1.6 + glob: 7.2.0 + glob-promise: 3.4.0_glob@7.2.0 + global: 4.4.0 + html-webpack-plugin: 4.5.2_webpack@4.46.0 + pnp-webpack-plugin: 1.6.4_typescript@4.2.4 + postcss: 7.0.39 + postcss-flexbugs-fixes: 4.2.1 + postcss-loader: 4.2.0_postcss@7.0.39+webpack@4.46.0 + raw-loader: 4.0.2_webpack@4.46.0 + stable: 0.1.8 + style-loader: 1.3.0_webpack@4.46.0 + terser-webpack-plugin: 4.2.3_webpack@4.46.0 + ts-dedent: 2.2.0 + typescript: 4.2.4 + url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 + util-deprecate: 1.0.2 + webpack: 4.46.0 + webpack-dev-middleware: 3.7.3_webpack@4.46.0 + webpack-filter-warnings-plugin: 1.2.1_webpack@4.46.0 + webpack-hot-middleware: 2.25.1 + webpack-virtual-modules: 0.2.2 + transitivePeerDependencies: + - '@types/react' + - acorn + - eslint + - supports-color + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + + /@storybook/builder-webpack5/6.4.19_typescript@4.2.4: resolution: {integrity: sha512-AWM4YMN1gPaf7jfntqZTCGpIQ1tF6YRU1JtczPG4ox28rTaO6NMfOBi9aRhBre/59pPOh9bF6u2gu/MIHmRW+w==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -10002,21 +11331,21 @@ packages: '@babel/preset-env': 7.16.11_@babel+core@7.17.8 '@babel/preset-react': 7.16.7_@babel+core@7.17.8 '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addons': 6.4.19 + '@storybook/api': 6.4.19 '@storybook/channel-postmessage': 6.4.19 '@storybook/channels': 6.4.19 - '@storybook/client-api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/client-api': 6.4.19 '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e + '@storybook/components': 6.4.19 + '@storybook/core-common': 6.4.19_typescript@4.2.4 '@storybook/core-events': 6.4.19 '@storybook/node-logger': 6.4.19 - '@storybook/preview-web': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/preview-web': 6.4.19 + '@storybook/router': 6.4.19 '@storybook/semver': 7.3.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/store': 6.4.19 + '@storybook/theming': 6.4.19 '@types/node': 14.14.33 babel-loader: 8.2.3_fa907c5a4f16ccc493e21649ccc59574 babel-plugin-macros: 3.1.0 @@ -10024,21 +11353,19 @@ packages: case-sensitive-paths-webpack-plugin: 2.4.0 core-js: 3.21.1 css-loader: 5.2.7_webpack@5.70.0 - fork-ts-checker-webpack-plugin: 6.5.0_10568ae13669cc833891d65cd6879aa0 + fork-ts-checker-webpack-plugin: 6.5.0_typescript@4.2.4+webpack@5.70.0 glob: 7.2.0 glob-promise: 3.4.0_glob@7.2.0 html-webpack-plugin: 5.5.0_webpack@5.70.0 path-browserify: 1.0.1 process: 0.11.10 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 stable: 0.1.8 style-loader: 2.0.0_webpack@5.70.0 terser-webpack-plugin: 5.2.5_webpack@5.70.0 ts-dedent: 2.2.0 - typescript: 4.6.2 + typescript: 4.2.4 util-deprecate: 1.0.2 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 webpack-dev-middleware: 4.3.0_webpack@5.70.0 webpack-hot-middleware: 2.25.1 webpack-virtual-modules: 0.4.3 @@ -10113,36 +11440,6 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/client-api/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-OCrT5Um3FDvZnimQKwWtwsaI+5agPwq2i8YiqlofrI/NPMKp0I7DEkCGwE5IRD1Q8BIKqHcMo5tTmfYi0AxyOg==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/channel-postmessage': 6.4.19 - '@storybook/channels': 6.4.19 - '@storybook/client-logger': 6.4.19 - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@types/qs': 6.9.7 - '@types/webpack-env': 1.16.3 - core-js: 3.21.1 - fast-deep-equal: 3.1.3 - global: 4.4.0 - lodash: 4.17.21 - memoizerific: 1.11.3 - qs: 6.10.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - store2: 2.13.2 - synchronous-promise: 2.0.15 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - dev: true - /@storybook/client-logger/6.4.19: resolution: {integrity: sha512-zmg/2wyc9W3uZrvxaW4BfHcr40J0v7AGslqYXk9H+ERLVwIvrR4NhxQFaS6uITjBENyRDxwzfU3Va634WcmdDQ==} dependencies: @@ -10184,43 +11481,7 @@ packages: - '@types/react' dev: true - /@storybook/components/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-q/0V37YAJA7CNc+wSiiefeM9+3XVk8ixBNylY36QCGJgIeGQ5/79vPyUe6K4lLmsQwpmZsIq1s1Ad5+VbboeOA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@popperjs/core': 2.11.4 - '@storybook/client-logger': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@types/color-convert': 2.0.0 - '@types/overlayscrollbars': 1.12.1 - '@types/react-syntax-highlighter': 11.0.5 - color-convert: 2.0.1 - core-js: 3.21.1 - fast-deep-equal: 3.1.3 - global: 4.4.0 - lodash: 4.17.21 - markdown-to-jsx: 7.1.7_react@17.0.2 - memoizerific: 1.11.3 - overlayscrollbars: 1.13.1 - polished: 4.1.4 - prop-types: 15.8.1 - react: 17.0.2 - react-colorful: 5.5.1_react-dom@17.0.2+react@17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-popper-tooltip: 3.1.1_react-dom@17.0.2+react@17.0.2 - react-syntax-highlighter: 13.5.3_react@17.0.2 - react-textarea-autosize: 8.3.3_react@17.0.2 - regenerator-runtime: 0.13.9 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - transitivePeerDependencies: - - '@types/react' - dev: true - - /@storybook/core-client/6.4.19_89d5fc67cc6e8d5f95b899f1abfc6753: + /@storybook/core-client/6.4.19_typescript@4.2.4+webpack@4.46.0: resolution: {integrity: sha512-rQHRZjhArPleE7/S8ZUolgzwY+hC0smSKX/3PQxO2GcebDjnJj6+iSV3h+aSMHMmTdoCQvjYw9aBpT8scuRe+A==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -10231,35 +11492,33 @@ packages: typescript: optional: true dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addons': 6.4.19 '@storybook/channel-postmessage': 6.4.19 '@storybook/channel-websocket': 6.4.19 - '@storybook/client-api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/client-api': 6.4.19 '@storybook/client-logger': 6.4.19 '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/preview-web': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/ui': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/preview-web': 6.4.19 + '@storybook/store': 6.4.19 + '@storybook/ui': 6.4.19 airbnb-js-shims: 2.2.1 ansi-to-html: 0.6.15 core-js: 3.21.1 global: 4.4.0 lodash: 4.17.21 qs: 6.10.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 - typescript: 4.6.2 + typescript: 4.2.4 unfetch: 4.2.0 util-deprecate: 1.0.2 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 transitivePeerDependencies: - '@types/react' dev: true - /@storybook/core-client/6.4.19_e7281081368b6c9b5567d9536ed3f600: + /@storybook/core-client/6.4.19_typescript@4.2.4+webpack@5.70.0: resolution: {integrity: sha512-rQHRZjhArPleE7/S8ZUolgzwY+hC0smSKX/3PQxO2GcebDjnJj6+iSV3h+aSMHMmTdoCQvjYw9aBpT8scuRe+A==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -10270,30 +11529,28 @@ packages: typescript: optional: true dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/addons': 6.4.19 '@storybook/channel-postmessage': 6.4.19 '@storybook/channel-websocket': 6.4.19 - '@storybook/client-api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/client-api': 6.4.19 '@storybook/client-logger': 6.4.19 '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/preview-web': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/ui': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/preview-web': 6.4.19 + '@storybook/store': 6.4.19 + '@storybook/ui': 6.4.19 airbnb-js-shims: 2.2.1 ansi-to-html: 0.6.15 core-js: 3.21.1 global: 4.4.0 lodash: 4.17.21 qs: 6.10.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 - typescript: 4.6.2 + typescript: 4.2.4 unfetch: 4.2.0 util-deprecate: 1.0.2 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 transitivePeerDependencies: - '@types/react' dev: true @@ -10372,76 +11629,6 @@ packages: - '@types/react' dev: true - /@storybook/core-common/6.4.19_038a1a9b7a6f260609bc9d14f1ae100e: - resolution: {integrity: sha512-X1pJJkO48DFxl6iyEemIKqRkJ7j9/cBh3BRBUr+xZHXBvnD0GKDXIocwh0PjSxSC6XSu3UCQnqtKi3PbjRl8Dg==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@babel/core': 7.17.8 - '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-decorators': 7.16.4_@babel+core@7.17.8 - '@babel/plugin-proposal-export-default-from': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-object-rest-spread': 7.17.3_@babel+core@7.17.8 - '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.17.8 - '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.17.8 - '@babel/plugin-transform-arrow-functions': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-block-scoping': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-classes': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-destructuring': 7.17.7_@babel+core@7.17.8 - '@babel/plugin-transform-for-of': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-shorthand-properties': 7.16.7_@babel+core@7.17.8 - '@babel/plugin-transform-spread': 7.16.7_@babel+core@7.17.8 - '@babel/preset-env': 7.16.11_@babel+core@7.17.8 - '@babel/preset-react': 7.16.7_@babel+core@7.17.8 - '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 - '@babel/register': 7.12.1_@babel+core@7.17.8 - '@storybook/node-logger': 6.4.19 - '@storybook/semver': 7.3.2 - '@types/node': 14.14.33 - '@types/pretty-hrtime': 1.0.1 - babel-loader: 8.2.3_b72fb7e629d39881e138edb6dcd0dfbe - babel-plugin-macros: 3.1.0 - babel-plugin-polyfill-corejs3: 0.1.7_@babel+core@7.17.8 - chalk: 4.1.2 - core-js: 3.21.1 - express: 4.17.1 - file-system-cache: 1.0.5 - find-up: 5.0.0 - fork-ts-checker-webpack-plugin: 6.5.0_5cc3eafe4d1d9014e8dc18ad98f28e04 - fs-extra: 9.1.0 - glob: 7.2.0 - handlebars: 4.7.7 - interpret: 2.2.0 - json5: 2.2.0 - lazy-universal-dotenv: 3.0.1 - picomatch: 2.3.0 - pkg-dir: 5.0.0 - pretty-hrtime: 1.0.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - resolve-from: 5.0.0 - slash: 3.0.0 - telejson: 5.3.3 - ts-dedent: 2.2.0 - typescript: 4.6.2 - util-deprecate: 1.0.2 - webpack: 4.46.0_webpack-cli@4.9.2 - transitivePeerDependencies: - - eslint - - supports-color - - vue-template-compiler - - webpack-cli - - webpack-command - dev: true - /@storybook/core-common/6.4.19_ad5fc232a476648e022b673b2e1293fc: resolution: {integrity: sha512-X1pJJkO48DFxl6iyEemIKqRkJ7j9/cBh3BRBUr+xZHXBvnD0GKDXIocwh0PjSxSC6XSu3UCQnqtKi3PbjRl8Dg==} peerDependencies: @@ -10510,13 +11697,155 @@ packages: - webpack-command dev: true + /@storybook/core-common/6.4.19_typescript@4.2.4: + resolution: {integrity: sha512-X1pJJkO48DFxl6iyEemIKqRkJ7j9/cBh3BRBUr+xZHXBvnD0GKDXIocwh0PjSxSC6XSu3UCQnqtKi3PbjRl8Dg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@babel/core': 7.17.8 + '@babel/plugin-proposal-class-properties': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-decorators': 7.16.4_@babel+core@7.17.8 + '@babel/plugin-proposal-export-default-from': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-object-rest-spread': 7.17.3_@babel+core@7.17.8 + '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-proposal-private-methods': 7.16.11_@babel+core@7.17.8 + '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.17.8 + '@babel/plugin-transform-arrow-functions': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-block-scoping': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-classes': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-destructuring': 7.17.7_@babel+core@7.17.8 + '@babel/plugin-transform-for-of': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-parameters': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-shorthand-properties': 7.16.7_@babel+core@7.17.8 + '@babel/plugin-transform-spread': 7.16.7_@babel+core@7.17.8 + '@babel/preset-env': 7.16.11_@babel+core@7.17.8 + '@babel/preset-react': 7.16.7_@babel+core@7.17.8 + '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 + '@babel/register': 7.12.1_@babel+core@7.17.8 + '@storybook/node-logger': 6.4.19 + '@storybook/semver': 7.3.2 + '@types/node': 14.14.33 + '@types/pretty-hrtime': 1.0.1 + babel-loader: 8.2.3_b72fb7e629d39881e138edb6dcd0dfbe + babel-plugin-macros: 3.1.0 + babel-plugin-polyfill-corejs3: 0.1.7_@babel+core@7.17.8 + chalk: 4.1.2 + core-js: 3.21.1 + express: 4.17.1 + file-system-cache: 1.0.5 + find-up: 5.0.0 + fork-ts-checker-webpack-plugin: 6.5.0_typescript@4.2.4+webpack@4.46.0 + fs-extra: 9.1.0 + glob: 7.2.0 + handlebars: 4.7.7 + interpret: 2.2.0 + json5: 2.2.0 + lazy-universal-dotenv: 3.0.1 + picomatch: 2.3.0 + pkg-dir: 5.0.0 + pretty-hrtime: 1.0.3 + resolve-from: 5.0.0 + slash: 3.0.0 + telejson: 5.3.3 + ts-dedent: 2.2.0 + typescript: 4.2.4 + util-deprecate: 1.0.2 + webpack: 4.46.0 + transitivePeerDependencies: + - eslint + - supports-color + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + /@storybook/core-events/6.4.19: resolution: {integrity: sha512-KICzUw6XVQUJzFSCXfvhfHAuyhn4Q5J4IZEfuZkcGJS4ODkrO6tmpdYE5Cfr+so95Nfp0ErWiLUuodBsW9/rtA==} dependencies: core-js: 3.21.1 dev: true - /@storybook/core-server/6.4.19_3c9642e85c55378a78283e2c58ad860d: + /@storybook/core-server/6.4.19_32ff3fc743ba90b9723aa5427911cd5d: + resolution: {integrity: sha512-bKsUB9f7hl5ya2JXxpIrErmbDQjoH39FVbzYZWjMo4t/b7+Xyi6vYadwyWcqlpUQmis09ZaSMv8L/Tw0TuwLAA==} + peerDependencies: + '@storybook/builder-webpack5': 6.4.19 + '@storybook/manager-webpack5': 6.4.19 + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + typescript: '*' + peerDependenciesMeta: + '@storybook/builder-webpack5': + optional: true + '@storybook/manager-webpack5': + optional: true + typescript: + optional: true + dependencies: + '@discoveryjs/json-ext': 0.5.7 + '@storybook/builder-webpack4': 6.4.19_acorn@7.4.1+typescript@4.2.4 + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 + '@storybook/core-client': 6.4.19_typescript@4.2.4+webpack@4.46.0 + '@storybook/core-common': 6.4.19_typescript@4.2.4 + '@storybook/core-events': 6.4.19 + '@storybook/csf': 0.0.2--canary.87bc651.0 + '@storybook/csf-tools': 6.4.19 + '@storybook/manager-webpack4': 6.4.19_acorn@7.4.1+typescript@4.2.4 + '@storybook/manager-webpack5': 6.4.19_typescript@4.2.4 + '@storybook/node-logger': 6.4.19 + '@storybook/semver': 7.3.2 + '@storybook/store': 6.4.19 + '@types/node': 14.14.33 + '@types/node-fetch': 2.6.1 + '@types/pretty-hrtime': 1.0.1 + '@types/webpack': 4.41.32 + better-opn: 2.1.1 + boxen: 5.1.2 + chalk: 4.1.2 + cli-table3: 0.6.1 + commander: 6.2.1 + compression: 1.7.4 + core-js: 3.21.1 + cpy: 8.1.2 + detect-port: 1.3.0 + express: 4.17.1 + file-system-cache: 1.0.5 + fs-extra: 9.1.0 + globby: 11.1.0 + ip: 1.1.5 + lodash: 4.17.21 + node-fetch: 2.6.7 + pretty-hrtime: 1.0.3 + prompts: 2.4.2 + regenerator-runtime: 0.13.9 + serve-favicon: 2.5.0 + slash: 3.0.0 + telejson: 5.3.3 + ts-dedent: 2.2.0 + typescript: 4.2.4 + util-deprecate: 1.0.2 + watchpack: 2.2.0 + webpack: 4.46.0 + ws: 8.5.0 + transitivePeerDependencies: + - '@types/react' + - acorn + - bufferutil + - encoding + - eslint + - supports-color + - utf-8-validate + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + + /@storybook/core-server/6.4.19_7c8c8296f464bed180230583a2e7108c: resolution: {integrity: sha512-bKsUB9f7hl5ya2JXxpIrErmbDQjoH39FVbzYZWjMo4t/b7+Xyi6vYadwyWcqlpUQmis09ZaSMv8L/Tw0TuwLAA==} peerDependencies: '@storybook/builder-webpack5': 6.4.19 @@ -10534,12 +11863,14 @@ packages: dependencies: '@discoveryjs/json-ext': 0.5.7 '@storybook/builder-webpack4': 6.4.19_3c9642e85c55378a78283e2c58ad860d + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 '@storybook/core-client': 6.4.19_typescript@4.6.2+webpack@4.46.0 '@storybook/core-common': 6.4.19_ad5fc232a476648e022b673b2e1293fc '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/csf-tools': 6.4.19 '@storybook/manager-webpack4': 6.4.19_3c9642e85c55378a78283e2c58ad860d + '@storybook/manager-webpack5': 6.4.19_typescript@4.2.4 '@storybook/node-logger': 6.4.19 '@storybook/semver': 7.3.2 '@storybook/store': 6.4.19 @@ -10588,7 +11919,7 @@ packages: - webpack-command dev: true - /@storybook/core-server/6.4.19_42c4a06ed0e2cc1fdb58490e9ba7de2e: + /@storybook/core-server/6.4.19_bd8532947d2e6ce2622b1981219456e8: resolution: {integrity: sha512-bKsUB9f7hl5ya2JXxpIrErmbDQjoH39FVbzYZWjMo4t/b7+Xyi6vYadwyWcqlpUQmis09ZaSMv8L/Tw0TuwLAA==} peerDependencies: '@storybook/builder-webpack5': 6.4.19 @@ -10605,18 +11936,18 @@ packages: optional: true dependencies: '@discoveryjs/json-ext': 0.5.7 - '@storybook/builder-webpack4': 6.4.19_7f108b73cd811a4229905aae8cce3ccd - '@storybook/builder-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/core-client': 6.4.19_89d5fc67cc6e8d5f95b899f1abfc6753 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e + '@storybook/builder-webpack4': 6.4.19_typescript@4.2.4 + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 + '@storybook/core-client': 6.4.19_typescript@4.2.4+webpack@4.46.0 + '@storybook/core-common': 6.4.19_typescript@4.2.4 '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/csf-tools': 6.4.19 - '@storybook/manager-webpack4': 6.4.19_7f108b73cd811a4229905aae8cce3ccd - '@storybook/manager-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e + '@storybook/manager-webpack4': 6.4.19_typescript@4.2.4 + '@storybook/manager-webpack5': 6.4.19_typescript@4.2.4 '@storybook/node-logger': 6.4.19 '@storybook/semver': 7.3.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/store': 6.4.19 '@types/node': 14.14.33 '@types/node-fetch': 2.6.1 '@types/pretty-hrtime': 1.0.1 @@ -10639,17 +11970,15 @@ packages: node-fetch: 2.6.7 pretty-hrtime: 1.0.3 prompts: 2.4.2 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 regenerator-runtime: 0.13.9 serve-favicon: 2.5.0 slash: 3.0.0 telejson: 5.3.3 ts-dedent: 2.2.0 - typescript: 4.6.2 + typescript: 4.2.4 util-deprecate: 1.0.2 watchpack: 2.2.0 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 ws: 8.5.0 transitivePeerDependencies: - '@types/react' @@ -10664,83 +11993,7 @@ packages: - webpack-command dev: true - /@storybook/core-server/6.4.19_8c312791082e0b705c61c5574ae96b7c: - resolution: {integrity: sha512-bKsUB9f7hl5ya2JXxpIrErmbDQjoH39FVbzYZWjMo4t/b7+Xyi6vYadwyWcqlpUQmis09ZaSMv8L/Tw0TuwLAA==} - peerDependencies: - '@storybook/builder-webpack5': 6.4.19 - '@storybook/manager-webpack5': 6.4.19 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - typescript: '*' - peerDependenciesMeta: - '@storybook/builder-webpack5': - optional: true - '@storybook/manager-webpack5': - optional: true - typescript: - optional: true - dependencies: - '@discoveryjs/json-ext': 0.5.7 - '@storybook/builder-webpack4': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/builder-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/core-client': 6.4.19_89d5fc67cc6e8d5f95b899f1abfc6753 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/csf-tools': 6.4.19 - '@storybook/manager-webpack4': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/manager-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/node-logger': 6.4.19 - '@storybook/semver': 7.3.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@types/node': 14.14.33 - '@types/node-fetch': 2.6.1 - '@types/pretty-hrtime': 1.0.1 - '@types/webpack': 4.41.32 - better-opn: 2.1.1 - boxen: 5.1.2 - chalk: 4.1.2 - cli-table3: 0.6.1 - commander: 6.2.1 - compression: 1.7.4 - core-js: 3.21.1 - cpy: 8.1.2 - detect-port: 1.3.0 - express: 4.17.1 - file-system-cache: 1.0.5 - fs-extra: 9.1.0 - globby: 11.1.0 - ip: 1.1.5 - lodash: 4.17.21 - node-fetch: 2.6.7 - pretty-hrtime: 1.0.3 - prompts: 2.4.2 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - serve-favicon: 2.5.0 - slash: 3.0.0 - telejson: 5.3.3 - ts-dedent: 2.2.0 - typescript: 4.6.2 - util-deprecate: 1.0.2 - watchpack: 2.2.0 - webpack: 4.46.0_webpack-cli@4.9.2 - ws: 8.5.0 - transitivePeerDependencies: - - '@types/react' - - acorn - - bufferutil - - encoding - - eslint - - supports-color - - utf-8-validate - - vue-template-compiler - - webpack-cli - - webpack-command - dev: true - - /@storybook/core-server/6.4.19_ad5fc232a476648e022b673b2e1293fc: + /@storybook/core-server/6.4.19_de51fed6d5568596cbb9a47b25330f0e: resolution: {integrity: sha512-bKsUB9f7hl5ya2JXxpIrErmbDQjoH39FVbzYZWjMo4t/b7+Xyi6vYadwyWcqlpUQmis09ZaSMv8L/Tw0TuwLAA==} peerDependencies: '@storybook/builder-webpack5': 6.4.19 @@ -10758,12 +12011,14 @@ packages: dependencies: '@discoveryjs/json-ext': 0.5.7 '@storybook/builder-webpack4': 6.4.19_ad5fc232a476648e022b673b2e1293fc + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 '@storybook/core-client': 6.4.19_typescript@4.6.2+webpack@4.46.0 '@storybook/core-common': 6.4.19_ad5fc232a476648e022b673b2e1293fc '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/csf-tools': 6.4.19 '@storybook/manager-webpack4': 6.4.19_ad5fc232a476648e022b673b2e1293fc + '@storybook/manager-webpack5': 6.4.19_typescript@4.2.4 '@storybook/node-logger': 6.4.19 '@storybook/semver': 7.3.2 '@storybook/store': 6.4.19 @@ -10812,7 +12067,7 @@ packages: - webpack-command dev: true - /@storybook/core/6.4.19_0aa9eeaa726e2cf1920b2ebcd5c10136: + /@storybook/core/6.4.19_56153e2fc75ffe3d23f60c0ecebf9977: resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==} peerDependencies: '@storybook/builder-webpack5': 6.4.19 @@ -10826,8 +12081,9 @@ packages: typescript: optional: true dependencies: + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 '@storybook/core-client': 6.4.19_typescript@4.6.2+webpack@4.46.0 - '@storybook/core-server': 6.4.19_ad5fc232a476648e022b673b2e1293fc + '@storybook/core-server': 6.4.19_de51fed6d5568596cbb9a47b25330f0e typescript: 4.6.2 webpack: 4.46.0_webpack-cli@3.3.12 transitivePeerDependencies: @@ -10844,7 +12100,7 @@ packages: - webpack-command dev: true - /@storybook/core/6.4.19_4a2c49d703ffc87352c156b0c4186be7: + /@storybook/core/6.4.19_c15466773815ac7b8bfbbf8420ba0ee2: resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==} peerDependencies: '@storybook/builder-webpack5': 6.4.19 @@ -10858,8 +12114,75 @@ packages: typescript: optional: true dependencies: + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 + '@storybook/core-client': 6.4.19_typescript@4.2.4+webpack@4.46.0 + '@storybook/core-server': 6.4.19_bd8532947d2e6ce2622b1981219456e8 + typescript: 4.2.4 + webpack: 4.46.0 + transitivePeerDependencies: + - '@storybook/manager-webpack5' + - '@types/react' + - acorn + - bufferutil + - encoding + - eslint + - supports-color + - utf-8-validate + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + + /@storybook/core/6.4.19_daa74e9ea57648d1383d4f5a915eef9c: + resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==} + peerDependencies: + '@storybook/builder-webpack5': 6.4.19 + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + typescript: '*' + webpack: '*' + peerDependenciesMeta: + '@storybook/builder-webpack5': + optional: true + typescript: + optional: true + dependencies: + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 + '@storybook/core-client': 6.4.19_typescript@4.2.4+webpack@5.70.0 + '@storybook/core-server': 6.4.19_32ff3fc743ba90b9723aa5427911cd5d + typescript: 4.2.4 + webpack: 5.70.0 + transitivePeerDependencies: + - '@storybook/manager-webpack5' + - '@types/react' + - acorn + - bufferutil + - encoding + - eslint + - supports-color + - utf-8-validate + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + + /@storybook/core/6.4.19_e254c6bc0c2d82a31a4b49f99644f2ac: + resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==} + peerDependencies: + '@storybook/builder-webpack5': 6.4.19 + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + typescript: '*' + webpack: '*' + peerDependenciesMeta: + '@storybook/builder-webpack5': + optional: true + typescript: + optional: true + dependencies: + '@storybook/builder-webpack5': 6.4.19_typescript@4.2.4 '@storybook/core-client': 6.4.19_typescript@4.6.2+webpack@5.70.0 - '@storybook/core-server': 6.4.19_3c9642e85c55378a78283e2c58ad860d + '@storybook/core-server': 6.4.19_7c8c8296f464bed180230583a2e7108c typescript: 4.6.2 webpack: 5.70.0_webpack-cli@3.3.12 transitivePeerDependencies: @@ -10876,76 +12199,6 @@ packages: - webpack-command dev: true - /@storybook/core/6.4.19_937e6324d1a779a4b68436e9ddd056f3: - resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==} - peerDependencies: - '@storybook/builder-webpack5': 6.4.19 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - typescript: '*' - webpack: '*' - peerDependenciesMeta: - '@storybook/builder-webpack5': - optional: true - typescript: - optional: true - dependencies: - '@storybook/builder-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/core-client': 6.4.19_e7281081368b6c9b5567d9536ed3f600 - '@storybook/core-server': 6.4.19_42c4a06ed0e2cc1fdb58490e9ba7de2e - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - typescript: 4.6.2 - webpack: 5.70.0_webpack-cli@4.9.2 - transitivePeerDependencies: - - '@storybook/manager-webpack5' - - '@types/react' - - acorn - - bufferutil - - encoding - - eslint - - supports-color - - utf-8-validate - - vue-template-compiler - - webpack-cli - - webpack-command - dev: true - - /@storybook/core/6.4.19_9591feef39d6ac368407db3801bf47b1: - resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==} - peerDependencies: - '@storybook/builder-webpack5': 6.4.19 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - typescript: '*' - webpack: '*' - peerDependenciesMeta: - '@storybook/builder-webpack5': - optional: true - typescript: - optional: true - dependencies: - '@storybook/builder-webpack5': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/core-client': 6.4.19_89d5fc67cc6e8d5f95b899f1abfc6753 - '@storybook/core-server': 6.4.19_8c312791082e0b705c61c5574ae96b7c - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - typescript: 4.6.2 - webpack: 4.46.0_webpack-cli@4.9.2 - transitivePeerDependencies: - - '@storybook/manager-webpack5' - - '@types/react' - - acorn - - bufferutil - - encoding - - eslint - - supports-color - - utf-8-validate - - vue-template-compiler - - webpack-cli - - webpack-command - dev: true - /@storybook/csf-tools/6.4.19: resolution: {integrity: sha512-gf/zRhGoAVsFwSyV2tc+jeJfZQkxF6QsaZgbUSe24/IUvGFCT/PS/jZq1qy7dECAwrTOfykgu8juyBtj6WhWyw==} dependencies: @@ -10976,66 +12229,6 @@ packages: lodash: 4.17.21 dev: true - /@storybook/manager-webpack4/6.4.19_038a1a9b7a6f260609bc9d14f1ae100e: - resolution: {integrity: sha512-R8ugZjTYqXvlc6gDOcw909L65sIleOmIJLZR+N6/H85MivGXHu39jOwONqB7tVACufRty4FNecn8tEiQL2SAKA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@babel/core': 7.17.8 - '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.17.8 - '@babel/preset-react': 7.16.7_@babel+core@7.17.8 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-client': 6.4.19_89d5fc67cc6e8d5f95b899f1abfc6753 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e - '@storybook/node-logger': 6.4.19 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/ui': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@types/node': 14.14.33 - '@types/webpack': 4.41.32 - babel-loader: 8.2.3_b72fb7e629d39881e138edb6dcd0dfbe - case-sensitive-paths-webpack-plugin: 2.4.0 - chalk: 4.1.2 - core-js: 3.21.1 - css-loader: 3.6.0_webpack@4.46.0 - express: 4.17.1 - file-loader: 6.2.0_webpack@4.46.0 - file-system-cache: 1.0.5 - find-up: 5.0.0 - fs-extra: 9.1.0 - html-webpack-plugin: 4.5.2_webpack@4.46.0 - node-fetch: 2.6.7 - pnp-webpack-plugin: 1.6.4_typescript@4.6.2 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - read-pkg-up: 7.0.1 - regenerator-runtime: 0.13.9 - resolve-from: 5.0.0 - style-loader: 1.3.0_webpack@4.46.0 - telejson: 5.3.3 - terser-webpack-plugin: 4.2.3_webpack@4.46.0 - ts-dedent: 2.2.0 - typescript: 4.6.2 - url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 - util-deprecate: 1.0.2 - webpack: 4.46.0_webpack-cli@4.9.2 - webpack-dev-middleware: 3.7.3_webpack@4.46.0 - webpack-virtual-modules: 0.2.2 - transitivePeerDependencies: - - '@types/react' - - acorn - - encoding - - eslint - - supports-color - - vue-template-compiler - - webpack-cli - - webpack-command - dev: true - /@storybook/manager-webpack4/6.4.19_3c9642e85c55378a78283e2c58ad860d: resolution: {integrity: sha512-R8ugZjTYqXvlc6gDOcw909L65sIleOmIJLZR+N6/H85MivGXHu39jOwONqB7tVACufRty4FNecn8tEiQL2SAKA==} peerDependencies: @@ -11094,7 +12287,7 @@ packages: - webpack-command dev: true - /@storybook/manager-webpack4/6.4.19_7f108b73cd811a4229905aae8cce3ccd: + /@storybook/manager-webpack4/6.4.19_acorn@7.4.1+typescript@4.2.4: resolution: {integrity: sha512-R8ugZjTYqXvlc6gDOcw909L65sIleOmIJLZR+N6/H85MivGXHu39jOwONqB7tVACufRty4FNecn8tEiQL2SAKA==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -11107,12 +12300,12 @@ packages: '@babel/core': 7.17.8 '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.17.8 '@babel/preset-react': 7.16.7_@babel+core@7.17.8 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-client': 6.4.19_89d5fc67cc6e8d5f95b899f1abfc6753 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e + '@storybook/addons': 6.4.19 + '@storybook/core-client': 6.4.19_typescript@4.2.4+webpack@4.46.0 + '@storybook/core-common': 6.4.19_typescript@4.2.4 '@storybook/node-logger': 6.4.19 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/ui': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/theming': 6.4.19 + '@storybook/ui': 6.4.19 '@types/node': 14.14.33 '@types/webpack': 4.41.32 babel-loader: 8.2.3_b72fb7e629d39881e138edb6dcd0dfbe @@ -11127,9 +12320,7 @@ packages: fs-extra: 9.1.0 html-webpack-plugin: 4.5.2_webpack@4.46.0 node-fetch: 2.6.7 - pnp-webpack-plugin: 1.6.4_typescript@4.6.2 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + pnp-webpack-plugin: 1.6.4_typescript@4.2.4 read-pkg-up: 7.0.1 regenerator-runtime: 0.13.9 resolve-from: 5.0.0 @@ -11137,10 +12328,10 @@ packages: telejson: 5.3.3 terser-webpack-plugin: 4.2.3_acorn@7.4.1+webpack@4.46.0 ts-dedent: 2.2.0 - typescript: 4.6.2 + typescript: 4.2.4 url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 util-deprecate: 1.0.2 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 webpack-dev-middleware: 3.7.3_webpack@4.46.0 webpack-virtual-modules: 0.2.2 transitivePeerDependencies: @@ -11212,7 +12403,65 @@ packages: - webpack-command dev: true - /@storybook/manager-webpack5/6.4.19_038a1a9b7a6f260609bc9d14f1ae100e: + /@storybook/manager-webpack4/6.4.19_typescript@4.2.4: + resolution: {integrity: sha512-R8ugZjTYqXvlc6gDOcw909L65sIleOmIJLZR+N6/H85MivGXHu39jOwONqB7tVACufRty4FNecn8tEiQL2SAKA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@babel/core': 7.17.8 + '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.17.8 + '@babel/preset-react': 7.16.7_@babel+core@7.17.8 + '@storybook/addons': 6.4.19 + '@storybook/core-client': 6.4.19_typescript@4.2.4+webpack@4.46.0 + '@storybook/core-common': 6.4.19_typescript@4.2.4 + '@storybook/node-logger': 6.4.19 + '@storybook/theming': 6.4.19 + '@storybook/ui': 6.4.19 + '@types/node': 14.14.33 + '@types/webpack': 4.41.32 + babel-loader: 8.2.3_b72fb7e629d39881e138edb6dcd0dfbe + case-sensitive-paths-webpack-plugin: 2.4.0 + chalk: 4.1.2 + core-js: 3.21.1 + css-loader: 3.6.0_webpack@4.46.0 + express: 4.17.1 + file-loader: 6.2.0_webpack@4.46.0 + file-system-cache: 1.0.5 + find-up: 5.0.0 + fs-extra: 9.1.0 + html-webpack-plugin: 4.5.2_webpack@4.46.0 + node-fetch: 2.6.7 + pnp-webpack-plugin: 1.6.4_typescript@4.2.4 + read-pkg-up: 7.0.1 + regenerator-runtime: 0.13.9 + resolve-from: 5.0.0 + style-loader: 1.3.0_webpack@4.46.0 + telejson: 5.3.3 + terser-webpack-plugin: 4.2.3_webpack@4.46.0 + ts-dedent: 2.2.0 + typescript: 4.2.4 + url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 + util-deprecate: 1.0.2 + webpack: 4.46.0 + webpack-dev-middleware: 3.7.3_webpack@4.46.0 + webpack-virtual-modules: 0.2.2 + transitivePeerDependencies: + - '@types/react' + - acorn + - encoding + - eslint + - supports-color + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + + /@storybook/manager-webpack5/6.4.19_typescript@4.2.4: resolution: {integrity: sha512-hVjWhWAOgWaymBy0HeRskN+MfKLpqLP4Txfw+3Xqg1qplgexV0w2O4BQrS/SNEH4V/1qF9h8XTsk3L3oQIj3Mg==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -11225,12 +12474,12 @@ packages: '@babel/core': 7.17.8 '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.17.8 '@babel/preset-react': 7.16.7_@babel+core@7.17.8 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-client': 6.4.19_e7281081368b6c9b5567d9536ed3f600 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e + '@storybook/addons': 6.4.19 + '@storybook/core-client': 6.4.19_typescript@4.2.4+webpack@5.70.0 + '@storybook/core-common': 6.4.19_typescript@4.2.4 '@storybook/node-logger': 6.4.19 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/ui': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/theming': 6.4.19 + '@storybook/ui': 6.4.19 '@types/node': 14.14.33 babel-loader: 8.2.3_fa907c5a4f16ccc493e21649ccc59574 case-sensitive-paths-webpack-plugin: 2.4.0 @@ -11244,8 +12493,6 @@ packages: html-webpack-plugin: 5.5.0_webpack@5.70.0 node-fetch: 2.6.7 process: 0.11.10 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 read-pkg-up: 7.0.1 regenerator-runtime: 0.13.9 resolve-from: 5.0.0 @@ -11253,9 +12500,9 @@ packages: telejson: 5.3.3 terser-webpack-plugin: 5.2.5_webpack@5.70.0 ts-dedent: 2.2.0 - typescript: 4.6.2 + typescript: 4.2.4 util-deprecate: 1.0.2 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 webpack-dev-middleware: 4.3.0_webpack@5.70.0 webpack-virtual-modules: 0.4.3 transitivePeerDependencies: @@ -11312,30 +12559,23 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/preview-web/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-jqltoBv5j7lvnxEfV9w8dLX9ASWGuvgz97yg8Yo5FqkftEwrHJenyvMGcTgDJKJPorF+wiz/9aIqnmd3LCAcZQ==} + /@storybook/react-docgen-typescript-plugin/1.0.2-canary.253f8c1.0_typescript@4.2.4+webpack@4.46.0: + resolution: {integrity: sha512-mmoRG/rNzAiTbh+vGP8d57dfcR2aP+5/Ll03KKFyfy5FqWFm/Gh7u27ikx1I3LmVMI8n6jh5SdWMkMKon7/tDw==} peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 + typescript: '>= 3.x' + webpack: '>= 4' dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/channel-postmessage': 6.4.19 - '@storybook/client-logger': 6.4.19 - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 - ansi-to-html: 0.6.15 - core-js: 3.21.1 - global: 4.4.0 - lodash: 4.17.21 - qs: 6.10.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - synchronous-promise: 2.0.15 - ts-dedent: 2.2.0 - unfetch: 4.2.0 - util-deprecate: 1.0.2 + debug: 4.3.3 + endent: 2.1.0 + find-cache-dir: 3.3.2 + flat-cache: 3.0.4 + micromatch: 4.0.4 + react-docgen-typescript: 2.2.2_typescript@4.2.4 + tslib: 2.3.1 + typescript: 4.2.4 + webpack: 4.46.0 + transitivePeerDependencies: + - supports-color dev: true /@storybook/react-docgen-typescript-plugin/1.0.2-canary.253f8c1.0_typescript@4.6.2+webpack@4.46.0: @@ -11352,12 +12592,12 @@ packages: react-docgen-typescript: 2.2.2_typescript@4.6.2 tslib: 2.3.1 typescript: 4.6.2 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0_webpack-cli@3.3.12 transitivePeerDependencies: - supports-color dev: true - /@storybook/react/6.4.19_9f1f8f17cdd455b6ef8e501a921b145c: + /@storybook/react/6.4.19_1a3cbc393c8e54a301ca95e65ea44c36: resolution: {integrity: sha512-5b3i8jkVrjQGmcxxxXwCduHPIh+cluWkfeweKeQOe+lW4BR8fuUICo3AMLrYPAtB/UcaJyYkIYmTvF2mkfepFA==} engines: {node: '>=10.13.0'} hasBin: true @@ -11372,34 +12612,32 @@ packages: typescript: optional: true dependencies: - '@babel/core': 7.17.8 - '@babel/preset-flow': 7.16.7_@babel+core@7.17.8 - '@babel/preset-react': 7.16.7_@babel+core@7.17.8 + '@babel/core': 7.12.9 + '@babel/preset-flow': 7.16.7_@babel+core@7.12.9 + '@babel/preset-react': 7.16.7_@babel+core@7.12.9 '@pmmmwh/react-refresh-webpack-plugin': 0.5.1_06cd85ae30adde416cafc06517ba554d - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core': 6.4.19_9591feef39d6ac368407db3801bf47b1 - '@storybook/core-common': 6.4.19_038a1a9b7a6f260609bc9d14f1ae100e + '@storybook/addons': 6.4.19 + '@storybook/core': 6.4.19_c15466773815ac7b8bfbbf8420ba0ee2 + '@storybook/core-common': 6.4.19_typescript@4.2.4 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/node-logger': 6.4.19 - '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.253f8c1.0_typescript@4.6.2+webpack@4.46.0 + '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.253f8c1.0_typescript@4.2.4+webpack@4.46.0 '@storybook/semver': 7.3.2 - '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/store': 6.4.19 '@types/webpack-env': 1.16.3 babel-plugin-add-react-displayname: 0.0.5 - babel-plugin-named-asset-import: 0.3.8_@babel+core@7.17.8 + babel-plugin-named-asset-import: 0.3.8_@babel+core@7.12.9 babel-plugin-react-docgen: 4.2.1 core-js: 3.21.1 global: 4.4.0 lodash: 4.17.21 prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 react-refresh: 0.11.0 read-pkg-up: 7.0.1 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 - typescript: 4.6.2 - webpack: 4.46.0_webpack-cli@4.9.2 + typescript: 4.2.4 + webpack: 4.46.0 transitivePeerDependencies: - '@storybook/builder-webpack5' - '@storybook/manager-webpack5' @@ -11421,7 +12659,7 @@ packages: - webpack-plugin-serve dev: true - /@storybook/react/6.4.19_df9bce9a6d10cedcb22cc302b49e05b8: + /@storybook/react/6.4.19_ce33fa78e84ed7674385e603320a18f7: resolution: {integrity: sha512-5b3i8jkVrjQGmcxxxXwCduHPIh+cluWkfeweKeQOe+lW4BR8fuUICo3AMLrYPAtB/UcaJyYkIYmTvF2mkfepFA==} engines: {node: '>=10.13.0'} hasBin: true @@ -11441,7 +12679,7 @@ packages: '@babel/preset-react': 7.16.7_@babel+core@7.17.8 '@pmmmwh/react-refresh-webpack-plugin': 0.5.1_06cd85ae30adde416cafc06517ba554d '@storybook/addons': 6.4.19 - '@storybook/core': 6.4.19_0aa9eeaa726e2cf1920b2ebcd5c10136 + '@storybook/core': 6.4.19_56153e2fc75ffe3d23f60c0ecebf9977 '@storybook/core-common': 6.4.19_ad5fc232a476648e022b673b2e1293fc '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/node-logger': 6.4.19 @@ -11502,27 +12740,6 @@ packages: ts-dedent: 2.2.0 dev: true - /@storybook/router/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-KWWwIzuyeEIWVezkCihwY2A76Il9tUNg0I410g9qT7NrEsKyqXGRYOijWub7c1GGyNjLqz0jtrrehtixMcJkuA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@storybook/client-logger': 6.4.19 - core-js: 3.21.1 - fast-deep-equal: 3.1.3 - global: 4.4.0 - history: 5.0.0 - lodash: 4.17.21 - memoizerific: 1.11.3 - qs: 6.10.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-router: 6.2.2_react@17.0.2 - react-router-dom: 6.2.2_react-dom@17.0.2+react@17.0.2 - ts-dedent: 2.2.0 - dev: true - /@storybook/semver/7.3.2: resolution: {integrity: sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==} engines: {node: '>=10'} @@ -11550,26 +12767,6 @@ packages: regenerator-runtime: 0.13.9 dev: true - /@storybook/source-loader/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-XqTsqddRglvfW7mhyjwoqd/B8L6samcBehhO0OEbsFp6FPWa9eXuObCxtRYIcjcSIe+ksbW3D/54ppEs1L/g1Q==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/client-logger': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - core-js: 3.21.1 - estraverse: 5.3.0 - global: 4.4.0 - loader-utils: 2.0.2 - lodash: 4.17.21 - prettier: 2.3.0 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - dev: true - /@storybook/store/6.4.19: resolution: {integrity: sha512-N9/ZjemRHGfT3InPIbqQqc6snkcfnf3Qh9oOr0smbfaVGJol//KOX65kzzobtzFcid0WxtTDZ3HmgFVH+GvuhQ==} peerDependencies: @@ -11593,31 +12790,6 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/store/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-N9/ZjemRHGfT3InPIbqQqc6snkcfnf3Qh9oOr0smbfaVGJol//KOX65kzzobtzFcid0WxtTDZ3HmgFVH+GvuhQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/client-logger': 6.4.19 - '@storybook/core-events': 6.4.19 - '@storybook/csf': 0.0.2--canary.87bc651.0 - core-js: 3.21.1 - fast-deep-equal: 3.1.3 - global: 4.4.0 - lodash: 4.17.21 - memoizerific: 1.11.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - regenerator-runtime: 0.13.9 - slash: 3.0.0 - stable: 0.1.8 - synchronous-promise: 2.0.15 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - dev: true - /@storybook/theming/6.4.19: resolution: {integrity: sha512-V4pWmTvAxmbHR6B3jA4hPkaxZPyExHvCToy7b76DpUTpuHihijNDMAn85KhOQYIeL9q14zP/aiz899tOHsOidg==} peerDependencies: @@ -11638,28 +12810,6 @@ packages: ts-dedent: 2.2.0 dev: true - /@storybook/theming/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-V4pWmTvAxmbHR6B3jA4hPkaxZPyExHvCToy7b76DpUTpuHihijNDMAn85KhOQYIeL9q14zP/aiz899tOHsOidg==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@emotion/core': 10.3.1_react@17.0.2 - '@emotion/is-prop-valid': 0.8.8 - '@emotion/styled': 10.3.0_316248eb6686a2fd4fbadcfd00de37f3 - '@storybook/client-logger': 6.4.19 - core-js: 3.21.1 - deep-object-diff: 1.1.7 - emotion-theming: 10.3.0_316248eb6686a2fd4fbadcfd00de37f3 - global: 4.4.0 - memoizerific: 1.11.3 - polished: 4.1.4 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - resolve-from: 5.0.0 - ts-dedent: 2.2.0 - dev: true - /@storybook/ui/6.4.19: resolution: {integrity: sha512-gFwdn5LA2U6oQ4bfUFLyHZnNasGQ01YVdwjbi+l6yjmnckBNtZfJoVTZ1rzGUbxSE9rK48InJRU+latTsr7xAg==} peerDependencies: @@ -11698,46 +12848,6 @@ packages: - '@types/react' dev: true - /@storybook/ui/6.4.19_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-gFwdn5LA2U6oQ4bfUFLyHZnNasGQ01YVdwjbi+l6yjmnckBNtZfJoVTZ1rzGUbxSE9rK48InJRU+latTsr7xAg==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@emotion/core': 10.3.1_react@17.0.2 - '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/channels': 6.4.19 - '@storybook/client-logger': 6.4.19 - '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/core-events': 6.4.19 - '@storybook/router': 6.4.19_react-dom@17.0.2+react@17.0.2 - '@storybook/semver': 7.3.2 - '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 - copy-to-clipboard: 3.3.1 - core-js: 3.21.1 - core-js-pure: 3.19.1 - downshift: 6.1.7_react@17.0.2 - emotion-theming: 10.3.0_316248eb6686a2fd4fbadcfd00de37f3 - fuse.js: 3.6.1 - global: 4.4.0 - lodash: 4.17.21 - markdown-to-jsx: 7.1.7_react@17.0.2 - memoizerific: 1.11.3 - polished: 4.1.4 - qs: 6.10.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-draggable: 4.4.4_react-dom@17.0.2+react@17.0.2 - react-helmet-async: 1.2.3_react-dom@17.0.2+react@17.0.2 - react-sizeme: 3.0.2 - regenerator-runtime: 0.13.9 - resolve-from: 5.0.0 - store2: 2.13.2 - transitivePeerDependencies: - - '@types/react' - dev: true - /@stylelint/postcss-css-in-js/0.37.2_4f7b71a942b8b7a555b8adf78f88122b: resolution: {integrity: sha512-nEhsFoJurt8oUmieT8qy4nk81WRHmJynmVwn/Vts08PL9fhgIsMhk1GId5yAN643OzqEEb5S/6At2TZW7pqPDA==} peerDependencies: @@ -12110,13 +13220,6 @@ packages: '@types/trusted-types': 2.0.2 dev: true - /@types/eslint-scope/3.7.1: - resolution: {integrity: sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==} - dependencies: - '@types/eslint': 7.29.0 - '@types/estree': 0.0.50 - dev: true - /@types/eslint-scope/3.7.3: resolution: {integrity: sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==} dependencies: @@ -12284,7 +13387,6 @@ packages: /@types/mousetrap/1.6.9: resolution: {integrity: sha512-HUAiN65VsRXyFCTicolwb5+I7FM6f72zjMWr+ajGk+YTvzBgXqa2A5U7d+rtsouAkunJ5U4Sb5lNJjo9w+nmXg==} - dev: false /@types/node-fetch/2.6.1: resolution: {integrity: sha512-oMqjURCaxoSIsHSr1E47QHzbmzNR5rK8McHuNb11BOM9cHcIK3Avy0s/b2JlXHoQGTYS3NsvWzV1M0iK7l0wbA==} @@ -13968,15 +15070,15 @@ packages: '@babel/core': 7.16.12 '@babel/plugin-transform-react-jsx': 7.16.0_@babel+core@7.16.12 '@babel/plugin-transform-runtime': 7.16.4_@babel+core@7.16.12 - '@babel/preset-env': 7.16.4_@babel+core@7.16.12 + '@babel/preset-env': 7.16.11_@babel+core@7.16.12 '@babel/preset-typescript': 7.16.7_@babel+core@7.16.12 - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.17.7 '@wordpress/babel-plugin-import-jsx-pragma': 3.1.0_@babel+core@7.16.12 '@wordpress/browserslist-config': 4.1.0 '@wordpress/element': 4.0.4 '@wordpress/warning': 2.2.2 browserslist: 4.19.3 - core-js: 3.19.1 + core-js: 3.21.1 transitivePeerDependencies: - supports-color dev: false @@ -14257,7 +15359,6 @@ packages: mousetrap: 1.6.5 react-resize-aware: 3.1.1 use-memo-one: 1.1.2 - dev: false /@wordpress/compose/5.2.1_react@17.0.2: resolution: {integrity: sha512-0l5UOiq5tDFeuIsdSVsWzNETHZagTnSBSTdGsxDmKIi5NC7vf1pXs4rlrEA45vUdFm/SbpIA9gp+NFzfpVKIXw==} @@ -14416,7 +15517,6 @@ packages: redux: 4.1.2 turbo-combine-reducers: 1.0.2 use-memo-one: 1.1.2 - dev: false /@wordpress/data/6.4.1_react@17.0.2: resolution: {integrity: sha512-pDTQl+cmVvwyGuGo6DtWkSGtIz6FTJw87XxtRkOeuQlEqsfHoyXSA4da7cBY5o22Ss5P5408hXjR0SAIqEBhmg==} @@ -14490,7 +15590,6 @@ packages: dependencies: '@babel/runtime': 7.17.7 '@wordpress/hooks': 3.5.0 - dev: false /@wordpress/dom-ready/3.4.1: resolution: {integrity: sha512-w6DVKKpNwX0XUp0Cuh1OyFyGXLabr47k/ecRHKmQkQh9LdjRew7QvxUHYDN1rejRvq5GqcDb7Gnkz4E6hWIo4Q==} @@ -14519,7 +15618,6 @@ packages: dependencies: '@babel/runtime': 7.17.7 lodash: 4.17.21 - dev: false /@wordpress/e2e-test-utils/3.0.0_jest@24.9.0+puppeteer@2.1.1: resolution: {integrity: sha512-XMdR8DeKyDQRF5jKeUlOzP4pTRtoJuOLsNZRLUFUvnrs9y/7/hH17VmPbWp3TJGvV/eGKzO4+D+wJTsP9nJmIw==} @@ -14603,7 +15701,7 @@ packages: resolution: {integrity: sha512-GbYVSZrHitOmupQCjb7cSlewVigXHorpZUBpvWnkU3rhyh1tF/N9qve3fgg7Q3s2szjtTP+eEutB+4mmkwHQOA==} engines: {node: '>=12'} dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.17.7 '@types/react': 16.14.21 '@types/react-dom': 16.9.14 '@wordpress/escape-html': 2.2.3 @@ -14874,7 +15972,6 @@ packages: engines: {node: '>=12'} dependencies: '@babel/runtime': 7.17.7 - dev: false /@wordpress/html-entities/3.4.1: resolution: {integrity: sha512-wSuwgONTefnhCB9B7mKS+e8islHuCkprfDc+FhqVAa6r5RbVBGvaHUJs8embgdtww7MwBRMnskNf/buQ8Jr02A==} @@ -14951,7 +16048,6 @@ packages: engines: {node: '>=12'} dependencies: '@babel/runtime': 7.17.7 - dev: false /@wordpress/jest-console/3.10.0_jest@25.5.4: resolution: {integrity: sha512-iS1GSO+o7+p2PhvScOquD+IK7WqmVxa2s9uTUQyNEo06f9EUv6KNw0B1iZ00DpbgLqDCiczfdCNapC816UXIIA==} @@ -15083,7 +16179,6 @@ packages: '@babel/runtime': 7.17.7 '@wordpress/i18n': 4.4.1 lodash: 4.17.21 - dev: false /@wordpress/notices/3.4.1: resolution: {integrity: sha512-Y7e2GLlB5wjLOtxsXzJd3jg/p6LV2GeeUnk+reURqUbb/4rlVlXQuMPOboTxLRB/0eTMNwWFI/MIr+NKbuY7MQ==} @@ -15202,7 +16297,6 @@ packages: engines: {node: '>=12'} dependencies: '@babel/runtime': 7.17.7 - dev: false /@wordpress/redux-routine/3.14.2: resolution: {integrity: sha512-aqi4UtvMP/+NhULxyCR8ktG0v4BJVTRcMpByAqDg7Oabq2sz2LPuShxd5UY8vxQYQY9t1uUJbslhom4ytcohWg==} @@ -15224,7 +16318,6 @@ packages: lodash: 4.17.21 redux: 4.1.2 rungen: 0.3.2 - dev: false /@wordpress/rich-text/5.2.1: resolution: {integrity: sha512-PBoDPQjihEOteHlDvVRtAjmDTx3T3NRr/GAX8MKVajECWFhiS6tKY2R/llg7fnJAinCIhEAfpNwQDpx2UCp3bA==} @@ -15531,14 +16624,6 @@ packages: acorn-walk: 7.2.0 dev: true - /acorn-import-assertions/1.8.0_acorn@8.5.0: - resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==} - peerDependencies: - acorn: ^8 - dependencies: - acorn: 8.5.0 - dev: true - /acorn-import-assertions/1.8.0_acorn@8.7.0: resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==} peerDependencies: @@ -16512,6 +17597,21 @@ packages: - supports-color dev: true + /babel-loader/8.2.3_2126ca8a005869f6c62d5aa977e8d816: + resolution: {integrity: sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==} + engines: {node: '>= 8.9'} + peerDependencies: + '@babel/core': ^7.0.0 + webpack: '>=2' + dependencies: + '@babel/core': 7.16.0 + find-cache-dir: 3.3.2 + loader-utils: 1.4.0 + make-dir: 3.1.0 + schema-utils: 2.7.1 + webpack: 5.70.0 + dev: true + /babel-loader/8.2.3_b72fb7e629d39881e138edb6dcd0dfbe: resolution: {integrity: sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==} engines: {node: '>= 8.9'} @@ -16527,6 +17627,21 @@ packages: webpack: 4.46.0_webpack-cli@3.3.12 dev: true + /babel-loader/8.2.3_d3f6fe5812216e437b67a6bf164a056c: + resolution: {integrity: sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==} + engines: {node: '>= 8.9'} + peerDependencies: + '@babel/core': ^7.0.0 + webpack: '>=2' + dependencies: + '@babel/core': 7.12.9 + find-cache-dir: 3.3.2 + loader-utils: 1.4.0 + make-dir: 3.1.0 + schema-utils: 2.7.1 + webpack: 5.70.0 + dev: true + /babel-loader/8.2.3_fa907c5a4f16ccc493e21649ccc59574: resolution: {integrity: sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==} engines: {node: '>= 8.9'} @@ -16542,21 +17657,6 @@ packages: webpack: 5.70.0_webpack-cli@4.9.2 dev: true - /babel-loader/8.2.3_fda98f9ff70e0481a7d2271d8792a29b: - resolution: {integrity: sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==} - engines: {node: '>= 8.9'} - peerDependencies: - '@babel/core': ^7.0.0 - webpack: '>=2' - dependencies: - '@babel/core': 7.16.0 - find-cache-dir: 3.3.2 - loader-utils: 1.4.0 - make-dir: 3.1.0 - schema-utils: 2.7.1 - webpack: 5.64.1 - dev: true - /babel-messages/6.23.0: resolution: {integrity: sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=} dependencies: @@ -16688,7 +17788,7 @@ packages: /babel-plugin-macros/2.8.0: resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==} dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.17.7 cosmiconfig: 6.0.0 resolve: 1.20.0 @@ -16701,6 +17801,14 @@ packages: resolve: 1.20.0 dev: true + /babel-plugin-named-asset-import/0.3.8_@babel+core@7.12.9: + resolution: {integrity: sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==} + peerDependencies: + '@babel/core': ^7.1.0 + dependencies: + '@babel/core': 7.12.9 + dev: true + /babel-plugin-named-asset-import/0.3.8_@babel+core@7.17.8: resolution: {integrity: sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==} peerDependencies: @@ -16819,6 +17927,42 @@ packages: transitivePeerDependencies: - supports-color + /babel-plugin-polyfill-corejs3/0.5.2_@babel+core@7.12.9: + resolution: {integrity: sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.12.9 + '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.12.9 + core-js-compat: 3.21.1 + transitivePeerDependencies: + - supports-color + dev: true + + /babel-plugin-polyfill-corejs3/0.5.2_@babel+core@7.16.0: + resolution: {integrity: sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.0 + '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.16.0 + core-js-compat: 3.21.1 + transitivePeerDependencies: + - supports-color + dev: true + + /babel-plugin-polyfill-corejs3/0.5.2_@babel+core@7.16.12: + resolution: {integrity: sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.16.12 + '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.16.12 + core-js-compat: 3.21.1 + transitivePeerDependencies: + - supports-color + dev: false + /babel-plugin-polyfill-corejs3/0.5.2_@babel+core@7.17.8: resolution: {integrity: sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==} peerDependencies: @@ -18646,7 +19790,7 @@ packages: webpack: 5.70.0_webpack-cli@4.9.2 dev: true - /copy-webpack-plugin/9.1.0_webpack@5.64.1: + /copy-webpack-plugin/9.1.0_webpack@5.70.0: resolution: {integrity: sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -18658,7 +19802,7 @@ packages: normalize-path: 3.0.0 schema-utils: 3.1.1 serialize-javascript: 6.0.0 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /core-js-compat/3.19.1: @@ -18687,10 +19831,6 @@ packages: deprecated: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js. requiresBuild: true - /core-js/3.19.1: - resolution: {integrity: sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==} - requiresBuild: true - /core-js/3.21.1: resolution: {integrity: sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==} requiresBuild: true @@ -18976,24 +20116,7 @@ packages: postcss-value-parser: 4.2.0 schema-utils: 3.1.1 semver: 7.3.5 - webpack: 5.70.0_webpack-cli@4.9.2 - dev: true - - /css-loader/6.5.1_webpack@5.64.1: - resolution: {integrity: sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==} - engines: {node: '>= 12.13.0'} - peerDependencies: - webpack: ^5.0.0 - dependencies: - icss-utils: 5.1.0_postcss@8.3.11 - postcss: 8.3.11 - postcss-modules-extract-imports: 3.0.0_postcss@8.3.11 - postcss-modules-local-by-default: 4.0.0_postcss@8.3.11 - postcss-modules-scope: 3.0.0_postcss@8.3.11 - postcss-modules-values: 4.0.0_postcss@8.3.11 - postcss-value-parser: 4.1.0 - semver: 7.3.5 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /css-loader/6.7.1_webpack@5.70.0: @@ -19010,10 +20133,10 @@ packages: postcss-modules-values: 4.0.0_postcss@8.4.12 postcss-value-parser: 4.2.0 semver: 7.3.5 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 dev: true - /css-minimizer-webpack-plugin/3.1.3_webpack@5.64.1: + /css-minimizer-webpack-plugin/3.1.3_webpack@5.70.0: resolution: {integrity: sha512-x+6kzXprepysouo513zKibWCbWTGIvH9OrEsMRRV8EcJ7vYY/zRg0lR8tCzMHMap+lhNPOrYCdDagjRmfnGGxw==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -19035,7 +20158,7 @@ packages: schema-utils: 3.1.1 serialize-javascript: 6.0.0 source-map: 0.6.1 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /css-select-base-adapter/0.1.1: @@ -20135,19 +21258,6 @@ packages: resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==} engines: {node: '>= 4'} - /emotion-theming/10.3.0_316248eb6686a2fd4fbadcfd00de37f3: - resolution: {integrity: sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==} - peerDependencies: - '@emotion/core': ^10.0.27 - react: '>=16.3.0' - dependencies: - '@babel/runtime': 7.17.7 - '@emotion/core': 10.3.1_react@17.0.2 - '@emotion/weak-memoize': 0.2.5 - hoist-non-react-statics: 3.3.2 - react: 17.0.2 - dev: true - /emotion-theming/10.3.0_@emotion+core@10.3.1: resolution: {integrity: sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==} peerDependencies: @@ -22413,10 +23523,10 @@ packages: dependencies: loader-utils: 2.0.2 schema-utils: 3.1.1 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 dev: true - /file-loader/6.2.0_webpack@5.64.1: + /file-loader/6.2.0_webpack@5.70.0: resolution: {integrity: sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -22424,7 +23534,7 @@ packages: dependencies: loader-utils: 2.0.2 schema-utils: 3.1.1 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /file-sync-cmp/0.1.1: @@ -22825,38 +23935,6 @@ packages: webpack: 5.70.0_webpack-cli@4.9.2 dev: true - /fork-ts-checker-webpack-plugin/6.5.0_5cc3eafe4d1d9014e8dc18ad98f28e04: - resolution: {integrity: sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==} - engines: {node: '>=10', yarn: '>=1.0.0'} - peerDependencies: - eslint: '>= 6' - typescript: '>= 2.7' - vue-template-compiler: '*' - webpack: '>= 4' - peerDependenciesMeta: - eslint: - optional: true - vue-template-compiler: - optional: true - dependencies: - '@babel/code-frame': 7.16.7 - '@types/json-schema': 7.0.9 - chalk: 4.1.2 - chokidar: 3.5.3 - cosmiconfig: 6.0.0 - deepmerge: 4.2.2 - eslint: 8.11.0 - fs-extra: 9.1.0 - glob: 7.2.0 - memfs: 3.3.0 - minimatch: 3.1.2 - schema-utils: 2.7.0 - semver: 7.3.5 - tapable: 1.1.3 - typescript: 4.6.2 - webpack: 4.46.0_webpack-cli@4.9.2 - dev: true - /fork-ts-checker-webpack-plugin/6.5.0_ec34b068c8cf37561abcf5fd5b20a134: resolution: {integrity: sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==} engines: {node: '>=10', yarn: '>=1.0.0'} @@ -22889,6 +23967,68 @@ packages: webpack: 4.46.0_webpack-cli@3.3.12 dev: true + /fork-ts-checker-webpack-plugin/6.5.0_typescript@4.2.4+webpack@4.46.0: + resolution: {integrity: sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==} + engines: {node: '>=10', yarn: '>=1.0.0'} + peerDependencies: + eslint: '>= 6' + typescript: '>= 2.7' + vue-template-compiler: '*' + webpack: '>= 4' + peerDependenciesMeta: + eslint: + optional: true + vue-template-compiler: + optional: true + dependencies: + '@babel/code-frame': 7.16.7 + '@types/json-schema': 7.0.9 + chalk: 4.1.2 + chokidar: 3.5.3 + cosmiconfig: 6.0.0 + deepmerge: 4.2.2 + fs-extra: 9.1.0 + glob: 7.2.0 + memfs: 3.3.0 + minimatch: 3.1.2 + schema-utils: 2.7.0 + semver: 7.3.5 + tapable: 1.1.3 + typescript: 4.2.4 + webpack: 4.46.0 + dev: true + + /fork-ts-checker-webpack-plugin/6.5.0_typescript@4.2.4+webpack@5.70.0: + resolution: {integrity: sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==} + engines: {node: '>=10', yarn: '>=1.0.0'} + peerDependencies: + eslint: '>= 6' + typescript: '>= 2.7' + vue-template-compiler: '*' + webpack: '>= 4' + peerDependenciesMeta: + eslint: + optional: true + vue-template-compiler: + optional: true + dependencies: + '@babel/code-frame': 7.16.7 + '@types/json-schema': 7.0.9 + chalk: 4.1.2 + chokidar: 3.5.3 + cosmiconfig: 6.0.0 + deepmerge: 4.2.2 + fs-extra: 9.1.0 + glob: 7.2.0 + memfs: 3.3.0 + minimatch: 3.1.2 + schema-utils: 2.7.0 + semver: 7.3.5 + tapable: 1.1.3 + typescript: 4.2.4 + webpack: 5.70.0 + dev: true + /form-data/2.3.3: resolution: {integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==} engines: {node: '>= 0.12'} @@ -23010,15 +24150,6 @@ packages: rimraf: 2.7.1 dev: true - /fs-extra/10.0.1: - resolution: {integrity: sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==} - engines: {node: '>=12'} - dependencies: - graceful-fs: 4.2.9 - jsonfile: 6.1.0 - universalify: 2.0.0 - dev: false - /fs-extra/6.0.1: resolution: {integrity: sha512-GnyIkKhhzXZUWFCaJzvyDLEEgDkPfb4/TPvJCJVuS8MWZgoSsErf++QpiAlDnKFcqhRlm+tIOcencCjyJE6ZCA==} dependencies: @@ -24261,7 +25392,7 @@ packages: pretty-error: 2.1.2 tapable: 1.1.3 util.promisify: 1.0.0 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 dev: true /html-webpack-plugin/5.5.0_webpack@5.70.0: @@ -24275,7 +25406,7 @@ packages: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 transitivePeerDependencies: - acorn dev: true @@ -24565,15 +25696,6 @@ packages: postcss: 8.3.0 dev: true - /icss-utils/5.1.0_postcss@8.3.11: - resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==} - engines: {node: ^10 || ^12 || >= 14} - peerDependencies: - postcss: ^8.1.0 - dependencies: - postcss: 8.3.11 - dev: true - /icss-utils/5.1.0_postcss@8.4.12: resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==} engines: {node: ^10 || ^12 || >= 14} @@ -27349,7 +28471,7 @@ packages: resolution: {integrity: sha512-PtGdVK9EGC7dsaziskfqaAPib6wTViY3G8E5wz9tLVPhHyiDNTZn/xjZ4khAw+09QkoOVpn7vF5nPSN6dtBexA==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} dependencies: - '@types/node': 16.10.3 + '@types/node': 17.0.21 graceful-fs: 4.2.9 dev: true @@ -27801,7 +28923,7 @@ packages: /jsbn/0.1.1: resolution: {integrity: sha1-peZUwuWi3rXyAdls77yoDA7y9RM=} - /jscodeshift/0.13.1: + /jscodeshift/0.13.1_@babel+preset-env@7.16.11: resolution: {integrity: sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ==} hasBin: true peerDependencies: @@ -27813,6 +28935,7 @@ packages: '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.17.8 '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.17.8 '@babel/plugin-transform-modules-commonjs': 7.17.7_@babel+core@7.17.8 + '@babel/preset-env': 7.16.11_@babel+core@7.12.9 '@babel/preset-flow': 7.16.7_@babel+core@7.17.8 '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8 '@babel/register': 7.17.7_@babel+core@7.17.8 @@ -28175,7 +29298,7 @@ packages: deprecated: use String.prototype.padStart() dev: false - /less-loader/10.2.0_less@3.12.2+webpack@5.64.1: + /less-loader/10.2.0_less@3.12.2+webpack@5.70.0: resolution: {integrity: sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -28184,7 +29307,7 @@ packages: dependencies: klona: 2.0.5 less: 3.12.2 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /less/3.12.2: @@ -28818,15 +29941,6 @@ packages: react: '>= 0.14.0' dev: true - /markdown-to-jsx/7.1.7_react@17.0.2: - resolution: {integrity: sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==} - engines: {node: '>= 10'} - peerDependencies: - react: '>= 0.14.0' - dependencies: - react: 17.0.2 - dev: true - /markdownlint-cli/0.21.0: resolution: {integrity: sha512-gvnczz3W3Wgex851/cIQ/2y8GNhY+EVK8Ael8kRd8hoSQ0ps9xjhtwPwMyJPoiYbAoPxG6vSBFISiysaAbCEZg==} engines: {node: '>=8'} @@ -29292,14 +30406,14 @@ packages: webpack-sources: 1.4.3 dev: true - /mini-css-extract-plugin/2.4.4_webpack@5.64.1: + /mini-css-extract-plugin/2.4.4_webpack@5.70.0: resolution: {integrity: sha512-UJ+aNuFQaQaECu7AamlWOBLj2cJ6XSGU4zNiqXeZ7lZLe5VD0DoSPWFbWArXueo+6FZVbgHzpX9lUIaBIDLuYg==} engines: {node: '>= 12.13.0'} peerDependencies: webpack: ^5.0.0 dependencies: schema-utils: 3.1.1 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /mini-css-extract-plugin/2.6.0_webpack@5.70.0: @@ -30977,6 +32091,15 @@ packages: /pn/1.1.0: resolution: {integrity: sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==} + /pnp-webpack-plugin/1.6.4_typescript@4.2.4: + resolution: {integrity: sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==} + engines: {node: '>=6'} + dependencies: + ts-pnp: 1.2.0_typescript@4.2.4 + transitivePeerDependencies: + - typescript + dev: true + /pnp-webpack-plugin/1.6.4_typescript@4.6.2: resolution: {integrity: sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==} engines: {node: '>=6'} @@ -31297,10 +32420,10 @@ packages: postcss: 7.0.39 schema-utils: 3.1.1 semver: 7.3.5 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 dev: true - /postcss-loader/6.2.0_postcss@8.3.0+webpack@5.64.1: + /postcss-loader/6.2.0_postcss@8.3.0+webpack@5.70.0: resolution: {integrity: sha512-H9hv447QjQJVDbHj3OUdciyAXY3v5+UDduzEytAlZCVHCpNAAg/mCSwhYYqZr9BiGYhmYspU8QXxZwiHTLn3yA==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -31311,7 +32434,7 @@ packages: klona: 2.0.5 postcss: 8.3.0 semver: 7.3.5 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /postcss-media-query-parser/0.2.3: @@ -31533,15 +32656,6 @@ packages: postcss: 8.3.0 dev: true - /postcss-modules-extract-imports/3.0.0_postcss@8.3.11: - resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==} - engines: {node: ^10 || ^12 || >= 14} - peerDependencies: - postcss: ^8.1.0 - dependencies: - postcss: 8.3.11 - dev: true - /postcss-modules-extract-imports/3.0.0_postcss@8.4.12: resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==} engines: {node: ^10 || ^12 || >= 14} @@ -31572,18 +32686,6 @@ packages: postcss-value-parser: 4.2.0 dev: true - /postcss-modules-local-by-default/4.0.0_postcss@8.3.11: - resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==} - engines: {node: ^10 || ^12 || >= 14} - peerDependencies: - postcss: ^8.1.0 - dependencies: - icss-utils: 5.1.0_postcss@8.3.11 - postcss: 8.3.11 - postcss-selector-parser: 6.0.9 - postcss-value-parser: 4.2.0 - dev: true - /postcss-modules-local-by-default/4.0.0_postcss@8.4.12: resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==} engines: {node: ^10 || ^12 || >= 14} @@ -31613,16 +32715,6 @@ packages: postcss-selector-parser: 6.0.9 dev: true - /postcss-modules-scope/3.0.0_postcss@8.3.11: - resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==} - engines: {node: ^10 || ^12 || >= 14} - peerDependencies: - postcss: ^8.1.0 - dependencies: - postcss: 8.3.11 - postcss-selector-parser: 6.0.9 - dev: true - /postcss-modules-scope/3.0.0_postcss@8.4.12: resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==} engines: {node: ^10 || ^12 || >= 14} @@ -31649,16 +32741,6 @@ packages: postcss: 8.3.0 dev: true - /postcss-modules-values/4.0.0_postcss@8.3.11: - resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==} - engines: {node: ^10 || ^12 || >= 14} - peerDependencies: - postcss: ^8.1.0 - dependencies: - icss-utils: 5.1.0_postcss@8.3.11 - postcss: 8.3.11 - dev: true - /postcss-modules-values/4.0.0_postcss@8.4.12: resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==} engines: {node: ^10 || ^12 || >= 14} @@ -32456,6 +33538,7 @@ packages: resolution: {integrity: sha512-WnR9obtgW+rG4oUV3hSnNGl1pHm3V1H/qD9iJBumGSmVsSC5HpZOLuu8qdMb6yCItGfT7dcRszejr/5P3i9Pug==} dependencies: read: 1.0.7 + dev: true /prompts/2.4.2: resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} @@ -32640,6 +33723,7 @@ packages: engines: {node: '>=0.6'} dependencies: side-channel: 1.0.4 + dev: false /qs/6.10.3: resolution: {integrity: sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==} @@ -32763,18 +33847,7 @@ packages: dependencies: loader-utils: 2.0.2 schema-utils: 3.1.1 - webpack: 4.46.0_webpack-cli@4.9.2 - dev: true - - /raw-loader/4.0.2_webpack@5.64.1: - resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==} - engines: {node: '>= 10.13.0'} - peerDependencies: - webpack: ^4.0.0 || ^5.0.0 - dependencies: - loader-utils: 2.0.2 - schema-utils: 3.1.1 - webpack: 5.64.1 + webpack: 4.46.0 dev: true /raw-loader/4.0.2_webpack@5.70.0: @@ -32848,6 +33921,7 @@ packages: dependencies: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 + dev: false /react-dates/17.2.0_d0804d3726ad84366bcc42e494508e1e: resolution: {integrity: sha512-RDlerU8DdRRrlYS0MQ7Z9igPWABGLDwz6+ykBNff67RM3Sset2TDqeuOr+R5o00Ggn5U47GeLsGcSDxlZd9cHw==} @@ -32907,6 +33981,14 @@ packages: - utf-8-validate dev: true + /react-docgen-typescript/2.2.2_typescript@4.2.4: + resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} + peerDependencies: + typescript: '>= 4.3.x' + dependencies: + typescript: 4.2.4 + dev: true + /react-docgen-typescript/2.2.2_typescript@4.6.2: resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} peerDependencies: @@ -32966,18 +34048,6 @@ packages: prop-types: 15.8.1 dev: true - /react-draggable/4.4.4_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==} - peerDependencies: - react: '>= 16.3.0' - react-dom: '>= 16.3.0' - dependencies: - clsx: 1.1.1 - prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - dev: true - /react-element-to-jsx-string/14.3.4: resolution: {integrity: sha512-t4ZwvV6vwNxzujDQ+37bspnLwA4JlgUPWhLjBJWsNIDceAf6ZKUTCjdm08cN6WeZ5pTMKiCJkmAYnpmR4Bm+dg==} peerDependencies: @@ -32989,19 +34059,6 @@ packages: react-is: 17.0.2 dev: true - /react-element-to-jsx-string/14.3.4_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-t4ZwvV6vwNxzujDQ+37bspnLwA4JlgUPWhLjBJWsNIDceAf6ZKUTCjdm08cN6WeZ5pTMKiCJkmAYnpmR4Bm+dg==} - peerDependencies: - react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 - react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 - dependencies: - '@base2/pretty-print-object': 1.0.1 - is-plain-object: 5.0.0 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-is: 17.0.2 - dev: true - /react-error-boundary/3.1.4: resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==} engines: {node: '>=10', npm: '>=6'} @@ -33038,21 +34095,6 @@ packages: shallowequal: 1.1.0 dev: true - /react-helmet-async/1.2.3_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-mCk2silF53Tq/YaYdkl2sB+/tDoPnaxN7dFS/6ZLJb/rhUY2EWGI5Xj2b4jHppScMqY45MbgPSwTxDchKpZ5Kw==} - peerDependencies: - react: ^16.6.0 || ^17.0.0 - react-dom: ^16.6.0 || ^17.0.0 - dependencies: - '@babel/runtime': 7.17.7 - invariant: 2.2.4 - prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-fast-compare: 3.2.0 - shallowequal: 1.1.0 - dev: true - /react-input-autosize/3.0.0: resolution: {integrity: sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==} peerDependencies: @@ -33061,15 +34103,6 @@ packages: prop-types: 15.8.1 dev: true - /react-input-autosize/3.0.0_react@17.0.2: - resolution: {integrity: sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==} - peerDependencies: - react: ^16.3.0 || ^17.0.0 - dependencies: - prop-types: 15.8.1 - react: 17.0.2 - dev: true - /react-inspector/5.1.1: resolution: {integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==} peerDependencies: @@ -33080,17 +34113,6 @@ packages: prop-types: 15.8.1 dev: true - /react-inspector/5.1.1_react@17.0.2: - resolution: {integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==} - peerDependencies: - react: ^16.8.4 || ^17.0.0 - dependencies: - '@babel/runtime': 7.17.7 - is-dom: 1.1.0 - prop-types: 15.8.1 - react: 17.0.2 - dev: true - /react-is/16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -33153,31 +34175,6 @@ packages: react-popper: 2.2.5_@popperjs+core@2.11.4 dev: true - /react-popper-tooltip/3.1.1_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==} - peerDependencies: - react: ^16.6.0 || ^17.0.0 - react-dom: ^16.6.0 || ^17.0.0 - dependencies: - '@babel/runtime': 7.17.7 - '@popperjs/core': 2.11.4 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-popper: 2.2.5_2e9dd80dbd4df675244d857293d4c5b0 - dev: true - - /react-popper/2.2.5_2e9dd80dbd4df675244d857293d4c5b0: - resolution: {integrity: sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==} - peerDependencies: - '@popperjs/core': ^2.0.0 - react: ^16.8.0 || ^17 - dependencies: - '@popperjs/core': 2.11.4 - react: 17.0.2 - react-fast-compare: 3.2.0 - warning: 4.0.3 - dev: true - /react-popper/2.2.5_@popperjs+core@2.11.4: resolution: {integrity: sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==} peerDependencies: @@ -33288,18 +34285,6 @@ packages: react-router: 6.2.2 dev: true - /react-router-dom/6.2.2_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==} - peerDependencies: - react: '>=16.8' - react-dom: '>=16.8' - dependencies: - history: 5.3.0 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-router: 6.2.2_react@17.0.2 - dev: true - /react-router/5.2.1: resolution: {integrity: sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==} peerDependencies: @@ -33343,15 +34328,6 @@ packages: history: 5.3.0 dev: true - /react-router/6.2.2_react@17.0.2: - resolution: {integrity: sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==} - peerDependencies: - react: '>=16.8' - dependencies: - history: 5.3.0 - react: 17.0.2 - dev: true - /react-select/3.2.0: resolution: {integrity: sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==} peerDependencies: @@ -33368,24 +34344,6 @@ packages: react-transition-group: 4.4.2 dev: true - /react-select/3.2.0_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@babel/runtime': 7.17.7 - '@emotion/cache': 10.0.29 - '@emotion/core': 10.3.1_react@17.0.2 - '@emotion/css': 10.0.27 - memoize-one: 5.2.1 - prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - react-input-autosize: 3.0.0_react@17.0.2 - react-transition-group: 4.4.2_react-dom@17.0.2+react@17.0.2 - dev: true - /react-shallow-renderer/16.14.1: resolution: {integrity: sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==} peerDependencies: @@ -33426,19 +34384,6 @@ packages: refractor: 3.6.0 dev: true - /react-syntax-highlighter/13.5.3_react@17.0.2: - resolution: {integrity: sha512-crPaF+QGPeHNIblxxCdf2Lg936NAHKhNhuMzRL3F9ct6aYXL3NcZtCL0Rms9+qVo6Y1EQLdXGypBNSbPL/r+qg==} - peerDependencies: - react: '>= 0.14.0' - dependencies: - '@babel/runtime': 7.17.7 - highlight.js: 10.7.3 - lowlight: 1.20.0 - prismjs: 1.27.0 - react: 17.0.2 - refractor: 3.6.0 - dev: true - /react-test-renderer/16.14.0: resolution: {integrity: sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==} peerDependencies: @@ -33498,20 +34443,6 @@ packages: - '@types/react' dev: true - /react-textarea-autosize/8.3.3_react@17.0.2: - resolution: {integrity: sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==} - engines: {node: '>=10'} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - dependencies: - '@babel/runtime': 7.17.7 - react: 17.0.2 - use-composed-ref: 1.2.1_react@17.0.2 - use-latest: 1.2.0_react@17.0.2 - transitivePeerDependencies: - - '@types/react' - dev: true - /react-transition-group/4.4.2: resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==} peerDependencies: @@ -33535,6 +34466,7 @@ packages: prop-types: 15.8.1 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 + dev: false /react-visibility-sensor/5.1.1: resolution: {integrity: sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==} @@ -33716,6 +34648,7 @@ packages: engines: {node: '>=0.8'} dependencies: mute-stream: 0.0.8 + dev: true /readable-stream/2.3.7: resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==} @@ -34650,33 +35583,9 @@ packages: sass: 1.49.9 schema-utils: 3.1.1 semver: 7.3.5 - webpack: 5.70.0_webpack-cli@4.9.2 - dev: true - - /sass-loader/10.2.1_webpack@5.70.0: - resolution: {integrity: sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==} - engines: {node: '>= 10.13.0'} - peerDependencies: - fibers: '>= 3.1.0' - node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 - sass: ^1.3.0 - webpack: ^4.36.0 || ^5.0.0 - peerDependenciesMeta: - fibers: - optional: true - node-sass: - optional: true - sass: - optional: true - dependencies: - klona: 2.0.5 - loader-utils: 2.0.2 - neo-async: 2.6.2 - schema-utils: 3.1.1 - semver: 7.3.5 webpack: 5.70.0 - /sass-loader/12.3.0_sass@1.45.0+webpack@5.64.1: + /sass-loader/12.3.0_sass@1.49.9+webpack@5.70.0: resolution: {integrity: sha512-6l9qwhdOb7qSrtOu96QQ81LVl8v6Dp9j1w3akOm0aWHyrTYtagDt5+kS32N4yq4hHk3M+rdqoRMH+lIdqvW6HA==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -34694,8 +35603,8 @@ packages: dependencies: klona: 2.0.5 neo-async: 2.6.2 - sass: 1.45.0 - webpack: 5.64.1 + sass: 1.49.9 + webpack: 5.70.0 dev: true /sass-loader/8.0.2_sass@1.49.9+webpack@4.46.0: @@ -35233,7 +36142,7 @@ packages: loader-utils: 1.4.0 dev: true - /source-map-loader/3.0.0_webpack@5.64.1: + /source-map-loader/3.0.0_webpack@5.70.0: resolution: {integrity: sha512-GKGWqWvYr04M7tn8dryIWvb0s8YM41z82iQv01yBtIylgxax0CwvSy6gc2Y02iuXwEfGWRlMicH0nvms9UZphw==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -35242,7 +36151,7 @@ packages: abab: 2.0.5 iconv-lite: 0.6.3 source-map-js: 0.6.2 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /source-map-resolve/0.5.3: @@ -35730,7 +36639,7 @@ packages: dependencies: loader-utils: 2.0.2 schema-utils: 2.7.1 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 dev: true /style-loader/2.0.0_webpack@5.70.0: @@ -35741,16 +36650,16 @@ packages: dependencies: loader-utils: 2.0.2 schema-utils: 3.1.1 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 dev: true - /style-loader/3.3.1_webpack@5.64.1: + /style-loader/3.3.1_webpack@5.70.0: resolution: {integrity: sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==} engines: {node: '>= 12.13.0'} peerDependencies: webpack: ^5.0.0 dependencies: - webpack: 5.64.1 + webpack: 5.70.0 dev: true /style-search/0.1.0: @@ -36097,7 +37006,7 @@ packages: resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==} dev: false - /stylus-loader/6.2.0_stylus@0.55.0+webpack@5.64.1: + /stylus-loader/6.2.0_stylus@0.55.0+webpack@5.70.0: resolution: {integrity: sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -36108,7 +37017,7 @@ packages: klona: 2.0.5 normalize-path: 3.0.0 stylus: 0.55.0 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /stylus/0.55.0: @@ -36471,7 +37380,7 @@ packages: serialize-javascript: 5.0.1 source-map: 0.6.1 terser: 5.10.0_acorn@7.4.1 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 webpack-sources: 1.4.3 transitivePeerDependencies: - acorn @@ -36491,38 +37400,12 @@ packages: serialize-javascript: 5.0.1 source-map: 0.6.1 terser: 5.10.0 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 webpack-sources: 1.4.3 transitivePeerDependencies: - acorn dev: true - /terser-webpack-plugin/5.2.5_acorn@8.5.0+webpack@5.64.1: - resolution: {integrity: sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==} - engines: {node: '>= 10.13.0'} - peerDependencies: - '@swc/core': '*' - esbuild: '*' - uglify-js: '*' - webpack: ^5.1.0 - peerDependenciesMeta: - '@swc/core': - optional: true - esbuild: - optional: true - uglify-js: - optional: true - dependencies: - jest-worker: 27.3.1 - schema-utils: 3.1.1 - serialize-javascript: 6.0.0 - source-map: 0.6.1 - terser: 5.10.0_acorn@8.5.0 - webpack: 5.64.1 - transitivePeerDependencies: - - acorn - dev: true - /terser-webpack-plugin/5.2.5_acorn@8.7.0+webpack@5.70.0: resolution: {integrity: sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==} engines: {node: '>= 10.13.0'} @@ -36549,32 +37432,6 @@ packages: - acorn dev: true - /terser-webpack-plugin/5.2.5_webpack@5.64.1: - resolution: {integrity: sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==} - engines: {node: '>= 10.13.0'} - peerDependencies: - '@swc/core': '*' - esbuild: '*' - uglify-js: '*' - webpack: ^5.1.0 - peerDependenciesMeta: - '@swc/core': - optional: true - esbuild: - optional: true - uglify-js: - optional: true - dependencies: - jest-worker: 27.3.1 - schema-utils: 3.1.1 - serialize-javascript: 6.0.0 - source-map: 0.6.1 - terser: 5.10.0 - webpack: 5.64.1 - transitivePeerDependencies: - - acorn - dev: true - /terser-webpack-plugin/5.2.5_webpack@5.70.0: resolution: {integrity: sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==} engines: {node: '>= 10.13.0'} @@ -36596,7 +37453,7 @@ packages: serialize-javascript: 6.0.0 source-map: 0.6.1 terser: 5.10.0 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 transitivePeerDependencies: - acorn dev: true @@ -36652,22 +37509,6 @@ packages: source-map-support: 0.5.20 dev: true - /terser/5.10.0_acorn@8.5.0: - resolution: {integrity: sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==} - engines: {node: '>=10'} - hasBin: true - peerDependencies: - acorn: ^8.5.0 - peerDependenciesMeta: - acorn: - optional: true - dependencies: - acorn: 8.5.0 - commander: 2.20.3 - source-map: 0.7.3 - source-map-support: 0.5.20 - dev: true - /terser/5.10.0_acorn@8.7.0: resolution: {integrity: sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==} engines: {node: '>=10'} @@ -37087,7 +37928,7 @@ packages: yargs-parser: 20.2.9 dev: true - /ts-loader/9.2.6_typescript@4.2.4+webpack@5.64.1: + /ts-loader/9.2.6_typescript@4.2.4+webpack@5.70.0: resolution: {integrity: sha512-QMTC4UFzHmu9wU2VHZEmWWE9cUajjfcdcws+Gh7FhiO+Dy0RnR1bNz0YCHqhI0yRowCE9arVnNxYHqELOy9Hjw==} engines: {node: '>=12.0.0'} peerDependencies: @@ -37099,7 +37940,7 @@ packages: micromatch: 4.0.4 semver: 7.3.5 typescript: 4.2.4 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /ts-node/10.5.0_e0d88945dfc7787883e9c330c9196a96: @@ -37149,6 +37990,18 @@ packages: yn: 3.1.1 dev: true + /ts-pnp/1.2.0_typescript@4.2.4: + resolution: {integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==} + engines: {node: '>=6'} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + typescript: 4.2.4 + dev: true + /ts-pnp/1.2.0_typescript@4.6.2: resolution: {integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==} engines: {node: '>=6'} @@ -37461,7 +38314,7 @@ packages: resolution: {integrity: sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==} engines: {node: '>= 0.8.0'} dependencies: - qs: 6.10.1 + qs: 6.10.3 dev: true /uniq/1.0.1: @@ -37698,7 +38551,7 @@ packages: loader-utils: 2.0.2 mime-types: 2.1.34 schema-utils: 3.1.1 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 dev: true /url-parse-lax/1.0.0: @@ -37728,14 +38581,6 @@ packages: react: ^16.8.0 || ^17.0.0 dev: true - /use-composed-ref/1.2.1_react@17.0.2: - resolution: {integrity: sha512-6+X1FLlIcjvFMAeAD/hcxDT8tmyrWnbSPMU0EnxQuDLIxokuFzWliXBiYZuGIx+mrAMLBw0WFfCkaPw8ebzAhw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - dependencies: - react: 17.0.2 - dev: true - /use-isomorphic-layout-effect/1.1.1: resolution: {integrity: sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==} peerDependencies: @@ -37746,18 +38591,6 @@ packages: optional: true dev: true - /use-isomorphic-layout-effect/1.1.1_react@17.0.2: - resolution: {integrity: sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==} - peerDependencies: - '@types/react': '*' - react: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - react: 17.0.2 - dev: true - /use-latest/1.2.0: resolution: {integrity: sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==} peerDependencies: @@ -37770,19 +38603,6 @@ packages: use-isomorphic-layout-effect: 1.1.1 dev: true - /use-latest/1.2.0_react@17.0.2: - resolution: {integrity: sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==} - peerDependencies: - '@types/react': '*' - react: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - react: 17.0.2 - use-isomorphic-layout-effect: 1.1.1_react@17.0.2 - dev: true - /use-memo-one/1.1.2: resolution: {integrity: sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==} peerDependencies: @@ -38270,7 +39090,7 @@ packages: mime: 2.5.2 mkdirp: 0.5.5 range-parser: 1.2.1 - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 webpack-log: 2.0.0 dev: true @@ -38286,10 +39106,10 @@ packages: mime-types: 2.1.34 range-parser: 1.2.1 schema-utils: 3.1.1 - webpack: 5.70.0_webpack-cli@4.9.2 + webpack: 5.70.0 dev: true - /webpack-dev-middleware/5.2.1_webpack@5.64.1: + /webpack-dev-middleware/5.2.1_webpack@5.70.0: resolution: {integrity: sha512-Kx1X+36Rn9JaZcQMrJ7qN3PMAuKmEDD9ZISjUj3Cgq4A6PtwYsC4mpaKotSRYH3iOF6HsUa8viHKS59FlyVifQ==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -38300,10 +39120,10 @@ packages: mime-types: 2.1.34 range-parser: 1.2.1 schema-utils: 3.1.1 - webpack: 5.64.1 + webpack: 5.70.0 dev: true - /webpack-dev-server/4.5.0_webpack@5.64.1: + /webpack-dev-server/4.5.0_webpack@5.70.0: resolution: {integrity: sha512-Ss4WptsUjYa+3hPI4iYZYEc8FrtnfkaPrm5WTjk9ux5kiCS718836srs0ppKMHRaCHP5mQ6g4JZGcfDdGbCjpQ==} engines: {node: '>= 12.13.0'} hasBin: true @@ -38337,8 +39157,8 @@ packages: spdy: 4.0.2 strip-ansi: 7.0.1 url: 0.11.0 - webpack: 5.64.1 - webpack-dev-middleware: 5.2.1_webpack@5.64.1 + webpack: 5.70.0 + webpack-dev-middleware: 5.2.1_webpack@5.70.0 ws: 8.2.3 transitivePeerDependencies: - bufferutil @@ -38353,7 +39173,7 @@ packages: peerDependencies: webpack: ^2.0.0 || ^3.0.0 || ^4.0.0 dependencies: - webpack: 4.46.0_webpack-cli@4.9.2 + webpack: 4.46.0 dev: true /webpack-fix-style-only-entries/0.6.1: @@ -38439,7 +39259,7 @@ packages: resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} engines: {node: '>=10.13.0'} - /webpack-subresource-integrity/1.5.2_webpack@5.64.1: + /webpack-subresource-integrity/1.5.2_webpack@5.70.0: resolution: {integrity: sha512-GBWYBoyalbo5YClwWop9qe6Zclp8CIXYGIz12OPclJhIrSplDxs1Ls1JDMH8xBPPrg1T6ISaTW9Y6zOrwEiAzw==} engines: {node: '>=4'} peerDependencies: @@ -38449,7 +39269,7 @@ packages: html-webpack-plugin: optional: true dependencies: - webpack: 5.64.1 + webpack: 5.70.0 webpack-sources: 1.4.3 dev: true @@ -38502,6 +39322,44 @@ packages: webpack-sources: 1.4.3 dev: true + /webpack/4.46.0: + resolution: {integrity: sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==} + engines: {node: '>=6.11.5'} + hasBin: true + peerDependencies: + webpack-cli: '*' + webpack-command: '*' + peerDependenciesMeta: + webpack-cli: + optional: true + webpack-command: + optional: true + dependencies: + '@webassemblyjs/ast': 1.9.0 + '@webassemblyjs/helper-module-context': 1.9.0 + '@webassemblyjs/wasm-edit': 1.9.0 + '@webassemblyjs/wasm-parser': 1.9.0 + acorn: 6.4.2 + ajv: 6.12.6 + ajv-keywords: 3.5.2_ajv@6.12.6 + chrome-trace-event: 1.0.3 + enhanced-resolve: 4.5.0 + eslint-scope: 4.0.3 + json-parse-better-errors: 1.0.2 + loader-runner: 2.4.0 + loader-utils: 1.4.0 + memory-fs: 0.4.1 + micromatch: 3.1.10 + mkdirp: 0.5.5 + neo-async: 2.6.2 + node-libs-browser: 2.2.1 + schema-utils: 1.0.0 + tapable: 1.1.3 + terser-webpack-plugin: 1.4.5_webpack@4.46.0 + watchpack: 1.7.5 + webpack-sources: 1.4.3 + dev: true + /webpack/4.46.0_webpack-cli@3.3.12: resolution: {integrity: sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==} engines: {node: '>=6.11.5'} @@ -38537,89 +39395,10 @@ packages: tapable: 1.1.3 terser-webpack-plugin: 1.4.5_webpack@4.46.0 watchpack: 1.7.5 - webpack-cli: 3.3.12_webpack@4.46.0 + webpack-cli: 3.3.12_webpack@5.70.0 webpack-sources: 1.4.3 dev: true - /webpack/4.46.0_webpack-cli@4.9.2: - resolution: {integrity: sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==} - engines: {node: '>=6.11.5'} - hasBin: true - peerDependencies: - webpack-cli: '*' - webpack-command: '*' - peerDependenciesMeta: - webpack-cli: - optional: true - webpack-command: - optional: true - dependencies: - '@webassemblyjs/ast': 1.9.0 - '@webassemblyjs/helper-module-context': 1.9.0 - '@webassemblyjs/wasm-edit': 1.9.0 - '@webassemblyjs/wasm-parser': 1.9.0 - acorn: 6.4.2 - ajv: 6.12.6 - ajv-keywords: 3.5.2_ajv@6.12.6 - chrome-trace-event: 1.0.3 - enhanced-resolve: 4.5.0 - eslint-scope: 4.0.3 - json-parse-better-errors: 1.0.2 - loader-runner: 2.4.0 - loader-utils: 1.4.0 - memory-fs: 0.4.1 - micromatch: 3.1.10 - mkdirp: 0.5.5 - neo-async: 2.6.2 - node-libs-browser: 2.2.1 - schema-utils: 1.0.0 - tapable: 1.1.3 - terser-webpack-plugin: 1.4.5_webpack@4.46.0 - watchpack: 1.7.5 - webpack-cli: 4.9.2_b04de8011015a40c567469bf79798750 - webpack-sources: 1.4.3 - dev: true - - /webpack/5.64.1: - resolution: {integrity: sha512-b4FHmRgaaAjP+aVOVz41a9Qa5SmkUPQ+u8FntTQ1roPHahSComB6rXnLwc976VhUY4CqTaLu5mCswuHiNhOfVw==} - engines: {node: '>=10.13.0'} - hasBin: true - peerDependencies: - webpack-cli: '*' - peerDependenciesMeta: - webpack-cli: - optional: true - dependencies: - '@types/eslint-scope': 3.7.1 - '@types/estree': 0.0.50 - '@webassemblyjs/ast': 1.11.1 - '@webassemblyjs/wasm-edit': 1.11.1 - '@webassemblyjs/wasm-parser': 1.11.1 - acorn: 8.5.0 - acorn-import-assertions: 1.8.0_acorn@8.5.0 - browserslist: 4.18.1 - chrome-trace-event: 1.0.3 - enhanced-resolve: 5.8.3 - es-module-lexer: 0.9.3 - eslint-scope: 5.1.1 - events: 3.3.0 - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.9 - json-parse-better-errors: 1.0.2 - loader-runner: 4.2.0 - mime-types: 2.1.34 - neo-async: 2.6.2 - schema-utils: 3.1.1 - tapable: 2.2.1 - terser-webpack-plugin: 5.2.5_acorn@8.5.0+webpack@5.64.1 - watchpack: 2.2.0 - webpack-sources: 3.2.2 - transitivePeerDependencies: - - '@swc/core' - - esbuild - - uglify-js - dev: true - /webpack/5.70.0: resolution: {integrity: sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==} engines: {node: '>=10.13.0'} @@ -38886,13 +39665,13 @@ packages: errno: 0.1.8 dev: true - /worker-plugin/3.2.0_webpack@5.64.1: + /worker-plugin/3.2.0_webpack@5.70.0: resolution: {integrity: sha512-W5nRkw7+HlbsEt3qRP6MczwDDISjiRj2GYt9+bpe8A2La00TmJdwzG5bpdMXhRt1qcWmwAvl1TiKaHRa+XDS9Q==} peerDependencies: webpack: '>= 4' dependencies: loader-utils: 1.4.0 - webpack: 5.64.1 + webpack: 5.70.0 dev: true /worker-rpc/0.1.1: diff --git a/plugins/woocommerce-admin/storybook/.storybook/main.js b/tools/storybook/.storybook/main.js similarity index 88% rename from plugins/woocommerce-admin/storybook/.storybook/main.js rename to tools/storybook/.storybook/main.js index 5e613f04411..fa574a5461d 100644 --- a/plugins/woocommerce-admin/storybook/.storybook/main.js +++ b/tools/storybook/.storybook/main.js @@ -6,10 +6,10 @@ module.exports = { }, stories: [ // WooCommerce Admin / @woocommerce/components components - '../../../../packages/js/components/src/**/stories/*.@(js|tsx)', + '../../../packages/js/components/src/**/stories/*.@(js|tsx)', // WooCommerce Admin / @woocommerce/experimental components - '../../../../packages/js/experimental/src/**/stories/*.@(js|tsx)', - '../../client/**/stories/*.js', + '../../../packages/js/experimental/src/**/stories/*.@(js|tsx)', + '../../../plugins/woocommerce-admin/client/**/stories/*.js', ], addons: [ '@storybook/addon-docs', diff --git a/plugins/woocommerce-admin/storybook/.storybook/preview-head.html b/tools/storybook/.storybook/preview-head.html similarity index 100% rename from plugins/woocommerce-admin/storybook/.storybook/preview-head.html rename to tools/storybook/.storybook/preview-head.html diff --git a/plugins/woocommerce-admin/bin/import-wp-css-storybook.sh b/tools/storybook/import-wp-css-storybook.sh similarity index 100% rename from plugins/woocommerce-admin/bin/import-wp-css-storybook.sh rename to tools/storybook/import-wp-css-storybook.sh diff --git a/plugins/woocommerce-admin/storybook/manager.js b/tools/storybook/manager.js similarity index 100% rename from plugins/woocommerce-admin/storybook/manager.js rename to tools/storybook/manager.js diff --git a/plugins/woocommerce-admin/storybook/preview.js b/tools/storybook/preview.js similarity index 100% rename from plugins/woocommerce-admin/storybook/preview.js rename to tools/storybook/preview.js diff --git a/plugins/woocommerce-admin/storybook/setting.mock.js b/tools/storybook/setting.mock.js similarity index 100% rename from plugins/woocommerce-admin/storybook/setting.mock.js rename to tools/storybook/setting.mock.js diff --git a/plugins/woocommerce-admin/storybook/tsconfig.json b/tools/storybook/tsconfig.json similarity index 100% rename from plugins/woocommerce-admin/storybook/tsconfig.json rename to tools/storybook/tsconfig.json diff --git a/plugins/woocommerce-admin/storybook/webpack.config.js b/tools/storybook/webpack.config.js similarity index 63% rename from plugins/woocommerce-admin/storybook/webpack.config.js rename to tools/storybook/webpack.config.js index dfb3dc58ca9..7751b5a6bfd 100644 --- a/plugins/woocommerce-admin/storybook/webpack.config.js +++ b/tools/storybook/webpack.config.js @@ -7,7 +7,7 @@ const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); /** * External dependencies */ -const wcAdminWebpackConfig = require( '../webpack.config.js' ); +const wcAdminWebpackConfig = require( '../../plugins/woocommerce-admin/webpack.config.js' ); const wcAdminPackages = [ 'components', @@ -25,21 +25,6 @@ module.exports = ( storybookConfig ) => { storybookConfig.module.rules = [ ...storybookConfig.module.rules, ...wcAdminWebpackConfig.module.rules, - // We need to expose packages in "peerDependencies" to the global scope for @woocommerce/* to resolve packages. - { - test: require.resolve( 'moment' ), - loader: 'expose-loader', - options: { - exposes: [ 'moment' ], - }, - }, - { - test: require.resolve( '@wordpress/data' ), - loader: 'expose-loader', - options: { - exposes: [ '_wp_data' ], - }, - }, ]; storybookConfig.resolve.alias = wcAdminWebpackConfig.resolve.alias; @@ -47,7 +32,7 @@ module.exports = ( storybookConfig ) => { wcAdminPackages.forEach( ( name ) => { storybookConfig.resolve.alias[ `@woocommerce/${ name }` - ] = path.resolve( __dirname, `../../../packages/js/${ name }/src` ); + ] = path.resolve( __dirname, `../../packages/js/${ name }/src` ); } ); storybookConfig.resolve.alias[ '@woocommerce/settings' ] = path.resolve( @@ -56,7 +41,7 @@ module.exports = ( storybookConfig ) => { ); storybookConfig.resolve.modules = [ - path.join( __dirname, '../client' ), + path.join( __dirname, '../../plugins/woocommerce-admin/client' ), 'node_modules', ]; @@ -71,14 +56,14 @@ module.exports = ( storybookConfig ) => { { from: path.resolve( __dirname, - `../../../packages/js/components/build-style/*.css` + `../../packages/js/components/build-style/*.css` ), to: `./component-css/[name][ext]`, }, { from: path.resolve( __dirname, - `../../../packages/js/experimental/build-style/*.css` + `../../packages/js/experimental/build-style/*.css` ), to: `./experimental-css/[name][ext]`, }, @@ -86,10 +71,5 @@ module.exports = ( storybookConfig ) => { } ) ); - storybookConfig.externals = { - '@wordpress/data': '_wp_data', - moment: 'moment', - }; - return storybookConfig; }; diff --git a/plugins/woocommerce-admin/storybook/woocommerce_logo.png b/tools/storybook/woocommerce_logo.png similarity index 100% rename from plugins/woocommerce-admin/storybook/woocommerce_logo.png rename to tools/storybook/woocommerce_logo.png diff --git a/tools/storybook/wordpress/css/about-rtl.css b/tools/storybook/wordpress/css/about-rtl.css new file mode 100644 index 00000000000..2c5efe2afbd --- /dev/null +++ b/tools/storybook/wordpress/css/about-rtl.css @@ -0,0 +1,1473 @@ +/*! This file is auto-generated */ +/*------------------------------------------------------------------------------ + 22.0 - About Pages + + 1.0 Global: About, Credits, Freedoms, Privacy + 1.1 Layout + 1.2 Typography & Elements + 1.3 Header + 2.0 Credits Page + 3.0 Freedoms Page + x.2.0 Legacy About Styles: Global + x.2.1 Typography + x.2.2 Structure + x.2.3 Point Releases + x.3.0 Legacy About Styles: About Page + x.3.1 Typography + x.3.2 Structure + x.4.0 Legacy About Styles: Credits & Freedoms Pages + x.5.0 Legacy About Styles: Media Queries +------------------------------------------------------------------------------*/ + +.about__container { + /* Section backgrounds */ + --background: transparent; + --subtle-background: #def; + + /* Main text color */ + --text: #000; + --text-light: #fff; + + /* Accent colors: used in header, on special classes. */ + --accent-1: #3858e9; /* Accent background, link color */ + --accent-2: #3858e9; /* Header background */ + + /* Navigation colors. */ + --nav-background: #fff; + --nav-border: transparent; + --nav-color: var(--text); + --nav-current: var(--accent-1); + + --gap: 2rem; +} + +/*------------------------------------------------------------------------------ + 1.0 - Global: About, Credits, Freedoms, Privacy +------------------------------------------------------------------------------*/ + +.about-php, +.credits-php, +.freedoms-php, +.privacy-php { + background: #f0f7ff; +} + +.about-php #wpcontent, +.credits-php #wpcontent, +.freedoms-php #wpcontent, +.privacy-php #wpcontent { + background: linear-gradient(-180deg, #fff 50%, #f0f7ff 100%); + padding: 0 24px; +} + +@media screen and (max-width: 782px) { + .about-php.auto-fold #wpcontent, + .credits-php.auto-fold #wpcontent, + .freedoms-php.auto-fold #wpcontent, + .privacy-php.auto-fold #wpcontent { + padding-right: 24px; + } +} + +.about__container { + max-width: 1000px; + margin: 24px auto; + clear: both; +} + +.about__container .alignleft { + float: right; +} + +.about__container .alignright { + float: left; +} + +.about__container .aligncenter { + text-align: center; +} + +.about__container .is-vertically-aligned-top { + align-self: start; +} + +.about__container .is-vertically-aligned-center { + align-self: center; +} + +.about__container .is-vertically-aligned-bottom { + align-self: end; +} + +.about__section { + background: var(--background); + clear: both; +} + +.about__container .has-accent-background-color { + background-color: var(--accent-1); + color: var(--text-light); +} + +.about__container .has-accent-background-color a { + color: var(--text-light); +} + +.about__container .has-transparent-background-color { + background-color: transparent; +} + +.about__container .has-accent-color { + color: var(--accent-1); +} + +.about__container .has-border { + border: 3px solid currentColor; +} + +.about__container .has-subtle-background-color { + background-color: var(--subtle-background); +} + +.about__container .has-background-image { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +/* 1.1 - Layout */ + +.about__section { + margin: 0 0 var(--gap); +} + +.about__section .column:not(.is-edge-to-edge) { + padding: var(--gap); +} + +.about__section + .about__section .is-section-header { + padding-bottom: var(--gap); +} + +.about__section .column[class*="background-color"], +.about__section:where([class*="background-color"]) .column, +.about__section .column.has-border { + padding-top: var(--gap); + padding-bottom: var(--gap); +} + +.about__section .column p:first-of-type { + margin-top: 0; +} + +.about__section .column p:last-of-type { + margin-bottom: 0; +} + +.about__section .has-text-columns { + columns: 2; + column-gap: calc(var(--gap) * 2); +} + +.about__section .is-section-header { + margin-bottom: 0; + padding: var(--gap) var(--gap) 0; +} + +.about__section .is-section-header p:last-child { + margin-bottom: 0; +} + +/* Section header is alone in a container. */ +.about__section .is-section-header:first-child:last-child { + padding: 0; +} + +.about__section.is-feature { + padding: var(--gap); +} + +.about__section.is-feature p { + margin: 0; +} + +.about__section.is-feature p + p { + margin-top: calc(var(--gap) / 2); +} + +.about__section.has-1-column { + margin-right: auto; + margin-left: auto; + max-width: 36em; +} + +.about__section.has-2-columns, +.about__section.has-3-columns, +.about__section.has-4-columns, +.about__section.has-overlap-style { + display: grid; +} + +.about__section.has-gutters { + gap: var(--gap); + margin-bottom: calc(var(--gap) * 2); +} + +.about__section.has-2-columns { + grid-template-columns: 1fr 1fr; +} + +.about__section.has-2-columns.is-wider-right { + grid-template-columns: 2fr 3fr; +} + +.about__section.has-2-columns.is-wider-left { + grid-template-columns: 3fr 2fr; +} + +.about__section.has-2-columns .is-section-header { + grid-column-start: 1; + -ms-grid-column-span: 2; + grid-column-end: span 2; +} + +.about__section.has-2-columns .column:nth-of-type(2n+1) { + grid-column-start: 1; +} + +.about__section.has-2-columns .column:nth-of-type(2n) { + grid-column-start: 2; +} + +.about__section.has-3-columns { + grid-template-columns: repeat(3, 1fr); +} + +.about__section.has-3-columns .is-section-header { + grid-column-start: 1; + -ms-grid-column-span: 3; + grid-column-end: span 3; +} + +.about__section.has-3-columns .column:nth-of-type(3n+1) { + grid-column-start: 1; +} + +.about__section.has-3-columns .column:nth-of-type(3n+2) { + grid-column-start: 2; +} + +.about__section.has-3-columns .column:nth-of-type(3n) { + grid-column-start: 3; +} + +.about__section.has-4-columns { + grid-template-columns: repeat(4, 1fr); +} + +.about__section.has-4-columns .is-section-header { + grid-column-start: 1; + -ms-grid-column-span: 4; + grid-column-end: span 4; +} + +.about__section.has-4-columns .column:nth-of-type(4n+1) { + grid-column-start: 1; +} + +.about__section.has-4-columns .column:nth-of-type(4n+2) { + grid-column-start: 2; +} + +.about__section.has-4-columns .column:nth-of-type(4n+3) { + grid-column-start: 3; +} + +.about__section.has-4-columns .column:nth-of-type(4n) { + grid-column-start: 4; +} + +/* Any columns following a section header need to be expicitly put into the second row, for IE support. */ +.about__section.has-2-columns .is-section-header ~ .column, +.about__section.has-3-columns .is-section-header ~ .column, +.about__section.has-4-columns .is-section-header ~ .column, +.about__section.has-overlap-style .is-section-header ~ .column { + grid-row-start: 2; +} + +.about__section.has-overlap-style { + grid-template-columns: repeat(7, 1fr); +} + +.about__section.has-overlap-style .column { + grid-row-start: 1; +} + +.about__section.has-overlap-style .column:nth-of-type(2n+1) { + grid-column-start: 2; + -ms-grid-column-span: 3; + grid-column-end: span 3; +} + +.about__section.has-overlap-style .column:nth-of-type(2n) { + grid-column-start: 4; + -ms-grid-column-span: 3; + grid-column-end: span 3; +} + +.about__section.has-overlap-style .column.is-top-layer { + z-index: 1; +} + +@media screen and (max-width: 782px) { + .about__section.has-2-columns.is-wider-right, + .about__section.has-2-columns.is-wider-left, + .about__section.has-3-columns { + display: block; + margin-bottom: calc(var(--gap) / 2); + } + + .about__section .column:not(.is-edge-to-edge) { + padding-top: var(--gap); + padding-bottom: var(--gap); + } + + .about__section.has-2-columns.has-gutters.is-wider-right, + .about__section.has-2-columns.has-gutters.is-wider-left, + .about__section.has-3-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); + } + + .about__section.has-2-columns.has-gutters .column, + .about__section.has-2-columns.has-gutters .column, + .about__section.has-3-columns.has-gutters .column { + margin-bottom: var(--gap); + } + + .about__section.has-2-columns.has-gutters .column:last-child, + .about__section.has-2-columns.has-gutters .column:last-child, + .about__section.has-3-columns.has-gutters .column:last-child { + margin-bottom: 0; + } + + .about__section.has-3-columns .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); + } + + .about__section.has-4-columns { + grid-template-columns: repeat(2, 1fr); + } + + .about__section.has-4-columns .column:nth-of-type(2n+1) { + grid-column-start: 1; + } + + .about__section.has-4-columns .column:nth-of-type(2n) { + grid-column-start: 2; + } + + .about__section.has-4-columns .column:nth-of-type(4n+3), + .about__section.has-4-columns .column:nth-of-type(4n) { + grid-row-start: 2; + } + + .about__section.has-4-columns .is-section-header { + -ms-grid-column-span: 2; + grid-column-end: span 2; + } + + .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3), + .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) { + grid-row-start: 3; + } + + .about__section.has-overlap-style { + grid-template-columns: 1fr; + } + + /* At this size, the two columns fully overlap */ + .about__section.has-overlap-style .column.column { + grid-column-start: 1; + -ms-grid-column-span: 1; + grid-column-end: 2; + grid-row-start: 1; + -ms-grid-row-span: 1; + grid-row-end: 2; + } +} + +@media screen and (max-width: 600px) { + .about__section.has-2-columns { + display: block; + margin-bottom: var(--gap); + } + + .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); + } + + .about__section.has-2-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); + } + + .about__section.has-2-columns.has-gutters .column { + margin-bottom: var(--gap); + } + + .about__section.has-2-columns.has-gutters .column:last-child { + margin-bottom: 0; + } +} + +@media screen and (max-width: 480px) { + .about__section.is-feature .column { + padding: 0; + } + + .about__section.has-4-columns { + display: block; + padding-bottom: calc(var(--gap) / 2); + } + + .about__section.has-4-columns.has-gutters .column { + margin-bottom: calc(var(--gap) / 2); + } + + .about__section.has-4-columns.has-gutters .column:last-child { + margin-bottom: 0; + } + + .about__section.has-4-columns .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); + } +} + +/* 1.2 - Typography & Elements */ + +.about__container { + line-height: 1.4; + color: var(--text); +} + +.about__container h1 { + padding: 0; + color: inherit; +} + +.about__container h1, +.about__container h2, +.about__container h3.is-larger-heading { + margin-top: 0; + margin-bottom: 0.5em; + font-size: 2em; + line-height: 1.2; + font-weight: 700; +} + +.about__container h3, +.about__container h1.is-smaller-heading, +.about__container h2.is-smaller-heading { + margin-top: 0; + font-size: 1.6em; + line-height: 1.3; + font-weight: 400; +} + +.about__container p { + font-size: inherit; + line-height: inherit; +} + +.about__container p.is-subheading { + margin-top: 0; + font-size: 1.8em; +} + +.about__section a { + color: var(--accent-1); + text-decoration: underline; +} + +.about__section a:hover, +.about__section a:active, +.about__section a:focus { + color: var(--accent-1); + text-decoration: none; +} + +.wp-credits-list a { + text-decoration: none; +} + +.wp-credits-list a:hover, +.wp-credits-list a:active, +.wp-credits-list a:focus { + text-decoration: underline; +} + +.about__container ul { + list-style: disc; + margin-right: calc(var(--gap) / 2); +} + +.about__container img { + margin: 0; + max-width: 100%; + vertical-align: middle; +} + +.about__container .about__image { + margin: 0; +} + +.about__container .about__image img { + max-width: 100%; + width: 100%; + height: auto; +} + +.about__container .about__image figcaption { + margin-top: 0.5em; + text-align: center; +} + +.about__container .about__image .wp-video { + margin-right: auto; + margin-left: auto; +} + +.about__container .about__image + h3 { + margin-top: 1.5em; +} + +.about__container hr { + margin: 0; + height: var(--gap); + border: none; +} + +.about__container hr.is-small { + height: calc(var(--gap) / 4); +} + +.about__container hr.is-large { + height: calc(var(--gap) * 2); + margin: calc(var(--gap) / 2) auto; +} + +.about__container div.updated, +.about__container div.error, +.about__container .notice { + display: none !important; +} + +.about__section { + font-size: 1.2em; +} + +.about__section.is-feature { + font-size: 1.6em; +} + +@media screen and (max-width: 480px) { + .about__section.is-feature { + font-size: 1.4em; + } + + .about__container h1, + .about__container h2, + .about__container h3.is-larger-heading { + font-size: 2em; + } +} + +/* 1.3 - Header */ + +.about__header { + position: relative; + margin-bottom: var(--gap); + padding-top: 0; + background-image: url('../images/about-texture.png'); + background-color: var(--accent-2); + background-size: 500px 500px; + background-blend-mode: overlay; + color: var(--text-light); +} + +.about__header::before { + content: ""; + position: absolute; + top: 0; + left: 64px; + z-index: 0; + width: 300px; + height: 382px; + background: url(../images/about-header-about.svg) no-repeat center; + background-size: contain; +} + +.credits-php .about__header::before { + top: auto; + bottom: 70px; + height: 310px; + background-image: url('../images/about-header-credits.svg'); +} + +.freedoms-php .about__header::before { + top: calc(50% - 182px); + left: 32px; + width: 375px; + height: 300px; + background-image: url('../images/about-header-freedoms.svg'); +} + +.privacy-php .about__header::before { + top: auto; + bottom: -16px; + background-image: url('../images/about-header-privacy.svg'); +} + +.about__header-image { + margin: 0 var(--gap) 3em; +} + +.about__header-title { + box-sizing: border-box; + /* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */ + padding: 6rem 0 0 380px; + margin: 0 2rem; +} + +.about__header-title h1 { + margin: 0 0 0.5rem; + padding: 0; + font-size: 4.5rem; + line-height: 1; + font-weight: 400; +} + +.about__header-text { + box-sizing: border-box; + margin: 0 0 7rem; + /* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */ + padding: 0 2rem 0 380px; + font-size: 1.6rem; + line-height: 1.15; +} + +.freedoms-php .about__header-title, +.freedoms-php .about__header-text { + /* 423px = 375px (balloon width) + 32px (offset from edge) + 16px (spacing). */ + padding-left: 423px; + margin-left: 0; +} + +.about__header-navigation { + position: relative; + z-index: 1; + display: flex; + justify-content: center; + padding-top: 0; + background: var(--nav-background); + color: var(--nav-color); + border-bottom: 3px solid var(--nav-border); +} + +.about__header-navigation .nav-tab { + margin-right: 0; + padding: calc(var(--gap) * 0.75) var(--gap); + float: none; + font-size: 1.4em; + line-height: 1; + border-width: 0 0 3px; + border-style: solid; + border-color: transparent; + background: transparent; + color: inherit; +} + +.about__header-navigation .nav-tab:hover, +.about__header-navigation .nav-tab:active { + background-color: var(--nav-current); + color: var(--text-light); +} + +.about__header-navigation .nav-tab-active { + margin-bottom: -3px; + color: var(--nav-current); + border-width: 0 0 6px; + border-color: var(--nav-current); +} + +.about__header-navigation .nav-tab-active:hover, +.about__header-navigation .nav-tab-active:active { + background-color: var(--nav-current); + color: var(--text-light); + border-color: var(--nav-current); +} + +@media screen and (max-width: 960px){ + .about__header-title h1 { + font-size: 4.8em; + } +} + +@media screen and (max-width: 782px) { + .about__header::before { + width: 240px; + height: 305px; + left: 32px; + } + + .credits-php .about__header::before { + height: 248px; + } + + .freedoms-php .about__header::before { + top: calc(50% - 132px); + height: 192px; + width: 240px; + } + + .privacy-php .about__header::before { + bottom: 0; + height: 280px; + } + + .about__container .about__header-text { + font-size: 1.4em; + } + + .about__header-container { + display: block; + } + + .about__header-title, + .about__header-text { + /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */ + padding-left: 288px !important; + } + + .about__header-title, + .about__header-image { + margin-right: calc(var(--gap) / 2); + margin-left: calc(var(--gap) / 2); + } + + .about__header-text { + margin-top: 0; + margin-left: 0; + padding-right: calc(var(--gap) / 2); + } + + .about__header-navigation .nav-tab { + margin-top: 0; + margin-left: 0; + padding-right: calc(var(--gap) / 2); + padding-left: calc(var(--gap) / 2); + } +} + +@media screen and (max-width: 600px) { + .about__header::before { + display: none; + } + + .about__header-title, + .about__header-text { + padding-left: calc(var(--gap) / 2) !important; + } +} + +@media screen and (max-width: 480px) { + .about__header-title p { + font-size: 2.4em; + } + + .about__header-title { + padding-top: 2rem; + } + + .about__header-text { + margin-bottom: 2rem; + } + + .about__header-navigation { + display: block; + } + + .about__header-navigation .nav-tab { + display: block; + margin-bottom: 0; + padding: calc(var(--gap) / 2); + border-right-width: 6px; + border-bottom: none; + } + + .about__header-navigation .nav-tab-active { + border-bottom: none; + border-right-width: 6px; + } +} + + +/*------------------------------------------------------------------------------ + 2.0 - Credits Page +------------------------------------------------------------------------------*/ + +.about__section .wp-people-group-title { + margin-bottom: calc(var(--gap) * 2); + text-align: center; + +} + +.about__section .wp-people-group { + margin: 0; + display: flex; + flex-wrap: wrap; +} + +.about__section .wp-person { + display: inline-block; + vertical-align: top; + box-sizing: border-box; + margin-bottom: var(--gap); + width: 25%; + text-align: center; +} + +.about__section .compact .wp-person { + height: auto; + width: 20%; +} + +.about__section .wp-person-avatar { + display: block; + margin: 0 auto calc(var(--gap) / 2); + width: 140px; + height: 140px; + border-radius: 100%; + overflow: hidden; + background: var(--accent-1); +} + +.about__section .wp-person .gravatar { + width: 140px; + height: 140px; + filter: grayscale(100%); + mix-blend-mode: screen; +} + +.about__section .compact .wp-person-avatar, +.about__section .compact .wp-person .gravatar { + width: 80px; + height: 80px; +} + +.about__section .wp-person .web { + font-size: 1.4em; + font-weight: 600; + text-decoration: none; +} + +.about__section .wp-person .web:hover { + text-decoration: underline; +} + +.about__section .compact .wp-person .web { + font-size: 1.2em; +} + +.about__section .wp-person .title { + display: block; + margin-top: 0.5em; +} + +@media screen and (max-width: 782px) { + .about__section .wp-person { + width: 33%; + } + + .about__section .compact .wp-person { + width: 25%; + } + + .about__section .wp-person-avatar, + .about__section .wp-person .gravatar { + width: 120px; + height: 120px; + } +} + +@media screen and (max-width: 600px) { + .about__section .wp-person { + width: 50%; + } + + .about__section .compact .wp-person { + width: 33%; + } + + .about__section .wp-person .web { + font-size: 1.2em; + } +} + +@media screen and (max-width: 480px) { + .about__section .wp-person { + min-width: 100%; + } + + .about__section .wp-person .web { + font-size: 1em; + } + + .about__section .compact .wp-person .web { + font-size: 1em; + } +} + + +/*------------------------------------------------------------------------------ + 3.0 - Freedoms Page +------------------------------------------------------------------------------*/ + +.about__section .column .freedom-image { + margin-bottom: var(--gap); + max-height: 140px; +} + + +/*------------------------------------------------------------------------------ + x.2.0 - Legacy About Styles: Global +------------------------------------------------------------------------------*/ + +.about-wrap { + position: relative; + margin: 25px 20px 0 40px; + max-width: 1050px; /* readability */ + font-size: 15px; +} + +.about-wrap.full-width-layout { + max-width: 1200px; +} + +.about-wrap-content { + max-width: 1050px; +} + +.about-wrap div.updated, +.about-wrap div.error, +.about-wrap .notice { + display: none !important; +} + +.about-wrap hr { + border: 0; + height: 0; + margin: 3em 0 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.about-wrap img { + margin: 0; + width: 100%; + height: auto; + vertical-align: middle; +} + +.about-wrap .inline-svg img { + max-width: 100%; + width: auto; + height: auto; +} + +.about-wrap video { + margin: 1.5em auto; +} + +/* WordPress Version Badge */ + +.wp-badge { + background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; + background-position: center 25px; + background-size: 80px 80px; + color: #fff; + font-size: 14px; + text-align: center; + font-weight: 600; + margin: 5px 0 0; + padding-top: 120px; + height: 40px; + display: inline-block; + width: 140px; + text-rendering: optimizeLegibility; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.svg .wp-badge { + background-image: url(../images/wordpress-logo-white.svg?ver=20160308); +} + +.about-wrap .wp-badge { + position: absolute; + top: 0; + left: 0; +} + +/* Tabs */ + +.about-wrap .nav-tab { + padding-left: 15px; + padding-right: 15px; + font-size: 18px; + line-height: 1.33333333; +} + +/* x.2.1 - Typography */ + +.about-wrap h1 { + margin: 0.2em 0 0 200px; + padding: 0; + color: #32373c; + line-height: 1.2; + font-size: 2.8em; + font-weight: 400; +} + +.about-wrap h2 { + margin: 40px 0 0.6em; + font-size: 2.7em; + line-height: 1.3; + font-weight: 300; + text-align: center; +} + +.about-wrap h3 { + margin: 1.25em 0 0.6em; + font-size: 1.4em; + line-height: 1.5; +} + +.about-wrap h4 { + font-size: 16px; + color: #23282d; +} + +.about-wrap p { + line-height: 1.5; + font-size: 16px; +} + +.about-wrap code, +.about-wrap ol li p { + font-size: 14px; + font-weight: 400; +} + +.about-wrap figcaption { + font-size: 13px; + text-align: center; + color: white; + text-overflow: ellipsis; +} + +.about-wrap .about-description, +.about-wrap .about-text { + margin-top: 1.4em; + font-weight: 400; + line-height: 1.6; + font-size: 19px; +} + +.about-wrap .about-text { + margin: 1em 0 1em 200px; + color: #555d66; +} + +/* x.2.2 - Structure */ + +.about-wrap .has-1-columns, +.about-wrap .has-2-columns, +.about-wrap .has-3-columns, +.about-wrap .has-4-columns { + display: grid; + max-width: 800px; + margin-top: 40px; + margin-right: auto; + margin-left: auto; +} + +.about-wrap .column { + margin-left: 20px; + margin-right: 20px; +} + +.about-wrap .is-wide { + max-width: 760px; +} + +.about-wrap .is-fullwidth { + max-width: 100%; +} + +.about-wrap .has-1-columns { + display: block; + max-width: 680px; + margin: 0 auto 40px; +} + +.about-wrap .has-2-columns { + grid-template-columns: 1fr 1fr; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n+1) { + grid-column-start: 1; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n) { + grid-column-start: 2; +} + +.about-wrap .has-2-columns.is-wider-right { + grid-template-columns: 1fr 2fr; +} + +.about-wrap .has-2-columns.is-wider-left { + grid-template-columns: 2fr 1fr; +} + +.about-wrap .has-3-columns { + grid-template-columns: repeat(3, 1fr); +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+1) { + grid-column-start: 1; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+2) { + grid-column-start: 2; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n) { + grid-column-start: 3; +} + +.about-wrap .has-4-columns { + grid-template-columns: repeat(4, 1fr); +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+1) { + grid-column-start: 1; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+2) { + grid-column-start: 2; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+3) { + grid-column-start: 3; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n) { + grid-column-start: 4; +} + +.about-wrap .column :first-child { + margin-top: 0; +} + +.about-wrap .aligncenter { + text-align: center; +} + +.about-wrap .alignleft { + float: right; + margin-left: 40px; +} + +.about-wrap .alignright { + float: left; + margin-right: 40px; +} + +.about-wrap .is-vertically-aligned-top { + align-self: start; +} + +.about-wrap .is-vertically-aligned-center { + align-self: center; +} + +.about-wrap .is-vertically-aligned-bottom { + align-self: end; +} + +/* x.2.3 - Point Releases */ + +.about-wrap .point-releases { + margin-top: 5px; + border-bottom: 1px solid #ddd; +} + +.about-wrap .changelog { + margin-bottom: 40px; +} + +.about-wrap .changelog.point-releases h3 { + padding-top: 35px; +} + +.about-wrap .changelog.point-releases h3:first-child { + padding-top: 7px; +} + +.about-wrap .changelog.feature-section .col { + margin-top: 40px; +} + +/*------------------------------------------------------------------------------ + x.3.0 - Legacy About Styles: About Page +------------------------------------------------------------------------------*/ + +/* x.3.1 - Typography */ + +.about-wrap .lead-description { + font-size: 1.5em; + text-align: center; +} + +.about-wrap .feature-section p { + margin-top: 0.6em; +} + +/* x.3.2 - Structure */ + +.about-wrap .headline-feature { + margin: 0 auto 40px; + max-width: 680px; +} + +.about-wrap .headline-feature h2 { + margin: 50px 0 0; +} + +.about-wrap .headline-feature img { + max-width: 600px; + width: 100%; +} + +/* Go to Dashboard Home link */ + +.about-wrap .return-to-dashboard { + margin: 30px -5px 0 0; + font-size: 14px; + font-weight: 600; +} + +.about-wrap .return-to-dashboard a { + text-decoration: none; + padding: 0 5px; +} + +/*------------------------------------------------------------------------------ + x.4.0 - Legacy About Styles: Credits & Freedoms Pages +------------------------------------------------------------------------------*/ + +/* Credits */ + +.about-wrap h2.wp-people-group { + margin: 2.6em 0 1.33em; + padding: 0; + font-size: 16px; + line-height: inherit; + font-weight: 600; + text-align: right; +} + +.about-wrap .wp-people-group { + padding: 0 5px; + margin: 0 -5px 0 -15px; +} + +.about-wrap .compact { + margin-bottom: 0; +} + +.about-wrap .wp-person { + display: inline-block; + vertical-align: top; + margin-left: 10px; + padding-bottom: 15px; + height: 70px; + width: 280px; +} + +.about-wrap .compact .wp-person { + height: auto; + width: 180px; + padding-bottom: 0; + margin-bottom: 0; +} + +.about-wrap .wp-person .gravatar { + float: right; + margin: 0 0 10px 10px; + padding: 1px; + width: 60px; + height: 60px; +} + +.about-wrap .compact .wp-person .gravatar { + width: 30px; + height: 30px; +} + +.about-wrap .wp-person .web { + margin: 6px 0 2px; + font-size: 16px; + font-weight: 400; + line-height: 2; + text-decoration: none; +} + +.about-wrap .wp-person .title { + display: block; +} + +.about-wrap #wp-people-group-validators + p.wp-credits-list { + margin-top: 0; +} + +.about-wrap p.wp-credits-list a { + white-space: nowrap; +} + +/* Freedoms */ + +.freedoms-php .about-wrap ol { + margin: 40px 60px; +} + +.freedoms-php .about-wrap ol li { + list-style-type: decimal; + font-weight: 600; +} + +.freedoms-php .about-wrap ol p { + font-weight: 400; + margin: 0.6em 0; +} + +.freedoms-php .column .freedoms-image { + background-image: url('../images/freedoms.png'); + background-size: 100%; + padding-top: 100%; +} + +.freedoms-php .column:nth-of-type(2) .freedoms-image { + background-position: 100% 34%; +} + +.freedoms-php .column:nth-of-type(3) .freedoms-image { + background-position: 100% 66%; +} + +.freedoms-php .column:nth-of-type(4) .freedoms-image { + background-position: 100% 100%; +} + +/*------------------------------------------------------------------------------ + x.5.0 - Legacy About Styles: Media Queries +------------------------------------------------------------------------------*/ + +@media screen and (max-width: 782px) { + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + grid-template-columns: 1fr 1fr; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n+1), + .about-wrap .has-4-columns .column:nth-of-type(4n+1) { + grid-column-start: 1; + grid-row-start: 1; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n+2), + .about-wrap .has-4-columns .column:nth-of-type(4n+2) { + grid-column-start: 2; + grid-row-start: 1; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n), + .about-wrap .has-4-columns .column:nth-of-type(4n+3) { + grid-column-start: 1; + grid-row-start: 2; + } + + .about-wrap .has-4-columns .column:nth-of-type(4n) { + grid-column-start: 2; + grid-row-start: 2; + } +} + +@media screen and (max-width: 600px) { + .about-wrap .has-2-columns, + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + display: block; + } + + .about-wrap :not(.is-wider-right):not(.is-wider-left) .column { + margin-left: 0; + margin-right: 0; + } + + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: grid; + } +} + +@media only screen and (max-width: 500px) { + .about-wrap { + margin-left: 20px; + margin-right: 10px; + } + + .about-wrap h1, + .about-wrap .about-text { + margin-left: 0; + } + + .about-wrap .about-text { + margin-bottom: 0.25em; + } + + .about-wrap .wp-badge { + position: relative; + margin-bottom: 1.5em; + width: 100%; + } +} + +@media only screen and (max-width: 480px) { + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: block; + } + + .about-wrap .column { + margin-left: 0; + margin-right: 0; + } + + .about-wrap .has-2-columns.is-wider-right img, + .about-wrap .has-2-columns.is-wider-left img { + max-width: 160px; + } +} diff --git a/tools/storybook/wordpress/css/about-rtl.min.css b/tools/storybook/wordpress/css/about-rtl.min.css new file mode 100644 index 00000000000..6944d367b35 --- /dev/null +++ b/tools/storybook/wordpress/css/about-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.about__container{--background:transparent;--subtle-background:#def;--text:#000;--text-light:#fff;--accent-1:#3858e9;--accent-2:#3858e9;--nav-background:#fff;--nav-border:transparent;--nav-color:var(--text);--nav-current:var(--accent-1);--gap:2rem}.about-php,.credits-php,.freedoms-php,.privacy-php{background:#f0f7ff}.about-php #wpcontent,.credits-php #wpcontent,.freedoms-php #wpcontent,.privacy-php #wpcontent{background:linear-gradient(-180deg,#fff 50%,#f0f7ff 100%);padding:0 24px}@media screen and (max-width:782px){.about-php.auto-fold #wpcontent,.credits-php.auto-fold #wpcontent,.freedoms-php.auto-fold #wpcontent,.privacy-php.auto-fold #wpcontent{padding-right:24px}}.about__container{max-width:1000px;margin:24px auto;clear:both}.about__container .alignleft{float:right}.about__container .alignright{float:left}.about__container .aligncenter{text-align:center}.about__container .is-vertically-aligned-top{align-self:start}.about__container .is-vertically-aligned-center{align-self:center}.about__container .is-vertically-aligned-bottom{align-self:end}.about__section{background:var(--background);clear:both}.about__container .has-accent-background-color{background-color:var(--accent-1);color:var(--text-light)}.about__container .has-accent-background-color a{color:var(--text-light)}.about__container .has-transparent-background-color{background-color:transparent}.about__container .has-accent-color{color:var(--accent-1)}.about__container .has-border{border:3px solid currentColor}.about__container .has-subtle-background-color{background-color:var(--subtle-background)}.about__container .has-background-image{background-size:contain;background-repeat:no-repeat;background-position:center}.about__section{margin:0 0 var(--gap)}.about__section .column:not(.is-edge-to-edge){padding:var(--gap)}.about__section+.about__section .is-section-header{padding-bottom:var(--gap)}.about__section .column.has-border,.about__section .column[class*=background-color],.about__section:where([class*=background-color]) .column{padding-top:var(--gap);padding-bottom:var(--gap)}.about__section .column p:first-of-type{margin-top:0}.about__section .column p:last-of-type{margin-bottom:0}.about__section .has-text-columns{columns:2;column-gap:calc(var(--gap) * 2)}.about__section .is-section-header{margin-bottom:0;padding:var(--gap) var(--gap) 0}.about__section .is-section-header p:last-child{margin-bottom:0}.about__section .is-section-header:first-child:last-child{padding:0}.about__section.is-feature{padding:var(--gap)}.about__section.is-feature p{margin:0}.about__section.is-feature p+p{margin-top:calc(var(--gap)/ 2)}.about__section.has-1-column{margin-right:auto;margin-left:auto;max-width:36em}.about__section.has-2-columns,.about__section.has-3-columns,.about__section.has-4-columns,.about__section.has-overlap-style{display:grid}.about__section.has-gutters{gap:var(--gap);margin-bottom:calc(var(--gap) * 2)}.about__section.has-2-columns{grid-template-columns:1fr 1fr}.about__section.has-2-columns.is-wider-right{grid-template-columns:2fr 3fr}.about__section.has-2-columns.is-wider-left{grid-template-columns:3fr 2fr}.about__section.has-2-columns .is-section-header{grid-column-start:1;-ms-grid-column-span:2;grid-column-end:span 2}.about__section.has-2-columns .column:nth-of-type(2n+1){grid-column-start:1}.about__section.has-2-columns .column:nth-of-type(2n){grid-column-start:2}.about__section.has-3-columns{grid-template-columns:repeat(3,1fr)}.about__section.has-3-columns .is-section-header{grid-column-start:1;-ms-grid-column-span:3;grid-column-end:span 3}.about__section.has-3-columns .column:nth-of-type(3n+1){grid-column-start:1}.about__section.has-3-columns .column:nth-of-type(3n+2){grid-column-start:2}.about__section.has-3-columns .column:nth-of-type(3n){grid-column-start:3}.about__section.has-4-columns{grid-template-columns:repeat(4,1fr)}.about__section.has-4-columns .is-section-header{grid-column-start:1;-ms-grid-column-span:4;grid-column-end:span 4}.about__section.has-4-columns .column:nth-of-type(4n+1){grid-column-start:1}.about__section.has-4-columns .column:nth-of-type(4n+2){grid-column-start:2}.about__section.has-4-columns .column:nth-of-type(4n+3){grid-column-start:3}.about__section.has-4-columns .column:nth-of-type(4n){grid-column-start:4}.about__section.has-2-columns .is-section-header~.column,.about__section.has-3-columns .is-section-header~.column,.about__section.has-4-columns .is-section-header~.column,.about__section.has-overlap-style .is-section-header~.column{grid-row-start:2}.about__section.has-overlap-style{grid-template-columns:repeat(7,1fr)}.about__section.has-overlap-style .column{grid-row-start:1}.about__section.has-overlap-style .column:nth-of-type(2n+1){grid-column-start:2;-ms-grid-column-span:3;grid-column-end:span 3}.about__section.has-overlap-style .column:nth-of-type(2n){grid-column-start:4;-ms-grid-column-span:3;grid-column-end:span 3}.about__section.has-overlap-style .column.is-top-layer{z-index:1}@media screen and (max-width:782px){.about__section.has-2-columns.is-wider-left,.about__section.has-2-columns.is-wider-right,.about__section.has-3-columns{display:block;margin-bottom:calc(var(--gap)/ 2)}.about__section .column:not(.is-edge-to-edge){padding-top:var(--gap);padding-bottom:var(--gap)}.about__section.has-2-columns.has-gutters.is-wider-left,.about__section.has-2-columns.has-gutters.is-wider-right,.about__section.has-3-columns.has-gutters{margin-bottom:calc(var(--gap) * 2)}.about__section.has-2-columns.has-gutters .column,.about__section.has-3-columns.has-gutters .column{margin-bottom:var(--gap)}.about__section.has-2-columns.has-gutters .column:last-child,.about__section.has-3-columns.has-gutters .column:last-child{margin-bottom:0}.about__section.has-3-columns .column:nth-of-type(n){padding-top:calc(var(--gap)/ 2);padding-bottom:calc(var(--gap)/ 2)}.about__section.has-4-columns{grid-template-columns:repeat(2,1fr)}.about__section.has-4-columns .column:nth-of-type(2n+1){grid-column-start:1}.about__section.has-4-columns .column:nth-of-type(2n){grid-column-start:2}.about__section.has-4-columns .column:nth-of-type(4n),.about__section.has-4-columns .column:nth-of-type(4n+3){grid-row-start:2}.about__section.has-4-columns .is-section-header{-ms-grid-column-span:2;grid-column-end:span 2}.about__section.has-4-columns .is-section-header~.column:nth-of-type(4n),.about__section.has-4-columns .is-section-header~.column:nth-of-type(4n+3){grid-row-start:3}.about__section.has-overlap-style{grid-template-columns:1fr}.about__section.has-overlap-style .column.column{grid-column-start:1;-ms-grid-column-span:1;grid-column-end:2;grid-row-start:1;-ms-grid-row-span:1;grid-row-end:2}}@media screen and (max-width:600px){.about__section.has-2-columns{display:block;margin-bottom:var(--gap)}.about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n){padding-top:calc(var(--gap)/ 2);padding-bottom:calc(var(--gap)/ 2)}.about__section.has-2-columns.has-gutters{margin-bottom:calc(var(--gap) * 2)}.about__section.has-2-columns.has-gutters .column{margin-bottom:var(--gap)}.about__section.has-2-columns.has-gutters .column:last-child{margin-bottom:0}}@media screen and (max-width:480px){.about__section.is-feature .column{padding:0}.about__section.has-4-columns{display:block;padding-bottom:calc(var(--gap)/ 2)}.about__section.has-4-columns.has-gutters .column{margin-bottom:calc(var(--gap)/ 2)}.about__section.has-4-columns.has-gutters .column:last-child{margin-bottom:0}.about__section.has-4-columns .column:nth-of-type(n){padding-top:calc(var(--gap)/ 2);padding-bottom:calc(var(--gap)/ 2)}}.about__container{line-height:1.4;color:var(--text)}.about__container h1{padding:0;color:inherit}.about__container h1,.about__container h2,.about__container h3.is-larger-heading{margin-top:0;margin-bottom:.5em;font-size:2em;line-height:1.2;font-weight:700}.about__container h1.is-smaller-heading,.about__container h2.is-smaller-heading,.about__container h3{margin-top:0;font-size:1.6em;line-height:1.3;font-weight:400}.about__container p{font-size:inherit;line-height:inherit}.about__container p.is-subheading{margin-top:0;font-size:1.8em}.about__section a{color:var(--accent-1);text-decoration:underline}.about__section a:active,.about__section a:focus,.about__section a:hover{color:var(--accent-1);text-decoration:none}.wp-credits-list a{text-decoration:none}.wp-credits-list a:active,.wp-credits-list a:focus,.wp-credits-list a:hover{text-decoration:underline}.about__container ul{list-style:disc;margin-right:calc(var(--gap)/ 2)}.about__container img{margin:0;max-width:100%;vertical-align:middle}.about__container .about__image{margin:0}.about__container .about__image img{max-width:100%;width:100%;height:auto}.about__container .about__image figcaption{margin-top:.5em;text-align:center}.about__container .about__image .wp-video{margin-right:auto;margin-left:auto}.about__container .about__image+h3{margin-top:1.5em}.about__container hr{margin:0;height:var(--gap);border:none}.about__container hr.is-small{height:calc(var(--gap)/ 4)}.about__container hr.is-large{height:calc(var(--gap) * 2);margin:calc(var(--gap)/ 2) auto}.about__container .notice,.about__container div.error,.about__container div.updated{display:none!important}.about__section{font-size:1.2em}.about__section.is-feature{font-size:1.6em}@media screen and (max-width:480px){.about__section.is-feature{font-size:1.4em}.about__container h1,.about__container h2,.about__container h3.is-larger-heading{font-size:2em}}.about__header{position:relative;margin-bottom:var(--gap);padding-top:0;background-image:url('../images/about-texture.png');background-color:var(--accent-2);background-size:500px 500px;background-blend-mode:overlay;color:var(--text-light)}.about__header::before{content:"";position:absolute;top:0;left:64px;z-index:0;width:300px;height:382px;background:url(../images/about-header-about.svg) no-repeat center;background-size:contain}.credits-php .about__header::before{top:auto;bottom:70px;height:310px;background-image:url('../images/about-header-credits.svg')}.freedoms-php .about__header::before{top:calc(50% - 182px);left:32px;width:375px;height:300px;background-image:url('../images/about-header-freedoms.svg')}.privacy-php .about__header::before{top:auto;bottom:-16px;background-image:url('../images/about-header-privacy.svg')}.about__header-image{margin:0 var(--gap) 3em}.about__header-title{box-sizing:border-box;padding:6rem 0 0 380px;margin:0 2rem}.about__header-title h1{margin:0 0 .5rem;padding:0;font-size:4.5rem;line-height:1;font-weight:400}.about__header-text{box-sizing:border-box;margin:0 0 7rem;padding:0 2rem 0 380px;font-size:1.6rem;line-height:1.15}.freedoms-php .about__header-text,.freedoms-php .about__header-title{padding-left:423px;margin-left:0}.about__header-navigation{position:relative;z-index:1;display:flex;justify-content:center;padding-top:0;background:var(--nav-background);color:var(--nav-color);border-bottom:3px solid var(--nav-border)}.about__header-navigation .nav-tab{margin-right:0;padding:calc(var(--gap) * .75) var(--gap);float:none;font-size:1.4em;line-height:1;border-width:0 0 3px;border-style:solid;border-color:transparent;background:0 0;color:inherit}.about__header-navigation .nav-tab:active,.about__header-navigation .nav-tab:hover{background-color:var(--nav-current);color:var(--text-light)}.about__header-navigation .nav-tab-active{margin-bottom:-3px;color:var(--nav-current);border-width:0 0 6px;border-color:var(--nav-current)}.about__header-navigation .nav-tab-active:active,.about__header-navigation .nav-tab-active:hover{background-color:var(--nav-current);color:var(--text-light);border-color:var(--nav-current)}@media screen and (max-width:960px){.about__header-title h1{font-size:4.8em}}@media screen and (max-width:782px){.about__header::before{width:240px;height:305px;left:32px}.credits-php .about__header::before{height:248px}.freedoms-php .about__header::before{top:calc(50% - 132px);height:192px;width:240px}.privacy-php .about__header::before{bottom:0;height:280px}.about__container .about__header-text{font-size:1.4em}.about__header-container{display:block}.about__header-text,.about__header-title{padding-left:288px!important}.about__header-image,.about__header-title{margin-right:calc(var(--gap)/ 2);margin-left:calc(var(--gap)/ 2)}.about__header-text{margin-top:0;margin-left:0;padding-right:calc(var(--gap)/ 2)}.about__header-navigation .nav-tab{margin-top:0;margin-left:0;padding-right:calc(var(--gap)/ 2);padding-left:calc(var(--gap)/ 2)}}@media screen and (max-width:600px){.about__header::before{display:none}.about__header-text,.about__header-title{padding-left:calc(var(--gap)/ 2)!important}}@media screen and (max-width:480px){.about__header-title p{font-size:2.4em}.about__header-title{padding-top:2rem}.about__header-text{margin-bottom:2rem}.about__header-navigation{display:block}.about__header-navigation .nav-tab{display:block;margin-bottom:0;padding:calc(var(--gap)/ 2);border-right-width:6px;border-bottom:none}.about__header-navigation .nav-tab-active{border-bottom:none;border-right-width:6px}}.about__section .wp-people-group-title{margin-bottom:calc(var(--gap) * 2);text-align:center}.about__section .wp-people-group{margin:0;display:flex;flex-wrap:wrap}.about__section .wp-person{display:inline-block;vertical-align:top;box-sizing:border-box;margin-bottom:var(--gap);width:25%;text-align:center}.about__section .compact .wp-person{height:auto;width:20%}.about__section .wp-person-avatar{display:block;margin:0 auto calc(var(--gap)/ 2);width:140px;height:140px;border-radius:100%;overflow:hidden;background:var(--accent-1)}.about__section .wp-person .gravatar{width:140px;height:140px;filter:grayscale(100%);mix-blend-mode:screen}.about__section .compact .wp-person .gravatar,.about__section .compact .wp-person-avatar{width:80px;height:80px}.about__section .wp-person .web{font-size:1.4em;font-weight:600;text-decoration:none}.about__section .wp-person .web:hover{text-decoration:underline}.about__section .compact .wp-person .web{font-size:1.2em}.about__section .wp-person .title{display:block;margin-top:.5em}@media screen and (max-width:782px){.about__section .wp-person{width:33%}.about__section .compact .wp-person{width:25%}.about__section .wp-person .gravatar,.about__section .wp-person-avatar{width:120px;height:120px}}@media screen and (max-width:600px){.about__section .wp-person{width:50%}.about__section .compact .wp-person{width:33%}.about__section .wp-person .web{font-size:1.2em}}@media screen and (max-width:480px){.about__section .wp-person{min-width:100%}.about__section .wp-person .web{font-size:1em}.about__section .compact .wp-person .web{font-size:1em}}.about__section .column .freedom-image{margin-bottom:var(--gap);max-height:140px}.about-wrap{position:relative;margin:25px 20px 0 40px;max-width:1050px;font-size:15px}.about-wrap.full-width-layout{max-width:1200px}.about-wrap-content{max-width:1050px}.about-wrap .notice,.about-wrap div.error,.about-wrap div.updated{display:none!important}.about-wrap hr{border:0;height:0;margin:3em 0 0;border-top:1px solid rgba(0,0,0,.1)}.about-wrap img{margin:0;width:100%;height:auto;vertical-align:middle}.about-wrap .inline-svg img{max-width:100%;width:auto;height:auto}.about-wrap video{margin:1.5em auto}.wp-badge{background:#0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;background-position:center 25px;background-size:80px 80px;color:#fff;font-size:14px;text-align:center;font-weight:600;margin:5px 0 0;padding-top:120px;height:40px;display:inline-block;width:140px;text-rendering:optimizeLegibility;box-shadow:0 1px 3px rgba(0,0,0,.2)}.svg .wp-badge{background-image:url(../images/wordpress-logo-white.svg?ver=20160308)}.about-wrap .wp-badge{position:absolute;top:0;left:0}.about-wrap .nav-tab{padding-left:15px;padding-right:15px;font-size:18px;line-height:1.33333333}.about-wrap h1{margin:.2em 0 0 200px;padding:0;color:#32373c;line-height:1.2;font-size:2.8em;font-weight:400}.about-wrap h2{margin:40px 0 .6em;font-size:2.7em;line-height:1.3;font-weight:300;text-align:center}.about-wrap h3{margin:1.25em 0 .6em;font-size:1.4em;line-height:1.5}.about-wrap h4{font-size:16px;color:#23282d}.about-wrap p{line-height:1.5;font-size:16px}.about-wrap code,.about-wrap ol li p{font-size:14px;font-weight:400}.about-wrap figcaption{font-size:13px;text-align:center;color:#fff;text-overflow:ellipsis}.about-wrap .about-description,.about-wrap .about-text{margin-top:1.4em;font-weight:400;line-height:1.6;font-size:19px}.about-wrap .about-text{margin:1em 0 1em 200px;color:#555d66}.about-wrap .has-1-columns,.about-wrap .has-2-columns,.about-wrap .has-3-columns,.about-wrap .has-4-columns{display:grid;max-width:800px;margin-top:40px;margin-right:auto;margin-left:auto}.about-wrap .column{margin-left:20px;margin-right:20px}.about-wrap .is-wide{max-width:760px}.about-wrap .is-fullwidth{max-width:100%}.about-wrap .has-1-columns{display:block;max-width:680px;margin:0 auto 40px}.about-wrap .has-2-columns{grid-template-columns:1fr 1fr}.about-wrap .has-2-columns .column:nth-of-type(2n+1){grid-column-start:1}.about-wrap .has-2-columns .column:nth-of-type(2n){grid-column-start:2}.about-wrap .has-2-columns.is-wider-right{grid-template-columns:1fr 2fr}.about-wrap .has-2-columns.is-wider-left{grid-template-columns:2fr 1fr}.about-wrap .has-3-columns{grid-template-columns:repeat(3,1fr)}.about-wrap .has-3-columns .column:nth-of-type(3n+1){grid-column-start:1}.about-wrap .has-3-columns .column:nth-of-type(3n+2){grid-column-start:2}.about-wrap .has-3-columns .column:nth-of-type(3n){grid-column-start:3}.about-wrap .has-4-columns{grid-template-columns:repeat(4,1fr)}.about-wrap .has-4-columns .column:nth-of-type(4n+1){grid-column-start:1}.about-wrap .has-4-columns .column:nth-of-type(4n+2){grid-column-start:2}.about-wrap .has-4-columns .column:nth-of-type(4n+3){grid-column-start:3}.about-wrap .has-4-columns .column:nth-of-type(4n){grid-column-start:4}.about-wrap .column :first-child{margin-top:0}.about-wrap .aligncenter{text-align:center}.about-wrap .alignleft{float:right;margin-left:40px}.about-wrap .alignright{float:left;margin-right:40px}.about-wrap .is-vertically-aligned-top{align-self:start}.about-wrap .is-vertically-aligned-center{align-self:center}.about-wrap .is-vertically-aligned-bottom{align-self:end}.about-wrap .point-releases{margin-top:5px;border-bottom:1px solid #ddd}.about-wrap .changelog{margin-bottom:40px}.about-wrap .changelog.point-releases h3{padding-top:35px}.about-wrap .changelog.point-releases h3:first-child{padding-top:7px}.about-wrap .changelog.feature-section .col{margin-top:40px}.about-wrap .lead-description{font-size:1.5em;text-align:center}.about-wrap .feature-section p{margin-top:.6em}.about-wrap .headline-feature{margin:0 auto 40px;max-width:680px}.about-wrap .headline-feature h2{margin:50px 0 0}.about-wrap .headline-feature img{max-width:600px;width:100%}.about-wrap .return-to-dashboard{margin:30px -5px 0 0;font-size:14px;font-weight:600}.about-wrap .return-to-dashboard a{text-decoration:none;padding:0 5px}.about-wrap h2.wp-people-group{margin:2.6em 0 1.33em;padding:0;font-size:16px;line-height:inherit;font-weight:600;text-align:right}.about-wrap .wp-people-group{padding:0 5px;margin:0 -5px 0 -15px}.about-wrap .compact{margin-bottom:0}.about-wrap .wp-person{display:inline-block;vertical-align:top;margin-left:10px;padding-bottom:15px;height:70px;width:280px}.about-wrap .compact .wp-person{height:auto;width:180px;padding-bottom:0;margin-bottom:0}.about-wrap .wp-person .gravatar{float:right;margin:0 0 10px 10px;padding:1px;width:60px;height:60px}.about-wrap .compact .wp-person .gravatar{width:30px;height:30px}.about-wrap .wp-person .web{margin:6px 0 2px;font-size:16px;font-weight:400;line-height:2;text-decoration:none}.about-wrap .wp-person .title{display:block}.about-wrap #wp-people-group-validators+p.wp-credits-list{margin-top:0}.about-wrap p.wp-credits-list a{white-space:nowrap}.freedoms-php .about-wrap ol{margin:40px 60px}.freedoms-php .about-wrap ol li{list-style-type:decimal;font-weight:600}.freedoms-php .about-wrap ol p{font-weight:400;margin:.6em 0}.freedoms-php .column .freedoms-image{background-image:url('../images/freedoms.png');background-size:100%;padding-top:100%}.freedoms-php .column:nth-of-type(2) .freedoms-image{background-position:100% 34%}.freedoms-php .column:nth-of-type(3) .freedoms-image{background-position:100% 66%}.freedoms-php .column:nth-of-type(4) .freedoms-image{background-position:100% 100%}@media screen and (max-width:782px){.about-wrap .has-3-columns,.about-wrap .has-4-columns{grid-template-columns:1fr 1fr}.about-wrap .has-3-columns .column:nth-of-type(3n+1),.about-wrap .has-4-columns .column:nth-of-type(4n+1){grid-column-start:1;grid-row-start:1}.about-wrap .has-3-columns .column:nth-of-type(3n+2),.about-wrap .has-4-columns .column:nth-of-type(4n+2){grid-column-start:2;grid-row-start:1}.about-wrap .has-3-columns .column:nth-of-type(3n),.about-wrap .has-4-columns .column:nth-of-type(4n+3){grid-column-start:1;grid-row-start:2}.about-wrap .has-4-columns .column:nth-of-type(4n){grid-column-start:2;grid-row-start:2}}@media screen and (max-width:600px){.about-wrap .has-2-columns,.about-wrap .has-3-columns,.about-wrap .has-4-columns{display:block}.about-wrap :not(.is-wider-right):not(.is-wider-left) .column{margin-left:0;margin-right:0}.about-wrap .has-2-columns.is-wider-left,.about-wrap .has-2-columns.is-wider-right{display:grid}}@media only screen and (max-width:500px){.about-wrap{margin-left:20px;margin-right:10px}.about-wrap .about-text,.about-wrap h1{margin-left:0}.about-wrap .about-text{margin-bottom:.25em}.about-wrap .wp-badge{position:relative;margin-bottom:1.5em;width:100%}}@media only screen and (max-width:480px){.about-wrap .has-2-columns.is-wider-left,.about-wrap .has-2-columns.is-wider-right{display:block}.about-wrap .column{margin-left:0;margin-right:0}.about-wrap .has-2-columns.is-wider-left img,.about-wrap .has-2-columns.is-wider-right img{max-width:160px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/about.css b/tools/storybook/wordpress/css/about.css new file mode 100644 index 00000000000..eff4e2940cb --- /dev/null +++ b/tools/storybook/wordpress/css/about.css @@ -0,0 +1,1472 @@ +/*------------------------------------------------------------------------------ + 22.0 - About Pages + + 1.0 Global: About, Credits, Freedoms, Privacy + 1.1 Layout + 1.2 Typography & Elements + 1.3 Header + 2.0 Credits Page + 3.0 Freedoms Page + x.2.0 Legacy About Styles: Global + x.2.1 Typography + x.2.2 Structure + x.2.3 Point Releases + x.3.0 Legacy About Styles: About Page + x.3.1 Typography + x.3.2 Structure + x.4.0 Legacy About Styles: Credits & Freedoms Pages + x.5.0 Legacy About Styles: Media Queries +------------------------------------------------------------------------------*/ + +.about__container { + /* Section backgrounds */ + --background: transparent; + --subtle-background: #def; + + /* Main text color */ + --text: #000; + --text-light: #fff; + + /* Accent colors: used in header, on special classes. */ + --accent-1: #3858e9; /* Accent background, link color */ + --accent-2: #3858e9; /* Header background */ + + /* Navigation colors. */ + --nav-background: #fff; + --nav-border: transparent; + --nav-color: var(--text); + --nav-current: var(--accent-1); + + --gap: 2rem; +} + +/*------------------------------------------------------------------------------ + 1.0 - Global: About, Credits, Freedoms, Privacy +------------------------------------------------------------------------------*/ + +.about-php, +.credits-php, +.freedoms-php, +.privacy-php { + background: #f0f7ff; +} + +.about-php #wpcontent, +.credits-php #wpcontent, +.freedoms-php #wpcontent, +.privacy-php #wpcontent { + background: linear-gradient(180deg, #fff 50%, #f0f7ff 100%); + padding: 0 24px; +} + +@media screen and (max-width: 782px) { + .about-php.auto-fold #wpcontent, + .credits-php.auto-fold #wpcontent, + .freedoms-php.auto-fold #wpcontent, + .privacy-php.auto-fold #wpcontent { + padding-left: 24px; + } +} + +.about__container { + max-width: 1000px; + margin: 24px auto; + clear: both; +} + +.about__container .alignleft { + float: left; +} + +.about__container .alignright { + float: right; +} + +.about__container .aligncenter { + text-align: center; +} + +.about__container .is-vertically-aligned-top { + align-self: start; +} + +.about__container .is-vertically-aligned-center { + align-self: center; +} + +.about__container .is-vertically-aligned-bottom { + align-self: end; +} + +.about__section { + background: var(--background); + clear: both; +} + +.about__container .has-accent-background-color { + background-color: var(--accent-1); + color: var(--text-light); +} + +.about__container .has-accent-background-color a { + color: var(--text-light); +} + +.about__container .has-transparent-background-color { + background-color: transparent; +} + +.about__container .has-accent-color { + color: var(--accent-1); +} + +.about__container .has-border { + border: 3px solid currentColor; +} + +.about__container .has-subtle-background-color { + background-color: var(--subtle-background); +} + +.about__container .has-background-image { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +/* 1.1 - Layout */ + +.about__section { + margin: 0 0 var(--gap); +} + +.about__section .column:not(.is-edge-to-edge) { + padding: var(--gap); +} + +.about__section + .about__section .is-section-header { + padding-bottom: var(--gap); +} + +.about__section .column[class*="background-color"], +.about__section:where([class*="background-color"]) .column, +.about__section .column.has-border { + padding-top: var(--gap); + padding-bottom: var(--gap); +} + +.about__section .column p:first-of-type { + margin-top: 0; +} + +.about__section .column p:last-of-type { + margin-bottom: 0; +} + +.about__section .has-text-columns { + columns: 2; + column-gap: calc(var(--gap) * 2); +} + +.about__section .is-section-header { + margin-bottom: 0; + padding: var(--gap) var(--gap) 0; +} + +.about__section .is-section-header p:last-child { + margin-bottom: 0; +} + +/* Section header is alone in a container. */ +.about__section .is-section-header:first-child:last-child { + padding: 0; +} + +.about__section.is-feature { + padding: var(--gap); +} + +.about__section.is-feature p { + margin: 0; +} + +.about__section.is-feature p + p { + margin-top: calc(var(--gap) / 2); +} + +.about__section.has-1-column { + margin-left: auto; + margin-right: auto; + max-width: 36em; +} + +.about__section.has-2-columns, +.about__section.has-3-columns, +.about__section.has-4-columns, +.about__section.has-overlap-style { + display: grid; +} + +.about__section.has-gutters { + gap: var(--gap); + margin-bottom: calc(var(--gap) * 2); +} + +.about__section.has-2-columns { + grid-template-columns: 1fr 1fr; +} + +.about__section.has-2-columns.is-wider-right { + grid-template-columns: 2fr 3fr; +} + +.about__section.has-2-columns.is-wider-left { + grid-template-columns: 3fr 2fr; +} + +.about__section.has-2-columns .is-section-header { + grid-column-start: 1; + -ms-grid-column-span: 2; + grid-column-end: span 2; +} + +.about__section.has-2-columns .column:nth-of-type(2n+1) { + grid-column-start: 1; +} + +.about__section.has-2-columns .column:nth-of-type(2n) { + grid-column-start: 2; +} + +.about__section.has-3-columns { + grid-template-columns: repeat(3, 1fr); +} + +.about__section.has-3-columns .is-section-header { + grid-column-start: 1; + -ms-grid-column-span: 3; + grid-column-end: span 3; +} + +.about__section.has-3-columns .column:nth-of-type(3n+1) { + grid-column-start: 1; +} + +.about__section.has-3-columns .column:nth-of-type(3n+2) { + grid-column-start: 2; +} + +.about__section.has-3-columns .column:nth-of-type(3n) { + grid-column-start: 3; +} + +.about__section.has-4-columns { + grid-template-columns: repeat(4, 1fr); +} + +.about__section.has-4-columns .is-section-header { + grid-column-start: 1; + -ms-grid-column-span: 4; + grid-column-end: span 4; +} + +.about__section.has-4-columns .column:nth-of-type(4n+1) { + grid-column-start: 1; +} + +.about__section.has-4-columns .column:nth-of-type(4n+2) { + grid-column-start: 2; +} + +.about__section.has-4-columns .column:nth-of-type(4n+3) { + grid-column-start: 3; +} + +.about__section.has-4-columns .column:nth-of-type(4n) { + grid-column-start: 4; +} + +/* Any columns following a section header need to be expicitly put into the second row, for IE support. */ +.about__section.has-2-columns .is-section-header ~ .column, +.about__section.has-3-columns .is-section-header ~ .column, +.about__section.has-4-columns .is-section-header ~ .column, +.about__section.has-overlap-style .is-section-header ~ .column { + grid-row-start: 2; +} + +.about__section.has-overlap-style { + grid-template-columns: repeat(7, 1fr); +} + +.about__section.has-overlap-style .column { + grid-row-start: 1; +} + +.about__section.has-overlap-style .column:nth-of-type(2n+1) { + grid-column-start: 2; + -ms-grid-column-span: 3; + grid-column-end: span 3; +} + +.about__section.has-overlap-style .column:nth-of-type(2n) { + grid-column-start: 4; + -ms-grid-column-span: 3; + grid-column-end: span 3; +} + +.about__section.has-overlap-style .column.is-top-layer { + z-index: 1; +} + +@media screen and (max-width: 782px) { + .about__section.has-2-columns.is-wider-right, + .about__section.has-2-columns.is-wider-left, + .about__section.has-3-columns { + display: block; + margin-bottom: calc(var(--gap) / 2); + } + + .about__section .column:not(.is-edge-to-edge) { + padding-top: var(--gap); + padding-bottom: var(--gap); + } + + .about__section.has-2-columns.has-gutters.is-wider-right, + .about__section.has-2-columns.has-gutters.is-wider-left, + .about__section.has-3-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); + } + + .about__section.has-2-columns.has-gutters .column, + .about__section.has-2-columns.has-gutters .column, + .about__section.has-3-columns.has-gutters .column { + margin-bottom: var(--gap); + } + + .about__section.has-2-columns.has-gutters .column:last-child, + .about__section.has-2-columns.has-gutters .column:last-child, + .about__section.has-3-columns.has-gutters .column:last-child { + margin-bottom: 0; + } + + .about__section.has-3-columns .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); + } + + .about__section.has-4-columns { + grid-template-columns: repeat(2, 1fr); + } + + .about__section.has-4-columns .column:nth-of-type(2n+1) { + grid-column-start: 1; + } + + .about__section.has-4-columns .column:nth-of-type(2n) { + grid-column-start: 2; + } + + .about__section.has-4-columns .column:nth-of-type(4n+3), + .about__section.has-4-columns .column:nth-of-type(4n) { + grid-row-start: 2; + } + + .about__section.has-4-columns .is-section-header { + -ms-grid-column-span: 2; + grid-column-end: span 2; + } + + .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3), + .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) { + grid-row-start: 3; + } + + .about__section.has-overlap-style { + grid-template-columns: 1fr; + } + + /* At this size, the two columns fully overlap */ + .about__section.has-overlap-style .column.column { + grid-column-start: 1; + -ms-grid-column-span: 1; + grid-column-end: 2; + grid-row-start: 1; + -ms-grid-row-span: 1; + grid-row-end: 2; + } +} + +@media screen and (max-width: 600px) { + .about__section.has-2-columns { + display: block; + margin-bottom: var(--gap); + } + + .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); + } + + .about__section.has-2-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); + } + + .about__section.has-2-columns.has-gutters .column { + margin-bottom: var(--gap); + } + + .about__section.has-2-columns.has-gutters .column:last-child { + margin-bottom: 0; + } +} + +@media screen and (max-width: 480px) { + .about__section.is-feature .column { + padding: 0; + } + + .about__section.has-4-columns { + display: block; + padding-bottom: calc(var(--gap) / 2); + } + + .about__section.has-4-columns.has-gutters .column { + margin-bottom: calc(var(--gap) / 2); + } + + .about__section.has-4-columns.has-gutters .column:last-child { + margin-bottom: 0; + } + + .about__section.has-4-columns .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); + } +} + +/* 1.2 - Typography & Elements */ + +.about__container { + line-height: 1.4; + color: var(--text); +} + +.about__container h1 { + padding: 0; + color: inherit; +} + +.about__container h1, +.about__container h2, +.about__container h3.is-larger-heading { + margin-top: 0; + margin-bottom: 0.5em; + font-size: 2em; + line-height: 1.2; + font-weight: 700; +} + +.about__container h3, +.about__container h1.is-smaller-heading, +.about__container h2.is-smaller-heading { + margin-top: 0; + font-size: 1.6em; + line-height: 1.3; + font-weight: 400; +} + +.about__container p { + font-size: inherit; + line-height: inherit; +} + +.about__container p.is-subheading { + margin-top: 0; + font-size: 1.8em; +} + +.about__section a { + color: var(--accent-1); + text-decoration: underline; +} + +.about__section a:hover, +.about__section a:active, +.about__section a:focus { + color: var(--accent-1); + text-decoration: none; +} + +.wp-credits-list a { + text-decoration: none; +} + +.wp-credits-list a:hover, +.wp-credits-list a:active, +.wp-credits-list a:focus { + text-decoration: underline; +} + +.about__container ul { + list-style: disc; + margin-left: calc(var(--gap) / 2); +} + +.about__container img { + margin: 0; + max-width: 100%; + vertical-align: middle; +} + +.about__container .about__image { + margin: 0; +} + +.about__container .about__image img { + max-width: 100%; + width: 100%; + height: auto; +} + +.about__container .about__image figcaption { + margin-top: 0.5em; + text-align: center; +} + +.about__container .about__image .wp-video { + margin-left: auto; + margin-right: auto; +} + +.about__container .about__image + h3 { + margin-top: 1.5em; +} + +.about__container hr { + margin: 0; + height: var(--gap); + border: none; +} + +.about__container hr.is-small { + height: calc(var(--gap) / 4); +} + +.about__container hr.is-large { + height: calc(var(--gap) * 2); + margin: calc(var(--gap) / 2) auto; +} + +.about__container div.updated, +.about__container div.error, +.about__container .notice { + display: none !important; +} + +.about__section { + font-size: 1.2em; +} + +.about__section.is-feature { + font-size: 1.6em; +} + +@media screen and (max-width: 480px) { + .about__section.is-feature { + font-size: 1.4em; + } + + .about__container h1, + .about__container h2, + .about__container h3.is-larger-heading { + font-size: 2em; + } +} + +/* 1.3 - Header */ + +.about__header { + position: relative; + margin-bottom: var(--gap); + padding-top: 0; + background-image: url('../images/about-texture.png'); + background-color: var(--accent-2); + background-size: 500px 500px; + background-blend-mode: overlay; + color: var(--text-light); +} + +.about__header::before { + content: ""; + position: absolute; + top: 0; + right: 64px; + z-index: 0; + width: 300px; + height: 382px; + background: url(../images/about-header-about.svg) no-repeat center; + background-size: contain; +} + +.credits-php .about__header::before { + top: auto; + bottom: 70px; + height: 310px; + background-image: url('../images/about-header-credits.svg'); +} + +.freedoms-php .about__header::before { + top: calc(50% - 182px); + right: 32px; + width: 375px; + height: 300px; + background-image: url('../images/about-header-freedoms.svg'); +} + +.privacy-php .about__header::before { + top: auto; + bottom: -16px; + background-image: url('../images/about-header-privacy.svg'); +} + +.about__header-image { + margin: 0 var(--gap) 3em; +} + +.about__header-title { + box-sizing: border-box; + /* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */ + padding: 6rem 380px 0 0; + margin: 0 2rem; +} + +.about__header-title h1 { + margin: 0 0 0.5rem; + padding: 0; + font-size: 4.5rem; + line-height: 1; + font-weight: 400; +} + +.about__header-text { + box-sizing: border-box; + margin: 0 0 7rem; + /* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */ + padding: 0 380px 0 2rem; + font-size: 1.6rem; + line-height: 1.15; +} + +.freedoms-php .about__header-title, +.freedoms-php .about__header-text { + /* 423px = 375px (balloon width) + 32px (offset from edge) + 16px (spacing). */ + padding-right: 423px; + margin-right: 0; +} + +.about__header-navigation { + position: relative; + z-index: 1; + display: flex; + justify-content: center; + padding-top: 0; + background: var(--nav-background); + color: var(--nav-color); + border-bottom: 3px solid var(--nav-border); +} + +.about__header-navigation .nav-tab { + margin-left: 0; + padding: calc(var(--gap) * 0.75) var(--gap); + float: none; + font-size: 1.4em; + line-height: 1; + border-width: 0 0 3px; + border-style: solid; + border-color: transparent; + background: transparent; + color: inherit; +} + +.about__header-navigation .nav-tab:hover, +.about__header-navigation .nav-tab:active { + background-color: var(--nav-current); + color: var(--text-light); +} + +.about__header-navigation .nav-tab-active { + margin-bottom: -3px; + color: var(--nav-current); + border-width: 0 0 6px; + border-color: var(--nav-current); +} + +.about__header-navigation .nav-tab-active:hover, +.about__header-navigation .nav-tab-active:active { + background-color: var(--nav-current); + color: var(--text-light); + border-color: var(--nav-current); +} + +@media screen and (max-width: 960px){ + .about__header-title h1 { + font-size: 4.8em; + } +} + +@media screen and (max-width: 782px) { + .about__header::before { + width: 240px; + height: 305px; + right: 32px; + } + + .credits-php .about__header::before { + height: 248px; + } + + .freedoms-php .about__header::before { + top: calc(50% - 132px); + height: 192px; + width: 240px; + } + + .privacy-php .about__header::before { + bottom: 0; + height: 280px; + } + + .about__container .about__header-text { + font-size: 1.4em; + } + + .about__header-container { + display: block; + } + + .about__header-title, + .about__header-text { + /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */ + padding-right: 288px !important; + } + + .about__header-title, + .about__header-image { + margin-left: calc(var(--gap) / 2); + margin-right: calc(var(--gap) / 2); + } + + .about__header-text { + margin-top: 0; + margin-right: 0; + padding-left: calc(var(--gap) / 2); + } + + .about__header-navigation .nav-tab { + margin-top: 0; + margin-right: 0; + padding-left: calc(var(--gap) / 2); + padding-right: calc(var(--gap) / 2); + } +} + +@media screen and (max-width: 600px) { + .about__header::before { + display: none; + } + + .about__header-title, + .about__header-text { + padding-right: calc(var(--gap) / 2) !important; + } +} + +@media screen and (max-width: 480px) { + .about__header-title p { + font-size: 2.4em; + } + + .about__header-title { + padding-top: 2rem; + } + + .about__header-text { + margin-bottom: 2rem; + } + + .about__header-navigation { + display: block; + } + + .about__header-navigation .nav-tab { + display: block; + margin-bottom: 0; + padding: calc(var(--gap) / 2); + border-left-width: 6px; + border-bottom: none; + } + + .about__header-navigation .nav-tab-active { + border-bottom: none; + border-left-width: 6px; + } +} + + +/*------------------------------------------------------------------------------ + 2.0 - Credits Page +------------------------------------------------------------------------------*/ + +.about__section .wp-people-group-title { + margin-bottom: calc(var(--gap) * 2); + text-align: center; + +} + +.about__section .wp-people-group { + margin: 0; + display: flex; + flex-wrap: wrap; +} + +.about__section .wp-person { + display: inline-block; + vertical-align: top; + box-sizing: border-box; + margin-bottom: var(--gap); + width: 25%; + text-align: center; +} + +.about__section .compact .wp-person { + height: auto; + width: 20%; +} + +.about__section .wp-person-avatar { + display: block; + margin: 0 auto calc(var(--gap) / 2); + width: 140px; + height: 140px; + border-radius: 100%; + overflow: hidden; + background: var(--accent-1); +} + +.about__section .wp-person .gravatar { + width: 140px; + height: 140px; + filter: grayscale(100%); + mix-blend-mode: screen; +} + +.about__section .compact .wp-person-avatar, +.about__section .compact .wp-person .gravatar { + width: 80px; + height: 80px; +} + +.about__section .wp-person .web { + font-size: 1.4em; + font-weight: 600; + text-decoration: none; +} + +.about__section .wp-person .web:hover { + text-decoration: underline; +} + +.about__section .compact .wp-person .web { + font-size: 1.2em; +} + +.about__section .wp-person .title { + display: block; + margin-top: 0.5em; +} + +@media screen and (max-width: 782px) { + .about__section .wp-person { + width: 33%; + } + + .about__section .compact .wp-person { + width: 25%; + } + + .about__section .wp-person-avatar, + .about__section .wp-person .gravatar { + width: 120px; + height: 120px; + } +} + +@media screen and (max-width: 600px) { + .about__section .wp-person { + width: 50%; + } + + .about__section .compact .wp-person { + width: 33%; + } + + .about__section .wp-person .web { + font-size: 1.2em; + } +} + +@media screen and (max-width: 480px) { + .about__section .wp-person { + min-width: 100%; + } + + .about__section .wp-person .web { + font-size: 1em; + } + + .about__section .compact .wp-person .web { + font-size: 1em; + } +} + + +/*------------------------------------------------------------------------------ + 3.0 - Freedoms Page +------------------------------------------------------------------------------*/ + +.about__section .column .freedom-image { + margin-bottom: var(--gap); + max-height: 140px; +} + + +/*------------------------------------------------------------------------------ + x.2.0 - Legacy About Styles: Global +------------------------------------------------------------------------------*/ + +.about-wrap { + position: relative; + margin: 25px 40px 0 20px; + max-width: 1050px; /* readability */ + font-size: 15px; +} + +.about-wrap.full-width-layout { + max-width: 1200px; +} + +.about-wrap-content { + max-width: 1050px; +} + +.about-wrap div.updated, +.about-wrap div.error, +.about-wrap .notice { + display: none !important; +} + +.about-wrap hr { + border: 0; + height: 0; + margin: 3em 0 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.about-wrap img { + margin: 0; + width: 100%; + height: auto; + vertical-align: middle; +} + +.about-wrap .inline-svg img { + max-width: 100%; + width: auto; + height: auto; +} + +.about-wrap video { + margin: 1.5em auto; +} + +/* WordPress Version Badge */ + +.wp-badge { + background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; + background-position: center 25px; + background-size: 80px 80px; + color: #fff; + font-size: 14px; + text-align: center; + font-weight: 600; + margin: 5px 0 0; + padding-top: 120px; + height: 40px; + display: inline-block; + width: 140px; + text-rendering: optimizeLegibility; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.svg .wp-badge { + background-image: url(../images/wordpress-logo-white.svg?ver=20160308); +} + +.about-wrap .wp-badge { + position: absolute; + top: 0; + right: 0; +} + +/* Tabs */ + +.about-wrap .nav-tab { + padding-right: 15px; + padding-left: 15px; + font-size: 18px; + line-height: 1.33333333; +} + +/* x.2.1 - Typography */ + +.about-wrap h1 { + margin: 0.2em 200px 0 0; + padding: 0; + color: #32373c; + line-height: 1.2; + font-size: 2.8em; + font-weight: 400; +} + +.about-wrap h2 { + margin: 40px 0 0.6em; + font-size: 2.7em; + line-height: 1.3; + font-weight: 300; + text-align: center; +} + +.about-wrap h3 { + margin: 1.25em 0 0.6em; + font-size: 1.4em; + line-height: 1.5; +} + +.about-wrap h4 { + font-size: 16px; + color: #23282d; +} + +.about-wrap p { + line-height: 1.5; + font-size: 16px; +} + +.about-wrap code, +.about-wrap ol li p { + font-size: 14px; + font-weight: 400; +} + +.about-wrap figcaption { + font-size: 13px; + text-align: center; + color: white; + text-overflow: ellipsis; +} + +.about-wrap .about-description, +.about-wrap .about-text { + margin-top: 1.4em; + font-weight: 400; + line-height: 1.6; + font-size: 19px; +} + +.about-wrap .about-text { + margin: 1em 200px 1em 0; + color: #555d66; +} + +/* x.2.2 - Structure */ + +.about-wrap .has-1-columns, +.about-wrap .has-2-columns, +.about-wrap .has-3-columns, +.about-wrap .has-4-columns { + display: grid; + max-width: 800px; + margin-top: 40px; + margin-left: auto; + margin-right: auto; +} + +.about-wrap .column { + margin-right: 20px; + margin-left: 20px; +} + +.about-wrap .is-wide { + max-width: 760px; +} + +.about-wrap .is-fullwidth { + max-width: 100%; +} + +.about-wrap .has-1-columns { + display: block; + max-width: 680px; + margin: 0 auto 40px; +} + +.about-wrap .has-2-columns { + grid-template-columns: 1fr 1fr; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n+1) { + grid-column-start: 1; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n) { + grid-column-start: 2; +} + +.about-wrap .has-2-columns.is-wider-right { + grid-template-columns: 1fr 2fr; +} + +.about-wrap .has-2-columns.is-wider-left { + grid-template-columns: 2fr 1fr; +} + +.about-wrap .has-3-columns { + grid-template-columns: repeat(3, 1fr); +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+1) { + grid-column-start: 1; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+2) { + grid-column-start: 2; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n) { + grid-column-start: 3; +} + +.about-wrap .has-4-columns { + grid-template-columns: repeat(4, 1fr); +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+1) { + grid-column-start: 1; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+2) { + grid-column-start: 2; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+3) { + grid-column-start: 3; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n) { + grid-column-start: 4; +} + +.about-wrap .column :first-child { + margin-top: 0; +} + +.about-wrap .aligncenter { + text-align: center; +} + +.about-wrap .alignleft { + float: left; + margin-right: 40px; +} + +.about-wrap .alignright { + float: right; + margin-left: 40px; +} + +.about-wrap .is-vertically-aligned-top { + align-self: start; +} + +.about-wrap .is-vertically-aligned-center { + align-self: center; +} + +.about-wrap .is-vertically-aligned-bottom { + align-self: end; +} + +/* x.2.3 - Point Releases */ + +.about-wrap .point-releases { + margin-top: 5px; + border-bottom: 1px solid #ddd; +} + +.about-wrap .changelog { + margin-bottom: 40px; +} + +.about-wrap .changelog.point-releases h3 { + padding-top: 35px; +} + +.about-wrap .changelog.point-releases h3:first-child { + padding-top: 7px; +} + +.about-wrap .changelog.feature-section .col { + margin-top: 40px; +} + +/*------------------------------------------------------------------------------ + x.3.0 - Legacy About Styles: About Page +------------------------------------------------------------------------------*/ + +/* x.3.1 - Typography */ + +.about-wrap .lead-description { + font-size: 1.5em; + text-align: center; +} + +.about-wrap .feature-section p { + margin-top: 0.6em; +} + +/* x.3.2 - Structure */ + +.about-wrap .headline-feature { + margin: 0 auto 40px; + max-width: 680px; +} + +.about-wrap .headline-feature h2 { + margin: 50px 0 0; +} + +.about-wrap .headline-feature img { + max-width: 600px; + width: 100%; +} + +/* Go to Dashboard Home link */ + +.about-wrap .return-to-dashboard { + margin: 30px 0 0 -5px; + font-size: 14px; + font-weight: 600; +} + +.about-wrap .return-to-dashboard a { + text-decoration: none; + padding: 0 5px; +} + +/*------------------------------------------------------------------------------ + x.4.0 - Legacy About Styles: Credits & Freedoms Pages +------------------------------------------------------------------------------*/ + +/* Credits */ + +.about-wrap h2.wp-people-group { + margin: 2.6em 0 1.33em; + padding: 0; + font-size: 16px; + line-height: inherit; + font-weight: 600; + text-align: left; +} + +.about-wrap .wp-people-group { + padding: 0 5px; + margin: 0 -15px 0 -5px; +} + +.about-wrap .compact { + margin-bottom: 0; +} + +.about-wrap .wp-person { + display: inline-block; + vertical-align: top; + margin-right: 10px; + padding-bottom: 15px; + height: 70px; + width: 280px; +} + +.about-wrap .compact .wp-person { + height: auto; + width: 180px; + padding-bottom: 0; + margin-bottom: 0; +} + +.about-wrap .wp-person .gravatar { + float: left; + margin: 0 10px 10px 0; + padding: 1px; + width: 60px; + height: 60px; +} + +.about-wrap .compact .wp-person .gravatar { + width: 30px; + height: 30px; +} + +.about-wrap .wp-person .web { + margin: 6px 0 2px; + font-size: 16px; + font-weight: 400; + line-height: 2; + text-decoration: none; +} + +.about-wrap .wp-person .title { + display: block; +} + +.about-wrap #wp-people-group-validators + p.wp-credits-list { + margin-top: 0; +} + +.about-wrap p.wp-credits-list a { + white-space: nowrap; +} + +/* Freedoms */ + +.freedoms-php .about-wrap ol { + margin: 40px 60px; +} + +.freedoms-php .about-wrap ol li { + list-style-type: decimal; + font-weight: 600; +} + +.freedoms-php .about-wrap ol p { + font-weight: 400; + margin: 0.6em 0; +} + +.freedoms-php .column .freedoms-image { + background-image: url('../images/freedoms.png'); + background-size: 100%; + padding-top: 100%; +} + +.freedoms-php .column:nth-of-type(2) .freedoms-image { + background-position: 0 34%; +} + +.freedoms-php .column:nth-of-type(3) .freedoms-image { + background-position: 0 66%; +} + +.freedoms-php .column:nth-of-type(4) .freedoms-image { + background-position: 0 100%; +} + +/*------------------------------------------------------------------------------ + x.5.0 - Legacy About Styles: Media Queries +------------------------------------------------------------------------------*/ + +@media screen and (max-width: 782px) { + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + grid-template-columns: 1fr 1fr; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n+1), + .about-wrap .has-4-columns .column:nth-of-type(4n+1) { + grid-column-start: 1; + grid-row-start: 1; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n+2), + .about-wrap .has-4-columns .column:nth-of-type(4n+2) { + grid-column-start: 2; + grid-row-start: 1; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n), + .about-wrap .has-4-columns .column:nth-of-type(4n+3) { + grid-column-start: 1; + grid-row-start: 2; + } + + .about-wrap .has-4-columns .column:nth-of-type(4n) { + grid-column-start: 2; + grid-row-start: 2; + } +} + +@media screen and (max-width: 600px) { + .about-wrap .has-2-columns, + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + display: block; + } + + .about-wrap :not(.is-wider-right):not(.is-wider-left) .column { + margin-right: 0; + margin-left: 0; + } + + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: grid; + } +} + +@media only screen and (max-width: 500px) { + .about-wrap { + margin-right: 20px; + margin-left: 10px; + } + + .about-wrap h1, + .about-wrap .about-text { + margin-right: 0; + } + + .about-wrap .about-text { + margin-bottom: 0.25em; + } + + .about-wrap .wp-badge { + position: relative; + margin-bottom: 1.5em; + width: 100%; + } +} + +@media only screen and (max-width: 480px) { + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: block; + } + + .about-wrap .column { + margin-right: 0; + margin-left: 0; + } + + .about-wrap .has-2-columns.is-wider-right img, + .about-wrap .has-2-columns.is-wider-left img { + max-width: 160px; + } +} diff --git a/tools/storybook/wordpress/css/about.min.css b/tools/storybook/wordpress/css/about.min.css new file mode 100644 index 00000000000..20a3773afad --- /dev/null +++ b/tools/storybook/wordpress/css/about.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.about__container{--background:transparent;--subtle-background:#def;--text:#000;--text-light:#fff;--accent-1:#3858e9;--accent-2:#3858e9;--nav-background:#fff;--nav-border:transparent;--nav-color:var(--text);--nav-current:var(--accent-1);--gap:2rem}.about-php,.credits-php,.freedoms-php,.privacy-php{background:#f0f7ff}.about-php #wpcontent,.credits-php #wpcontent,.freedoms-php #wpcontent,.privacy-php #wpcontent{background:linear-gradient(180deg,#fff 50%,#f0f7ff 100%);padding:0 24px}@media screen and (max-width:782px){.about-php.auto-fold #wpcontent,.credits-php.auto-fold #wpcontent,.freedoms-php.auto-fold #wpcontent,.privacy-php.auto-fold #wpcontent{padding-left:24px}}.about__container{max-width:1000px;margin:24px auto;clear:both}.about__container .alignleft{float:left}.about__container .alignright{float:right}.about__container .aligncenter{text-align:center}.about__container .is-vertically-aligned-top{align-self:start}.about__container .is-vertically-aligned-center{align-self:center}.about__container .is-vertically-aligned-bottom{align-self:end}.about__section{background:var(--background);clear:both}.about__container .has-accent-background-color{background-color:var(--accent-1);color:var(--text-light)}.about__container .has-accent-background-color a{color:var(--text-light)}.about__container .has-transparent-background-color{background-color:transparent}.about__container .has-accent-color{color:var(--accent-1)}.about__container .has-border{border:3px solid currentColor}.about__container .has-subtle-background-color{background-color:var(--subtle-background)}.about__container .has-background-image{background-size:contain;background-repeat:no-repeat;background-position:center}.about__section{margin:0 0 var(--gap)}.about__section .column:not(.is-edge-to-edge){padding:var(--gap)}.about__section+.about__section .is-section-header{padding-bottom:var(--gap)}.about__section .column.has-border,.about__section .column[class*=background-color],.about__section:where([class*=background-color]) .column{padding-top:var(--gap);padding-bottom:var(--gap)}.about__section .column p:first-of-type{margin-top:0}.about__section .column p:last-of-type{margin-bottom:0}.about__section .has-text-columns{columns:2;column-gap:calc(var(--gap) * 2)}.about__section .is-section-header{margin-bottom:0;padding:var(--gap) var(--gap) 0}.about__section .is-section-header p:last-child{margin-bottom:0}.about__section .is-section-header:first-child:last-child{padding:0}.about__section.is-feature{padding:var(--gap)}.about__section.is-feature p{margin:0}.about__section.is-feature p+p{margin-top:calc(var(--gap)/ 2)}.about__section.has-1-column{margin-left:auto;margin-right:auto;max-width:36em}.about__section.has-2-columns,.about__section.has-3-columns,.about__section.has-4-columns,.about__section.has-overlap-style{display:grid}.about__section.has-gutters{gap:var(--gap);margin-bottom:calc(var(--gap) * 2)}.about__section.has-2-columns{grid-template-columns:1fr 1fr}.about__section.has-2-columns.is-wider-right{grid-template-columns:2fr 3fr}.about__section.has-2-columns.is-wider-left{grid-template-columns:3fr 2fr}.about__section.has-2-columns .is-section-header{grid-column-start:1;-ms-grid-column-span:2;grid-column-end:span 2}.about__section.has-2-columns .column:nth-of-type(2n+1){grid-column-start:1}.about__section.has-2-columns .column:nth-of-type(2n){grid-column-start:2}.about__section.has-3-columns{grid-template-columns:repeat(3,1fr)}.about__section.has-3-columns .is-section-header{grid-column-start:1;-ms-grid-column-span:3;grid-column-end:span 3}.about__section.has-3-columns .column:nth-of-type(3n+1){grid-column-start:1}.about__section.has-3-columns .column:nth-of-type(3n+2){grid-column-start:2}.about__section.has-3-columns .column:nth-of-type(3n){grid-column-start:3}.about__section.has-4-columns{grid-template-columns:repeat(4,1fr)}.about__section.has-4-columns .is-section-header{grid-column-start:1;-ms-grid-column-span:4;grid-column-end:span 4}.about__section.has-4-columns .column:nth-of-type(4n+1){grid-column-start:1}.about__section.has-4-columns .column:nth-of-type(4n+2){grid-column-start:2}.about__section.has-4-columns .column:nth-of-type(4n+3){grid-column-start:3}.about__section.has-4-columns .column:nth-of-type(4n){grid-column-start:4}.about__section.has-2-columns .is-section-header~.column,.about__section.has-3-columns .is-section-header~.column,.about__section.has-4-columns .is-section-header~.column,.about__section.has-overlap-style .is-section-header~.column{grid-row-start:2}.about__section.has-overlap-style{grid-template-columns:repeat(7,1fr)}.about__section.has-overlap-style .column{grid-row-start:1}.about__section.has-overlap-style .column:nth-of-type(2n+1){grid-column-start:2;-ms-grid-column-span:3;grid-column-end:span 3}.about__section.has-overlap-style .column:nth-of-type(2n){grid-column-start:4;-ms-grid-column-span:3;grid-column-end:span 3}.about__section.has-overlap-style .column.is-top-layer{z-index:1}@media screen and (max-width:782px){.about__section.has-2-columns.is-wider-left,.about__section.has-2-columns.is-wider-right,.about__section.has-3-columns{display:block;margin-bottom:calc(var(--gap)/ 2)}.about__section .column:not(.is-edge-to-edge){padding-top:var(--gap);padding-bottom:var(--gap)}.about__section.has-2-columns.has-gutters.is-wider-left,.about__section.has-2-columns.has-gutters.is-wider-right,.about__section.has-3-columns.has-gutters{margin-bottom:calc(var(--gap) * 2)}.about__section.has-2-columns.has-gutters .column,.about__section.has-3-columns.has-gutters .column{margin-bottom:var(--gap)}.about__section.has-2-columns.has-gutters .column:last-child,.about__section.has-3-columns.has-gutters .column:last-child{margin-bottom:0}.about__section.has-3-columns .column:nth-of-type(n){padding-top:calc(var(--gap)/ 2);padding-bottom:calc(var(--gap)/ 2)}.about__section.has-4-columns{grid-template-columns:repeat(2,1fr)}.about__section.has-4-columns .column:nth-of-type(2n+1){grid-column-start:1}.about__section.has-4-columns .column:nth-of-type(2n){grid-column-start:2}.about__section.has-4-columns .column:nth-of-type(4n),.about__section.has-4-columns .column:nth-of-type(4n+3){grid-row-start:2}.about__section.has-4-columns .is-section-header{-ms-grid-column-span:2;grid-column-end:span 2}.about__section.has-4-columns .is-section-header~.column:nth-of-type(4n),.about__section.has-4-columns .is-section-header~.column:nth-of-type(4n+3){grid-row-start:3}.about__section.has-overlap-style{grid-template-columns:1fr}.about__section.has-overlap-style .column.column{grid-column-start:1;-ms-grid-column-span:1;grid-column-end:2;grid-row-start:1;-ms-grid-row-span:1;grid-row-end:2}}@media screen and (max-width:600px){.about__section.has-2-columns{display:block;margin-bottom:var(--gap)}.about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n){padding-top:calc(var(--gap)/ 2);padding-bottom:calc(var(--gap)/ 2)}.about__section.has-2-columns.has-gutters{margin-bottom:calc(var(--gap) * 2)}.about__section.has-2-columns.has-gutters .column{margin-bottom:var(--gap)}.about__section.has-2-columns.has-gutters .column:last-child{margin-bottom:0}}@media screen and (max-width:480px){.about__section.is-feature .column{padding:0}.about__section.has-4-columns{display:block;padding-bottom:calc(var(--gap)/ 2)}.about__section.has-4-columns.has-gutters .column{margin-bottom:calc(var(--gap)/ 2)}.about__section.has-4-columns.has-gutters .column:last-child{margin-bottom:0}.about__section.has-4-columns .column:nth-of-type(n){padding-top:calc(var(--gap)/ 2);padding-bottom:calc(var(--gap)/ 2)}}.about__container{line-height:1.4;color:var(--text)}.about__container h1{padding:0;color:inherit}.about__container h1,.about__container h2,.about__container h3.is-larger-heading{margin-top:0;margin-bottom:.5em;font-size:2em;line-height:1.2;font-weight:700}.about__container h1.is-smaller-heading,.about__container h2.is-smaller-heading,.about__container h3{margin-top:0;font-size:1.6em;line-height:1.3;font-weight:400}.about__container p{font-size:inherit;line-height:inherit}.about__container p.is-subheading{margin-top:0;font-size:1.8em}.about__section a{color:var(--accent-1);text-decoration:underline}.about__section a:active,.about__section a:focus,.about__section a:hover{color:var(--accent-1);text-decoration:none}.wp-credits-list a{text-decoration:none}.wp-credits-list a:active,.wp-credits-list a:focus,.wp-credits-list a:hover{text-decoration:underline}.about__container ul{list-style:disc;margin-left:calc(var(--gap)/ 2)}.about__container img{margin:0;max-width:100%;vertical-align:middle}.about__container .about__image{margin:0}.about__container .about__image img{max-width:100%;width:100%;height:auto}.about__container .about__image figcaption{margin-top:.5em;text-align:center}.about__container .about__image .wp-video{margin-left:auto;margin-right:auto}.about__container .about__image+h3{margin-top:1.5em}.about__container hr{margin:0;height:var(--gap);border:none}.about__container hr.is-small{height:calc(var(--gap)/ 4)}.about__container hr.is-large{height:calc(var(--gap) * 2);margin:calc(var(--gap)/ 2) auto}.about__container .notice,.about__container div.error,.about__container div.updated{display:none!important}.about__section{font-size:1.2em}.about__section.is-feature{font-size:1.6em}@media screen and (max-width:480px){.about__section.is-feature{font-size:1.4em}.about__container h1,.about__container h2,.about__container h3.is-larger-heading{font-size:2em}}.about__header{position:relative;margin-bottom:var(--gap);padding-top:0;background-image:url('../images/about-texture.png');background-color:var(--accent-2);background-size:500px 500px;background-blend-mode:overlay;color:var(--text-light)}.about__header::before{content:"";position:absolute;top:0;right:64px;z-index:0;width:300px;height:382px;background:url(../images/about-header-about.svg) no-repeat center;background-size:contain}.credits-php .about__header::before{top:auto;bottom:70px;height:310px;background-image:url('../images/about-header-credits.svg')}.freedoms-php .about__header::before{top:calc(50% - 182px);right:32px;width:375px;height:300px;background-image:url('../images/about-header-freedoms.svg')}.privacy-php .about__header::before{top:auto;bottom:-16px;background-image:url('../images/about-header-privacy.svg')}.about__header-image{margin:0 var(--gap) 3em}.about__header-title{box-sizing:border-box;padding:6rem 380px 0 0;margin:0 2rem}.about__header-title h1{margin:0 0 .5rem;padding:0;font-size:4.5rem;line-height:1;font-weight:400}.about__header-text{box-sizing:border-box;margin:0 0 7rem;padding:0 380px 0 2rem;font-size:1.6rem;line-height:1.15}.freedoms-php .about__header-text,.freedoms-php .about__header-title{padding-right:423px;margin-right:0}.about__header-navigation{position:relative;z-index:1;display:flex;justify-content:center;padding-top:0;background:var(--nav-background);color:var(--nav-color);border-bottom:3px solid var(--nav-border)}.about__header-navigation .nav-tab{margin-left:0;padding:calc(var(--gap) * .75) var(--gap);float:none;font-size:1.4em;line-height:1;border-width:0 0 3px;border-style:solid;border-color:transparent;background:0 0;color:inherit}.about__header-navigation .nav-tab:active,.about__header-navigation .nav-tab:hover{background-color:var(--nav-current);color:var(--text-light)}.about__header-navigation .nav-tab-active{margin-bottom:-3px;color:var(--nav-current);border-width:0 0 6px;border-color:var(--nav-current)}.about__header-navigation .nav-tab-active:active,.about__header-navigation .nav-tab-active:hover{background-color:var(--nav-current);color:var(--text-light);border-color:var(--nav-current)}@media screen and (max-width:960px){.about__header-title h1{font-size:4.8em}}@media screen and (max-width:782px){.about__header::before{width:240px;height:305px;right:32px}.credits-php .about__header::before{height:248px}.freedoms-php .about__header::before{top:calc(50% - 132px);height:192px;width:240px}.privacy-php .about__header::before{bottom:0;height:280px}.about__container .about__header-text{font-size:1.4em}.about__header-container{display:block}.about__header-text,.about__header-title{padding-right:288px!important}.about__header-image,.about__header-title{margin-left:calc(var(--gap)/ 2);margin-right:calc(var(--gap)/ 2)}.about__header-text{margin-top:0;margin-right:0;padding-left:calc(var(--gap)/ 2)}.about__header-navigation .nav-tab{margin-top:0;margin-right:0;padding-left:calc(var(--gap)/ 2);padding-right:calc(var(--gap)/ 2)}}@media screen and (max-width:600px){.about__header::before{display:none}.about__header-text,.about__header-title{padding-right:calc(var(--gap)/ 2)!important}}@media screen and (max-width:480px){.about__header-title p{font-size:2.4em}.about__header-title{padding-top:2rem}.about__header-text{margin-bottom:2rem}.about__header-navigation{display:block}.about__header-navigation .nav-tab{display:block;margin-bottom:0;padding:calc(var(--gap)/ 2);border-left-width:6px;border-bottom:none}.about__header-navigation .nav-tab-active{border-bottom:none;border-left-width:6px}}.about__section .wp-people-group-title{margin-bottom:calc(var(--gap) * 2);text-align:center}.about__section .wp-people-group{margin:0;display:flex;flex-wrap:wrap}.about__section .wp-person{display:inline-block;vertical-align:top;box-sizing:border-box;margin-bottom:var(--gap);width:25%;text-align:center}.about__section .compact .wp-person{height:auto;width:20%}.about__section .wp-person-avatar{display:block;margin:0 auto calc(var(--gap)/ 2);width:140px;height:140px;border-radius:100%;overflow:hidden;background:var(--accent-1)}.about__section .wp-person .gravatar{width:140px;height:140px;filter:grayscale(100%);mix-blend-mode:screen}.about__section .compact .wp-person .gravatar,.about__section .compact .wp-person-avatar{width:80px;height:80px}.about__section .wp-person .web{font-size:1.4em;font-weight:600;text-decoration:none}.about__section .wp-person .web:hover{text-decoration:underline}.about__section .compact .wp-person .web{font-size:1.2em}.about__section .wp-person .title{display:block;margin-top:.5em}@media screen and (max-width:782px){.about__section .wp-person{width:33%}.about__section .compact .wp-person{width:25%}.about__section .wp-person .gravatar,.about__section .wp-person-avatar{width:120px;height:120px}}@media screen and (max-width:600px){.about__section .wp-person{width:50%}.about__section .compact .wp-person{width:33%}.about__section .wp-person .web{font-size:1.2em}}@media screen and (max-width:480px){.about__section .wp-person{min-width:100%}.about__section .wp-person .web{font-size:1em}.about__section .compact .wp-person .web{font-size:1em}}.about__section .column .freedom-image{margin-bottom:var(--gap);max-height:140px}.about-wrap{position:relative;margin:25px 40px 0 20px;max-width:1050px;font-size:15px}.about-wrap.full-width-layout{max-width:1200px}.about-wrap-content{max-width:1050px}.about-wrap .notice,.about-wrap div.error,.about-wrap div.updated{display:none!important}.about-wrap hr{border:0;height:0;margin:3em 0 0;border-top:1px solid rgba(0,0,0,.1)}.about-wrap img{margin:0;width:100%;height:auto;vertical-align:middle}.about-wrap .inline-svg img{max-width:100%;width:auto;height:auto}.about-wrap video{margin:1.5em auto}.wp-badge{background:#0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;background-position:center 25px;background-size:80px 80px;color:#fff;font-size:14px;text-align:center;font-weight:600;margin:5px 0 0;padding-top:120px;height:40px;display:inline-block;width:140px;text-rendering:optimizeLegibility;box-shadow:0 1px 3px rgba(0,0,0,.2)}.svg .wp-badge{background-image:url(../images/wordpress-logo-white.svg?ver=20160308)}.about-wrap .wp-badge{position:absolute;top:0;right:0}.about-wrap .nav-tab{padding-right:15px;padding-left:15px;font-size:18px;line-height:1.33333333}.about-wrap h1{margin:.2em 200px 0 0;padding:0;color:#32373c;line-height:1.2;font-size:2.8em;font-weight:400}.about-wrap h2{margin:40px 0 .6em;font-size:2.7em;line-height:1.3;font-weight:300;text-align:center}.about-wrap h3{margin:1.25em 0 .6em;font-size:1.4em;line-height:1.5}.about-wrap h4{font-size:16px;color:#23282d}.about-wrap p{line-height:1.5;font-size:16px}.about-wrap code,.about-wrap ol li p{font-size:14px;font-weight:400}.about-wrap figcaption{font-size:13px;text-align:center;color:#fff;text-overflow:ellipsis}.about-wrap .about-description,.about-wrap .about-text{margin-top:1.4em;font-weight:400;line-height:1.6;font-size:19px}.about-wrap .about-text{margin:1em 200px 1em 0;color:#555d66}.about-wrap .has-1-columns,.about-wrap .has-2-columns,.about-wrap .has-3-columns,.about-wrap .has-4-columns{display:grid;max-width:800px;margin-top:40px;margin-left:auto;margin-right:auto}.about-wrap .column{margin-right:20px;margin-left:20px}.about-wrap .is-wide{max-width:760px}.about-wrap .is-fullwidth{max-width:100%}.about-wrap .has-1-columns{display:block;max-width:680px;margin:0 auto 40px}.about-wrap .has-2-columns{grid-template-columns:1fr 1fr}.about-wrap .has-2-columns .column:nth-of-type(2n+1){grid-column-start:1}.about-wrap .has-2-columns .column:nth-of-type(2n){grid-column-start:2}.about-wrap .has-2-columns.is-wider-right{grid-template-columns:1fr 2fr}.about-wrap .has-2-columns.is-wider-left{grid-template-columns:2fr 1fr}.about-wrap .has-3-columns{grid-template-columns:repeat(3,1fr)}.about-wrap .has-3-columns .column:nth-of-type(3n+1){grid-column-start:1}.about-wrap .has-3-columns .column:nth-of-type(3n+2){grid-column-start:2}.about-wrap .has-3-columns .column:nth-of-type(3n){grid-column-start:3}.about-wrap .has-4-columns{grid-template-columns:repeat(4,1fr)}.about-wrap .has-4-columns .column:nth-of-type(4n+1){grid-column-start:1}.about-wrap .has-4-columns .column:nth-of-type(4n+2){grid-column-start:2}.about-wrap .has-4-columns .column:nth-of-type(4n+3){grid-column-start:3}.about-wrap .has-4-columns .column:nth-of-type(4n){grid-column-start:4}.about-wrap .column :first-child{margin-top:0}.about-wrap .aligncenter{text-align:center}.about-wrap .alignleft{float:left;margin-right:40px}.about-wrap .alignright{float:right;margin-left:40px}.about-wrap .is-vertically-aligned-top{align-self:start}.about-wrap .is-vertically-aligned-center{align-self:center}.about-wrap .is-vertically-aligned-bottom{align-self:end}.about-wrap .point-releases{margin-top:5px;border-bottom:1px solid #ddd}.about-wrap .changelog{margin-bottom:40px}.about-wrap .changelog.point-releases h3{padding-top:35px}.about-wrap .changelog.point-releases h3:first-child{padding-top:7px}.about-wrap .changelog.feature-section .col{margin-top:40px}.about-wrap .lead-description{font-size:1.5em;text-align:center}.about-wrap .feature-section p{margin-top:.6em}.about-wrap .headline-feature{margin:0 auto 40px;max-width:680px}.about-wrap .headline-feature h2{margin:50px 0 0}.about-wrap .headline-feature img{max-width:600px;width:100%}.about-wrap .return-to-dashboard{margin:30px 0 0 -5px;font-size:14px;font-weight:600}.about-wrap .return-to-dashboard a{text-decoration:none;padding:0 5px}.about-wrap h2.wp-people-group{margin:2.6em 0 1.33em;padding:0;font-size:16px;line-height:inherit;font-weight:600;text-align:left}.about-wrap .wp-people-group{padding:0 5px;margin:0 -15px 0 -5px}.about-wrap .compact{margin-bottom:0}.about-wrap .wp-person{display:inline-block;vertical-align:top;margin-right:10px;padding-bottom:15px;height:70px;width:280px}.about-wrap .compact .wp-person{height:auto;width:180px;padding-bottom:0;margin-bottom:0}.about-wrap .wp-person .gravatar{float:left;margin:0 10px 10px 0;padding:1px;width:60px;height:60px}.about-wrap .compact .wp-person .gravatar{width:30px;height:30px}.about-wrap .wp-person .web{margin:6px 0 2px;font-size:16px;font-weight:400;line-height:2;text-decoration:none}.about-wrap .wp-person .title{display:block}.about-wrap #wp-people-group-validators+p.wp-credits-list{margin-top:0}.about-wrap p.wp-credits-list a{white-space:nowrap}.freedoms-php .about-wrap ol{margin:40px 60px}.freedoms-php .about-wrap ol li{list-style-type:decimal;font-weight:600}.freedoms-php .about-wrap ol p{font-weight:400;margin:.6em 0}.freedoms-php .column .freedoms-image{background-image:url('../images/freedoms.png');background-size:100%;padding-top:100%}.freedoms-php .column:nth-of-type(2) .freedoms-image{background-position:0 34%}.freedoms-php .column:nth-of-type(3) .freedoms-image{background-position:0 66%}.freedoms-php .column:nth-of-type(4) .freedoms-image{background-position:0 100%}@media screen and (max-width:782px){.about-wrap .has-3-columns,.about-wrap .has-4-columns{grid-template-columns:1fr 1fr}.about-wrap .has-3-columns .column:nth-of-type(3n+1),.about-wrap .has-4-columns .column:nth-of-type(4n+1){grid-column-start:1;grid-row-start:1}.about-wrap .has-3-columns .column:nth-of-type(3n+2),.about-wrap .has-4-columns .column:nth-of-type(4n+2){grid-column-start:2;grid-row-start:1}.about-wrap .has-3-columns .column:nth-of-type(3n),.about-wrap .has-4-columns .column:nth-of-type(4n+3){grid-column-start:1;grid-row-start:2}.about-wrap .has-4-columns .column:nth-of-type(4n){grid-column-start:2;grid-row-start:2}}@media screen and (max-width:600px){.about-wrap .has-2-columns,.about-wrap .has-3-columns,.about-wrap .has-4-columns{display:block}.about-wrap :not(.is-wider-right):not(.is-wider-left) .column{margin-right:0;margin-left:0}.about-wrap .has-2-columns.is-wider-left,.about-wrap .has-2-columns.is-wider-right{display:grid}}@media only screen and (max-width:500px){.about-wrap{margin-right:20px;margin-left:10px}.about-wrap .about-text,.about-wrap h1{margin-right:0}.about-wrap .about-text{margin-bottom:.25em}.about-wrap .wp-badge{position:relative;margin-bottom:1.5em;width:100%}}@media only screen and (max-width:480px){.about-wrap .has-2-columns.is-wider-left,.about-wrap .has-2-columns.is-wider-right{display:block}.about-wrap .column{margin-right:0;margin-left:0}.about-wrap .has-2-columns.is-wider-left img,.about-wrap .has-2-columns.is-wider-right img{max-width:160px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/admin-menu-rtl.css b/tools/storybook/wordpress/css/admin-menu-rtl.css new file mode 100644 index 00000000000..46b80ee3467 --- /dev/null +++ b/tools/storybook/wordpress/css/admin-menu-rtl.css @@ -0,0 +1,944 @@ +/*! This file is auto-generated */ +#adminmenuback, +#adminmenuwrap, +#adminmenu, +#adminmenu .wp-submenu { + width: 160px; + background-color: #1d2327; +} + +#adminmenuback { + position: fixed; + top: 0; + bottom: -120px; + z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */ +} + +.php-error #adminmenuback { + position: absolute; +} + +.php-error #adminmenuback, +.php-error #adminmenuwrap { + margin-top: 2em; +} + +#adminmenu { + clear: right; + margin: 12px 0; + padding: 0; + list-style: none; +} + +.folded #adminmenuback, +.folded #adminmenuwrap, +.folded #adminmenu, +.folded #adminmenu li.menu-top { + width: 36px; +} + +.icon16 { + height: 18px; + width: 18px; + padding: 6px; + margin: -6px -8px 0 0; + float: right; +} + +/* New Menu icons */ + +.icon16:before { + color: #8c8f94; /* same as new icons */ + font: normal 20px/1 dashicons; + speak: never; + padding: 6px 0; + height: 34px; + width: 20px; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transition: all .1s ease-in-out; +} + +.icon16.icon-dashboard:before { + content: "\f226"; +} + +.icon16.icon-post:before { + content: "\f109"; +} + +.icon16.icon-media:before { + content: "\f104"; +} + +.icon16.icon-links:before { + content: "\f103"; +} + +.icon16.icon-page:before { + content: "\f105"; +} + +.icon16.icon-comments:before { + content: "\f101"; + margin-top: 1px; +} + +.icon16.icon-appearance:before { + content: "\f100"; +} + +.icon16.icon-plugins:before { + content: "\f106"; +} + +.icon16.icon-users:before { + content: "\f110"; +} + +.icon16.icon-tools:before { + content: "\f107"; +} + +.icon16.icon-settings:before { + content: "\f108"; +} + +.icon16.icon-site:before { + content: "\f541"; +} + +.icon16.icon-generic:before { + content: "\f111"; +} + +/* hide background-image for icons above */ +.icon16.icon-dashboard, +.menu-icon-dashboard div.wp-menu-image, +.icon16.icon-post, +.menu-icon-post div.wp-menu-image, +.icon16.icon-media, +.menu-icon-media div.wp-menu-image, +.icon16.icon-links, +.menu-icon-links div.wp-menu-image, +.icon16.icon-page, +.menu-icon-page div.wp-menu-image, +.icon16.icon-comments, +.menu-icon-comments div.wp-menu-image, +.icon16.icon-appearance, +.menu-icon-appearance div.wp-menu-image, +.icon16.icon-plugins, +.menu-icon-plugins div.wp-menu-image, +.icon16.icon-users, +.menu-icon-users div.wp-menu-image, +.icon16.icon-tools, +.menu-icon-tools div.wp-menu-image, +.icon16.icon-settings, +.menu-icon-settings div.wp-menu-image, +.icon16.icon-site, +.menu-icon-site div.wp-menu-image, +.icon16.icon-generic, +.menu-icon-generic div.wp-menu-image { + background-image: none !important; +} + +/*------------------------------------------------------------------------------ + 7.0 - Main Navigation (Left Menu) +------------------------------------------------------------------------------*/ + +#adminmenuwrap { + position: relative; + float: right; + z-index: 9990; +} + +/* side admin menu */ +#adminmenu * { + -webkit-user-select: none; + user-select: none; +} + +#adminmenu li { + margin: 0; + padding: 0; +} + +#adminmenu a { + display: block; + line-height: 1.3; + padding: 2px 5px; + color: #f0f0f1; +} + +#adminmenu .wp-submenu a { + color: #c3c4c7; + color: rgba(240, 246, 252, 0.7); + font-size: 13px; + line-height: 1.4; + margin: 0; + padding: 5px 0; +} + +#adminmenu .wp-submenu a:hover, +#adminmenu .wp-submenu a:focus { + background: none; +} + +#adminmenu a:hover, +#adminmenu li.menu-top > a:focus, +#adminmenu .wp-submenu a:hover, +#adminmenu .wp-submenu a:focus { + color: #72aee6; +} + +#adminmenu a:hover, +#adminmenu a:focus, +.folded #adminmenu .wp-submenu-head:hover { + box-shadow: inset -4px 0 0 0 currentColor; + transition: box-shadow .1s linear; +} + +#adminmenu li.menu-top { + border: none; + min-height: 34px; + position: relative; +} + +#adminmenu .wp-submenu { + list-style: none; + position: absolute; + top: -1000em; + right: 160px; + overflow: visible; + word-wrap: break-word; + padding: 7px 0 8px; + z-index: 9999; + background-color: #2c3338; + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); +} + +.js #adminmenu .sub-open, +.js #adminmenu .opensub .wp-submenu, +#adminmenu a.menu-top:focus + .wp-submenu, +.no-js li.wp-has-submenu:hover .wp-submenu { + top: -1px; +} + +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + top: 0; +} + +#adminmenu .wp-has-current-submenu .wp-submenu, +.no-js li.wp-has-current-submenu:hover .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu.sub-open, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu { + position: relative; + z-index: 3; + top: auto; + right: auto; + left: auto; + bottom: auto; + border: 0 none; + margin-top: 0; + box-shadow: none; +} + +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); +} + +/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + position: relative; + background-color: #1d2327; + color: #72aee6; +} + +.folded #adminmenu li.menu-top:hover, +.folded #adminmenu li.opensub > a.menu-top, +.folded #adminmenu li > a.menu-top:focus { + z-index: 10000; +} + +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.current a.menu-top, +#adminmenu .wp-menu-arrow, +#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, +#adminmenu .wp-menu-arrow div { + background: #2271b1; + color: #fff; +} + +.folded #adminmenu .wp-submenu.sub-open, +.folded #adminmenu .opensub .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, +.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu, +.folded #adminmenu a.menu-top:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, +.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { + top: 0; + right: 36px; +} + +.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + position: absolute; + top: -1000em; +} + +#adminmenu .wp-not-current-submenu .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + min-width: 160px; + width: auto; + border-right: 5px solid transparent; +} + +#adminmenu .wp-submenu li.current, +#adminmenu .wp-submenu li.current a, +#adminmenu .opensub .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-submenu li.current a:hover, +#adminmenu .wp-submenu li.current a:focus { + color: #fff; +} + +#adminmenu .wp-not-current-submenu li > a, +.folded #adminmenu .wp-has-current-submenu li > a { + padding-left: 16px; + padding-right: 14px; + /* Exclude from the transition the outline for Windows High Contrast mode */ + transition: all .1s ease-in-out, outline 0s; +} + +#adminmenu .wp-has-current-submenu ul > li > a, +.folded #adminmenu li.menu-top .wp-submenu > li > a { + padding: 5px 12px; +} + +#adminmenu a.menu-top, +#adminmenu .wp-submenu-head { + font-size: 14px; + font-weight: 400; + line-height: 1.3; + padding: 0; +} + +#adminmenu .wp-submenu-head { + display: none; +} + +.folded #adminmenu .wp-menu-name { + position: absolute; + right: -999px; +} + +.folded #adminmenu .wp-submenu-head { + display: block; +} + +#adminmenu .wp-submenu li { + padding: 0; + margin: 0; +} + +#adminmenu .wp-menu-image img { + padding: 9px 0 0; + opacity: 0.6; + filter: alpha(opacity=60); +} + +#adminmenu div.wp-menu-name { + padding: 8px 36px 8px 8px; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; +} + +#adminmenu div.wp-menu-image { + float: right; + width: 36px; + height: 34px; + margin: 0; + text-align: center; +} + +#adminmenu div.wp-menu-image.svg { + background-repeat: no-repeat; + background-position: center; + background-size: 20px auto; +} + +div.wp-menu-image:before { + color: #a7aaad; + color: rgba(240, 246, 252, 0.6); + padding: 7px 0; + transition: all .1s ease-in-out; +} + +#adminmenu div.wp-menu-image:before { + color: #a7aaad; + color: rgba(240, 246, 252, 0.6); +} + +#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu .wp-has-current-submenu div.wp-menu-image:before, +#adminmenu .current div.wp-menu-image:before, +#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before { + color: #fff; +} + +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #72aee6; +} + +.folded #adminmenu div.wp-menu-image { + width: 35px; + height: 30px; + position: absolute; + z-index: 25; +} + +.folded #adminmenu a.menu-top { + height: 34px; +} + +/* Sticky admin menu */ +.sticky-menu #adminmenuwrap { + position: fixed; +} + +/* A new arrow */ + +.wp-menu-arrow { + display: none !important; +} + +ul#adminmenu a.wp-has-current-submenu { + position: relative; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + left: 0; + border: solid 8px transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-left-color: #f0f0f1; + top: 50%; + margin-top: -8px; +} + +.folded ul#adminmenu li:hover a.wp-has-current-submenu:after, +.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after { + display: none; +} + +.folded ul#adminmenu a.wp-has-current-submenu:after, +.folded ul#adminmenu > li a.current:after { + border-width: 4px; + margin-top: -4px; +} + +/* flyout menu arrow */ +#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + left: 0; + border: 8px solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + top: 10px; + z-index: 10000; +} + +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-width: 4px; + margin-top: -4px; + top: 18px; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #2c3338; +} + +#adminmenu li.menu-top:hover .wp-menu-image img, +#adminmenu li.wp-has-current-submenu .wp-menu-image img { + opacity: 1; + filter: alpha(opacity=100); +} + +#adminmenu li.wp-menu-separator { + height: 5px; + padding: 0; + margin: 0 0 6px; + cursor: inherit; +} + +/* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */ +#adminmenu div.separator { + height: 2px; + padding: 0; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #fff; + font-weight: 400; + font-size: 14px; + padding: 5px 11px 5px 4px; + margin: -7px -5px 4px 0; + border-width: 3px 5px 3px 0; + border-style: solid; + border-color: transparent; +} + +#adminmenu li.current, +.folded #adminmenu li.wp-menu-open { + border: 0 none; +} + +/* @todo: consider to use a single rule for these counters and the list table comments counters. */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + display: inline-block; + vertical-align: top; + box-sizing: border-box; + margin: 1px 2px -1px 0; + padding: 0 5px; + min-width: 18px; + height: 18px; + border-radius: 9px; + background-color: #d63638; + color: #fff; + font-size: 11px; + line-height: 1.6; + text-align: center; + z-index: 26; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins { + background-color: #d63638; + color: #fff; +} + +#adminmenu li span.count-0 { + display: none; +} + +#collapse-button { + display: block; + width: 100%; + height: 34px; + margin: 0; + border: none; + padding: 0; + position: relative; + overflow: visible; + background: none; + color: #a7aaad; + cursor: pointer; +} + +#collapse-button:hover { + color: #72aee6; +} + +#collapse-button:focus { + color: #72aee6; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: -1px; +} + +#collapse-button .collapse-button-icon, +#collapse-button .collapse-button-label { + /* absolutely positioned to avoid 1px shift in IE when button is pressed */ + display: block; + position: absolute; + top: 0; + right: 0; +} + +#collapse-button .collapse-button-label { + top: 8px; +} + +#collapse-button .collapse-button-icon { + width: 36px; + height: 34px; +} + +#collapse-button .collapse-button-label { + padding: 0 36px 0 0; +} + +.folded #collapse-button .collapse-button-label { + display: none; +} + +#collapse-button .collapse-button-icon:after { + content: "\f148"; + display: block; + position: relative; + top: 7px; + text-align: center; + font: normal 20px/1 dashicons !important; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* rtl:ignore */ +.folded #collapse-button .collapse-button-icon:after, +.rtl #collapse-button .collapse-button-icon:after { + transform: rotate(180deg); +} + +.rtl.folded #collapse-button .collapse-button-icon:after { + transform: none; +} + +#collapse-button .collapse-button-icon:after, +#collapse-button .collapse-button-label { + transition: all .1s ease-in-out; +} + +/** + * Toolbar menu toggle + */ +li#wp-admin-bar-menu-toggle { + display: none; +} + +/* Hide-if-customize for items we can't add classes to */ +.customize-support #menu-appearance a[href="themes.php?page=custom-header"], +.customize-support #menu-appearance a[href="themes.php?page=custom-background"] { + display: none; +} + +/* Auto-folding of the admin menu */ +@media only screen and (max-width: 960px) { + .auto-fold #wpcontent, + .auto-fold #wpfooter { + margin-right: 36px; + } + + .auto-fold #adminmenuback, + .auto-fold #adminmenuwrap, + .auto-fold #adminmenu, + .auto-fold #adminmenu li.menu-top { + width: 36px; + } + + .auto-fold #adminmenu .wp-submenu.sub-open, + .auto-fold #adminmenu .opensub .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, + .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu, + .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + top: 0; + right: 36px; + } + + .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { + position: absolute; + top: -1000em; + margin-left: -1px; + padding: 7px 0 8px; + z-index: 9999; + } + + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { + min-width: 150px; + width: auto; + } + + .auto-fold #adminmenu .wp-has-current-submenu li > a { + padding-left: 16px; + padding-right: 14px; + } + + + .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { + padding-right: 12px; + } + + .auto-fold #adminmenu .wp-menu-name { + position: absolute; + right: -999px; + } + + .auto-fold #adminmenu .wp-submenu-head { + display: block; + } + + .auto-fold #adminmenu div.wp-menu-image { + height: 30px; + width: 34px; + position: absolute; + z-index: 25; + } + + .auto-fold #adminmenu a.menu-top { + min-height: 34px; + } + + .auto-fold #adminmenu li.wp-menu-open { + border: 0 none; + } + + .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last { + margin-bottom: 0; + } + + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { + display: none; + } + + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-width: 4px; + margin-top: -4px; + top: 16px; + } + + .auto-fold ul#adminmenu a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu > li a.current:after { + border-width: 4px; + margin-top: -4px; + } + + .auto-fold #adminmenu li.menu-top:hover, + .auto-fold #adminmenu li.opensub > a.menu-top, + .auto-fold #adminmenu li > a.menu-top:focus { + z-index: 10000; + } + + .auto-fold #collapse-menu .collapse-button-label { + display: none; + } + + /* rtl:ignore */ + .auto-fold #collapse-button .collapse-button-icon:after { + transform: rotate(180deg); + } + + .rtl.auto-fold #collapse-button .collapse-button-icon:after { + transform: none; + } + +} + +@media screen and (max-width: 782px) { + .auto-fold #wpcontent { + position: relative; + margin-right: 0; + padding-right: 10px; + } + + .sticky-menu #adminmenuwrap { + position: relative; + z-index: auto; + top: 0; + } + + /* Sidebar Adjustments */ + .auto-fold #adminmenu, + .auto-fold #adminmenuback, + .auto-fold #adminmenuwrap { + position: absolute; + width: 190px; + z-index: 100; + } + + .auto-fold #adminmenuback { + position: fixed; + } + + .auto-fold #adminmenuback, + .auto-fold #adminmenuwrap { + display: none; + } + + .auto-fold .wp-responsive-open #adminmenuback, + .auto-fold .wp-responsive-open #adminmenuwrap { + display: block; + } + + .auto-fold #adminmenu li.menu-top { + width: 100%; + } + + /* Resize the admin menu items to a comfortable touch size */ + .auto-fold #adminmenu li a { + font-size: 16px; + padding: 5px; + } + + .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { + padding: 10px 20px 10px 10px; + } + + /* Restore the menu names */ + .auto-fold #adminmenu .wp-menu-name { + position: static; + } + + /* Switch the arrow side */ + .auto-fold ul#adminmenu a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu > li.current > a.current:after { + border-width: 8px; + margin-top: -8px; + } + + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + display: none; + } + + /* Make the submenus appear correctly when tapped. */ + #adminmenu .wp-submenu { + position: relative; + display: none; + } + + .auto-fold #adminmenu .selected .wp-submenu, + .auto-fold #adminmenu .wp-menu-open .wp-submenu { + position: relative; + display: block; + top: 0; + right: -1px; + box-shadow: none; + } + + .auto-fold #adminmenu .selected .wp-submenu:after, + .auto-fold #adminmenu .wp-menu-open .wp-submenu:after { + display: none; + } + + .auto-fold #adminmenu .opensub .wp-submenu { + display: none; + } + + .auto-fold #adminmenu .selected .wp-submenu { + display: block; + } + + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { + display: block; + } + + .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + position: relative; + right: -1px; + left: 0; + top: 0; + } + + #adminmenu .wp-not-current-submenu .wp-submenu, + .folded #adminmenu .wp-has-current-submenu .wp-submenu { + border-right: none; + } + + /* Remove submenu headers and adjust sub meu*/ + #adminmenu .wp-submenu .wp-submenu-head { + display: none; + } + + /* Toolbar menu toggle */ + #wp-responsive-toggle { + position: fixed; + top: 5px; + right: 4px; + padding-left: 10px; + z-index: 99999; + border: none; + box-sizing: border-box; + } + + #wpadminbar #wp-admin-bar-menu-toggle a { + display: block; + padding: 0; + overflow: hidden; + outline: none; + text-decoration: none; + border: 1px solid transparent; + background: none; + height: 44px; + margin-right: -1px; + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #2c3338; + } + + li#wp-admin-bar-menu-toggle { + display: block; + } + + #wpadminbar #wp-admin-bar-menu-toggle a:hover { + border: 1px solid transparent; + } + + #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + content: "\f228"; + display: inline-block; + float: right; + font: normal 40px/45px dashicons; + vertical-align: middle; + outline: none; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 44px; + width: 50px; + padding: 0; + border: none; + text-align: center; + text-decoration: none; + box-sizing: border-box; + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #72aee6; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + #adminmenuwrap, + #adminmenuback { + display: none; + } + + .wp-responsive-open #adminmenuwrap, + .wp-responsive-open #adminmenuback { + display: block; + } + + .auto-fold #adminmenu { + top: 46px; + } +} diff --git a/tools/storybook/wordpress/css/admin-menu-rtl.min.css b/tools/storybook/wordpress/css/admin-menu-rtl.min.css new file mode 100644 index 00000000000..58ebeeaa12b --- /dev/null +++ b/tools/storybook/wordpress/css/admin-menu-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#adminmenu,#adminmenu .wp-submenu,#adminmenuback,#adminmenuwrap{width:160px;background-color:#1d2327}#adminmenuback{position:fixed;top:0;bottom:-120px;z-index:1}.php-error #adminmenuback{position:absolute}.php-error #adminmenuback,.php-error #adminmenuwrap{margin-top:2em}#adminmenu{clear:right;margin:12px 0;padding:0;list-style:none}.folded #adminmenu,.folded #adminmenu li.menu-top,.folded #adminmenuback,.folded #adminmenuwrap{width:36px}.icon16{height:18px;width:18px;padding:6px;margin:-6px -8px 0 0;float:right}.icon16:before{color:#8c8f94;font:normal 20px/1 dashicons;speak:never;padding:6px 0;height:34px;width:20px;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:all .1s ease-in-out}.icon16.icon-dashboard:before{content:"\f226"}.icon16.icon-post:before{content:"\f109"}.icon16.icon-media:before{content:"\f104"}.icon16.icon-links:before{content:"\f103"}.icon16.icon-page:before{content:"\f105"}.icon16.icon-comments:before{content:"\f101";margin-top:1px}.icon16.icon-appearance:before{content:"\f100"}.icon16.icon-plugins:before{content:"\f106"}.icon16.icon-users:before{content:"\f110"}.icon16.icon-tools:before{content:"\f107"}.icon16.icon-settings:before{content:"\f108"}.icon16.icon-site:before{content:"\f541"}.icon16.icon-generic:before{content:"\f111"}.icon16.icon-appearance,.icon16.icon-comments,.icon16.icon-dashboard,.icon16.icon-generic,.icon16.icon-links,.icon16.icon-media,.icon16.icon-page,.icon16.icon-plugins,.icon16.icon-post,.icon16.icon-settings,.icon16.icon-site,.icon16.icon-tools,.icon16.icon-users,.menu-icon-appearance div.wp-menu-image,.menu-icon-comments div.wp-menu-image,.menu-icon-dashboard div.wp-menu-image,.menu-icon-generic div.wp-menu-image,.menu-icon-links div.wp-menu-image,.menu-icon-media div.wp-menu-image,.menu-icon-page div.wp-menu-image,.menu-icon-plugins div.wp-menu-image,.menu-icon-post div.wp-menu-image,.menu-icon-settings div.wp-menu-image,.menu-icon-site div.wp-menu-image,.menu-icon-tools div.wp-menu-image,.menu-icon-users div.wp-menu-image{background-image:none!important}#adminmenuwrap{position:relative;float:right;z-index:9990}#adminmenu *{-webkit-user-select:none;user-select:none}#adminmenu li{margin:0;padding:0}#adminmenu a{display:block;line-height:1.3;padding:2px 5px;color:#f0f0f1}#adminmenu .wp-submenu a{color:#c3c4c7;color:rgba(240,246,252,.7);font-size:13px;line-height:1.4;margin:0;padding:5px 0}#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover{background:0 0}#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a:hover,#adminmenu li.menu-top>a:focus{color:#72aee6}#adminmenu a:focus,#adminmenu a:hover,.folded #adminmenu .wp-submenu-head:hover{box-shadow:inset -4px 0 0 0 currentColor;transition:box-shadow .1s linear}#adminmenu li.menu-top{border:none;min-height:34px;position:relative}#adminmenu .wp-submenu{list-style:none;position:absolute;top:-1000em;right:160px;overflow:visible;word-wrap:break-word;padding:7px 0 8px;z-index:9999;background-color:#2c3338;box-shadow:0 3px 5px rgba(0,0,0,.2)}#adminmenu a.menu-top:focus+.wp-submenu,.js #adminmenu .opensub .wp-submenu,.js #adminmenu .sub-open,.no-js li.wp-has-submenu:hover .wp-submenu{top:-1px}#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{top:0}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,.no-js li.wp-has-current-submenu:hover .wp-submenu{position:relative;z-index:3;top:auto;right:auto;left:auto;bottom:auto;border:0 none;margin-top:0;box-shadow:none}.folded #adminmenu .wp-has-current-submenu .wp-submenu{box-shadow:0 3px 5px rgba(0,0,0,.2)}#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{position:relative;background-color:#1d2327;color:#72aee6}.folded #adminmenu li.menu-top:hover,.folded #adminmenu li.opensub>a.menu-top,.folded #adminmenu li>a.menu-top:focus{z-index:10000}#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu .wp-menu-arrow,#adminmenu .wp-menu-arrow div,#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu{background:#2271b1;color:#fff}.folded #adminmenu .opensub .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,.folded #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,.folded #adminmenu .wp-submenu.sub-open,.folded #adminmenu a.menu-top:focus+.wp-submenu,.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu{top:0;right:36px}.folded #adminmenu .wp-has-current-submenu .wp-submenu,.folded #adminmenu a.wp-has-current-submenu:focus+.wp-submenu{position:absolute;top:-1000em}#adminmenu .wp-not-current-submenu .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu{min-width:160px;width:auto;border-right:5px solid transparent}#adminmenu .opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current,#adminmenu .wp-submenu li.current a,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-not-current-submenu li>a,.folded #adminmenu .wp-has-current-submenu li>a{padding-left:16px;padding-right:14px;transition:all .1s ease-in-out,outline 0s}#adminmenu .wp-has-current-submenu ul>li>a,.folded #adminmenu li.menu-top .wp-submenu>li>a{padding:5px 12px}#adminmenu .wp-submenu-head,#adminmenu a.menu-top{font-size:14px;font-weight:400;line-height:1.3;padding:0}#adminmenu .wp-submenu-head{display:none}.folded #adminmenu .wp-menu-name{position:absolute;right:-999px}.folded #adminmenu .wp-submenu-head{display:block}#adminmenu .wp-submenu li{padding:0;margin:0}#adminmenu .wp-menu-image img{padding:9px 0 0;opacity:.6}#adminmenu div.wp-menu-name{padding:8px 36px 8px 8px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}#adminmenu div.wp-menu-image{float:right;width:36px;height:34px;margin:0;text-align:center}#adminmenu div.wp-menu-image.svg{background-repeat:no-repeat;background-position:center;background-size:20px auto}div.wp-menu-image:before{color:#a7aaad;color:rgba(240,246,252,.6);padding:7px 0;transition:all .1s ease-in-out}#adminmenu div.wp-menu-image:before{color:#a7aaad;color:rgba(240,246,252,.6)}#adminmenu .current div.wp-menu-image:before,#adminmenu .wp-has-current-submenu div.wp-menu-image:before,#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before{color:#fff}#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#72aee6}.folded #adminmenu div.wp-menu-image{width:35px;height:30px;position:absolute;z-index:25}.folded #adminmenu a.menu-top{height:34px}.sticky-menu #adminmenuwrap{position:fixed}.wp-menu-arrow{display:none!important}ul#adminmenu a.wp-has-current-submenu{position:relative}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{left:0;border:solid 8px transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-left-color:#f0f0f1;top:50%;margin-top:-8px}.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after,.folded ul#adminmenu li:hover a.wp-has-current-submenu:after{display:none}.folded ul#adminmenu a.wp-has-current-submenu:after,.folded ul#adminmenu>li a.current:after{border-width:4px;margin-top:-4px}#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{left:0;border:8px solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;top:10px;z-index:10000}.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{border-width:4px;margin-top:-4px;top:18px}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#2c3338}#adminmenu li.menu-top:hover .wp-menu-image img,#adminmenu li.wp-has-current-submenu .wp-menu-image img{opacity:1}#adminmenu li.wp-menu-separator{height:5px;padding:0;margin:0 0 6px;cursor:inherit}#adminmenu div.separator{height:2px;padding:0}#adminmenu .wp-submenu .wp-submenu-head{color:#fff;font-weight:400;font-size:14px;padding:5px 11px 5px 4px;margin:-7px -5px 4px 0;border-width:3px 5px 3px 0;border-style:solid;border-color:transparent}#adminmenu li.current,.folded #adminmenu li.wp-menu-open{border:0 none}#adminmenu .awaiting-mod,#adminmenu .update-plugins{display:inline-block;vertical-align:top;box-sizing:border-box;margin:1px 2px -1px 0;padding:0 5px;min-width:18px;height:18px;border-radius:9px;background-color:#d63638;color:#fff;font-size:11px;line-height:1.6;text-align:center;z-index:26}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod{background-color:#d63638;color:#fff}#adminmenu li span.count-0{display:none}#collapse-button{display:block;width:100%;height:34px;margin:0;border:none;padding:0;position:relative;overflow:visible;background:0 0;color:#a7aaad;cursor:pointer}#collapse-button:hover{color:#72aee6}#collapse-button:focus{color:#72aee6;outline:1px solid transparent;outline-offset:-1px}#collapse-button .collapse-button-icon,#collapse-button .collapse-button-label{display:block;position:absolute;top:0;right:0}#collapse-button .collapse-button-label{top:8px}#collapse-button .collapse-button-icon{width:36px;height:34px}#collapse-button .collapse-button-label{padding:0 36px 0 0}.folded #collapse-button .collapse-button-label{display:none}#collapse-button .collapse-button-icon:after{content:"\f148";display:block;position:relative;top:7px;text-align:center;font:normal 20px/1 dashicons!important;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.folded #collapse-button .collapse-button-icon:after,.rtl #collapse-button .collapse-button-icon:after{transform:rotate(180deg)}.rtl.folded #collapse-button .collapse-button-icon:after{transform:none}#collapse-button .collapse-button-icon:after,#collapse-button .collapse-button-label{transition:all .1s ease-in-out}li#wp-admin-bar-menu-toggle{display:none}.customize-support #menu-appearance a[href="themes.php?page=custom-background"],.customize-support #menu-appearance a[href="themes.php?page=custom-header"]{display:none}@media only screen and (max-width:960px){.auto-fold #wpcontent,.auto-fold #wpfooter{margin-right:36px}.auto-fold #adminmenu,.auto-fold #adminmenu li.menu-top,.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{width:36px}.auto-fold #adminmenu .opensub .wp-submenu,.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,.auto-fold #adminmenu .wp-submenu.sub-open,.auto-fold #adminmenu a.menu-top:focus+.wp-submenu{top:0;right:36px}.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu,.auto-fold #adminmenu a.wp-has-current-submenu:focus+.wp-submenu{position:absolute;top:-1000em;margin-left:-1px;padding:7px 0 8px;z-index:9999}.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu{min-width:150px;width:auto}.auto-fold #adminmenu .wp-has-current-submenu li>a{padding-left:16px;padding-right:14px}.auto-fold #adminmenu li.menu-top .wp-submenu>li>a{padding-right:12px}.auto-fold #adminmenu .wp-menu-name{position:absolute;right:-999px}.auto-fold #adminmenu .wp-submenu-head{display:block}.auto-fold #adminmenu div.wp-menu-image{height:30px;width:34px;position:absolute;z-index:25}.auto-fold #adminmenu a.menu-top{min-height:34px}.auto-fold #adminmenu li.wp-menu-open{border:0 none}.auto-fold #adminmenu .wp-has-current-submenu.menu-top-last{margin-bottom:0}.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after,.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after{display:none}.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{border-width:4px;margin-top:-4px;top:16px}.auto-fold ul#adminmenu a.wp-has-current-submenu:after,.auto-fold ul#adminmenu>li a.current:after{border-width:4px;margin-top:-4px}.auto-fold #adminmenu li.menu-top:hover,.auto-fold #adminmenu li.opensub>a.menu-top,.auto-fold #adminmenu li>a.menu-top:focus{z-index:10000}.auto-fold #collapse-menu .collapse-button-label{display:none}.auto-fold #collapse-button .collapse-button-icon:after{transform:rotate(180deg)}.rtl.auto-fold #collapse-button .collapse-button-icon:after{transform:none}}@media screen and (max-width:782px){.auto-fold #wpcontent{position:relative;margin-right:0;padding-right:10px}.sticky-menu #adminmenuwrap{position:relative;z-index:auto;top:0}.auto-fold #adminmenu,.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{position:absolute;width:190px;z-index:100}.auto-fold #adminmenuback{position:fixed}.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{display:none}.auto-fold .wp-responsive-open #adminmenuback,.auto-fold .wp-responsive-open #adminmenuwrap{display:block}.auto-fold #adminmenu li.menu-top{width:100%}.auto-fold #adminmenu li a{font-size:16px;padding:5px}.auto-fold #adminmenu li.menu-top .wp-submenu>li>a{padding:10px 20px 10px 10px}.auto-fold #adminmenu .wp-menu-name{position:static}.auto-fold ul#adminmenu a.wp-has-current-submenu:after,.auto-fold ul#adminmenu>li.current>a.current:after{border-width:8px;margin-top:-8px}.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{display:none}#adminmenu .wp-submenu{position:relative;display:none}.auto-fold #adminmenu .selected .wp-submenu,.auto-fold #adminmenu .wp-menu-open .wp-submenu{position:relative;display:block;top:0;right:-1px;box-shadow:none}.auto-fold #adminmenu .selected .wp-submenu:after,.auto-fold #adminmenu .wp-menu-open .wp-submenu:after{display:none}.auto-fold #adminmenu .opensub .wp-submenu{display:none}.auto-fold #adminmenu .selected .wp-submenu{display:block}.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after,.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after{display:block}.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.auto-fold #adminmenu a.menu-top:focus+.wp-submenu{position:relative;right:-1px;left:0;top:0}#adminmenu .wp-not-current-submenu .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu{border-right:none}#adminmenu .wp-submenu .wp-submenu-head{display:none}#wp-responsive-toggle{position:fixed;top:5px;right:4px;padding-left:10px;z-index:99999;border:none;box-sizing:border-box}#wpadminbar #wp-admin-bar-menu-toggle a{display:block;padding:0;overflow:hidden;outline:0;text-decoration:none;border:1px solid transparent;background:0 0;height:44px;margin-right:-1px}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#2c3338}li#wp-admin-bar-menu-toggle{display:block}#wpadminbar #wp-admin-bar-menu-toggle a:hover{border:1px solid transparent}#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{content:"\f228";display:inline-block;float:right;font:normal 40px/45px dashicons;vertical-align:middle;outline:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:44px;width:50px;padding:0;border:none;text-align:center;text-decoration:none;box-sizing:border-box}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#72aee6}}@media screen and (max-width:600px){#adminmenuback,#adminmenuwrap{display:none}.wp-responsive-open #adminmenuback,.wp-responsive-open #adminmenuwrap{display:block}.auto-fold #adminmenu{top:46px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/admin-menu.css b/tools/storybook/wordpress/css/admin-menu.css new file mode 100644 index 00000000000..243dde7daa3 --- /dev/null +++ b/tools/storybook/wordpress/css/admin-menu.css @@ -0,0 +1,943 @@ +#adminmenuback, +#adminmenuwrap, +#adminmenu, +#adminmenu .wp-submenu { + width: 160px; + background-color: #1d2327; +} + +#adminmenuback { + position: fixed; + top: 0; + bottom: -120px; + z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */ +} + +.php-error #adminmenuback { + position: absolute; +} + +.php-error #adminmenuback, +.php-error #adminmenuwrap { + margin-top: 2em; +} + +#adminmenu { + clear: left; + margin: 12px 0; + padding: 0; + list-style: none; +} + +.folded #adminmenuback, +.folded #adminmenuwrap, +.folded #adminmenu, +.folded #adminmenu li.menu-top { + width: 36px; +} + +.icon16 { + height: 18px; + width: 18px; + padding: 6px; + margin: -6px 0 0 -8px; + float: left; +} + +/* New Menu icons */ + +.icon16:before { + color: #8c8f94; /* same as new icons */ + font: normal 20px/1 dashicons; + speak: never; + padding: 6px 0; + height: 34px; + width: 20px; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transition: all .1s ease-in-out; +} + +.icon16.icon-dashboard:before { + content: "\f226"; +} + +.icon16.icon-post:before { + content: "\f109"; +} + +.icon16.icon-media:before { + content: "\f104"; +} + +.icon16.icon-links:before { + content: "\f103"; +} + +.icon16.icon-page:before { + content: "\f105"; +} + +.icon16.icon-comments:before { + content: "\f101"; + margin-top: 1px; +} + +.icon16.icon-appearance:before { + content: "\f100"; +} + +.icon16.icon-plugins:before { + content: "\f106"; +} + +.icon16.icon-users:before { + content: "\f110"; +} + +.icon16.icon-tools:before { + content: "\f107"; +} + +.icon16.icon-settings:before { + content: "\f108"; +} + +.icon16.icon-site:before { + content: "\f541"; +} + +.icon16.icon-generic:before { + content: "\f111"; +} + +/* hide background-image for icons above */ +.icon16.icon-dashboard, +.menu-icon-dashboard div.wp-menu-image, +.icon16.icon-post, +.menu-icon-post div.wp-menu-image, +.icon16.icon-media, +.menu-icon-media div.wp-menu-image, +.icon16.icon-links, +.menu-icon-links div.wp-menu-image, +.icon16.icon-page, +.menu-icon-page div.wp-menu-image, +.icon16.icon-comments, +.menu-icon-comments div.wp-menu-image, +.icon16.icon-appearance, +.menu-icon-appearance div.wp-menu-image, +.icon16.icon-plugins, +.menu-icon-plugins div.wp-menu-image, +.icon16.icon-users, +.menu-icon-users div.wp-menu-image, +.icon16.icon-tools, +.menu-icon-tools div.wp-menu-image, +.icon16.icon-settings, +.menu-icon-settings div.wp-menu-image, +.icon16.icon-site, +.menu-icon-site div.wp-menu-image, +.icon16.icon-generic, +.menu-icon-generic div.wp-menu-image { + background-image: none !important; +} + +/*------------------------------------------------------------------------------ + 7.0 - Main Navigation (Left Menu) +------------------------------------------------------------------------------*/ + +#adminmenuwrap { + position: relative; + float: left; + z-index: 9990; +} + +/* side admin menu */ +#adminmenu * { + -webkit-user-select: none; + user-select: none; +} + +#adminmenu li { + margin: 0; + padding: 0; +} + +#adminmenu a { + display: block; + line-height: 1.3; + padding: 2px 5px; + color: #f0f0f1; +} + +#adminmenu .wp-submenu a { + color: #c3c4c7; + color: rgba(240, 246, 252, 0.7); + font-size: 13px; + line-height: 1.4; + margin: 0; + padding: 5px 0; +} + +#adminmenu .wp-submenu a:hover, +#adminmenu .wp-submenu a:focus { + background: none; +} + +#adminmenu a:hover, +#adminmenu li.menu-top > a:focus, +#adminmenu .wp-submenu a:hover, +#adminmenu .wp-submenu a:focus { + color: #72aee6; +} + +#adminmenu a:hover, +#adminmenu a:focus, +.folded #adminmenu .wp-submenu-head:hover { + box-shadow: inset 4px 0 0 0 currentColor; + transition: box-shadow .1s linear; +} + +#adminmenu li.menu-top { + border: none; + min-height: 34px; + position: relative; +} + +#adminmenu .wp-submenu { + list-style: none; + position: absolute; + top: -1000em; + left: 160px; + overflow: visible; + word-wrap: break-word; + padding: 7px 0 8px; + z-index: 9999; + background-color: #2c3338; + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); +} + +.js #adminmenu .sub-open, +.js #adminmenu .opensub .wp-submenu, +#adminmenu a.menu-top:focus + .wp-submenu, +.no-js li.wp-has-submenu:hover .wp-submenu { + top: -1px; +} + +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + top: 0; +} + +#adminmenu .wp-has-current-submenu .wp-submenu, +.no-js li.wp-has-current-submenu:hover .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu.sub-open, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu { + position: relative; + z-index: 3; + top: auto; + left: auto; + right: auto; + bottom: auto; + border: 0 none; + margin-top: 0; + box-shadow: none; +} + +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); +} + +/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + position: relative; + background-color: #1d2327; + color: #72aee6; +} + +.folded #adminmenu li.menu-top:hover, +.folded #adminmenu li.opensub > a.menu-top, +.folded #adminmenu li > a.menu-top:focus { + z-index: 10000; +} + +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.current a.menu-top, +#adminmenu .wp-menu-arrow, +#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, +#adminmenu .wp-menu-arrow div { + background: #2271b1; + color: #fff; +} + +.folded #adminmenu .wp-submenu.sub-open, +.folded #adminmenu .opensub .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, +.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu, +.folded #adminmenu a.menu-top:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, +.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { + top: 0; + left: 36px; +} + +.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + position: absolute; + top: -1000em; +} + +#adminmenu .wp-not-current-submenu .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + min-width: 160px; + width: auto; + border-left: 5px solid transparent; +} + +#adminmenu .wp-submenu li.current, +#adminmenu .wp-submenu li.current a, +#adminmenu .opensub .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-submenu li.current a:hover, +#adminmenu .wp-submenu li.current a:focus { + color: #fff; +} + +#adminmenu .wp-not-current-submenu li > a, +.folded #adminmenu .wp-has-current-submenu li > a { + padding-right: 16px; + padding-left: 14px; + /* Exclude from the transition the outline for Windows High Contrast mode */ + transition: all .1s ease-in-out, outline 0s; +} + +#adminmenu .wp-has-current-submenu ul > li > a, +.folded #adminmenu li.menu-top .wp-submenu > li > a { + padding: 5px 12px; +} + +#adminmenu a.menu-top, +#adminmenu .wp-submenu-head { + font-size: 14px; + font-weight: 400; + line-height: 1.3; + padding: 0; +} + +#adminmenu .wp-submenu-head { + display: none; +} + +.folded #adminmenu .wp-menu-name { + position: absolute; + left: -999px; +} + +.folded #adminmenu .wp-submenu-head { + display: block; +} + +#adminmenu .wp-submenu li { + padding: 0; + margin: 0; +} + +#adminmenu .wp-menu-image img { + padding: 9px 0 0; + opacity: 0.6; + filter: alpha(opacity=60); +} + +#adminmenu div.wp-menu-name { + padding: 8px 8px 8px 36px; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; +} + +#adminmenu div.wp-menu-image { + float: left; + width: 36px; + height: 34px; + margin: 0; + text-align: center; +} + +#adminmenu div.wp-menu-image.svg { + background-repeat: no-repeat; + background-position: center; + background-size: 20px auto; +} + +div.wp-menu-image:before { + color: #a7aaad; + color: rgba(240, 246, 252, 0.6); + padding: 7px 0; + transition: all .1s ease-in-out; +} + +#adminmenu div.wp-menu-image:before { + color: #a7aaad; + color: rgba(240, 246, 252, 0.6); +} + +#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu .wp-has-current-submenu div.wp-menu-image:before, +#adminmenu .current div.wp-menu-image:before, +#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before { + color: #fff; +} + +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #72aee6; +} + +.folded #adminmenu div.wp-menu-image { + width: 35px; + height: 30px; + position: absolute; + z-index: 25; +} + +.folded #adminmenu a.menu-top { + height: 34px; +} + +/* Sticky admin menu */ +.sticky-menu #adminmenuwrap { + position: fixed; +} + +/* A new arrow */ + +.wp-menu-arrow { + display: none !important; +} + +ul#adminmenu a.wp-has-current-submenu { + position: relative; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + right: 0; + border: solid 8px transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-right-color: #f0f0f1; + top: 50%; + margin-top: -8px; +} + +.folded ul#adminmenu li:hover a.wp-has-current-submenu:after, +.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after { + display: none; +} + +.folded ul#adminmenu a.wp-has-current-submenu:after, +.folded ul#adminmenu > li a.current:after { + border-width: 4px; + margin-top: -4px; +} + +/* flyout menu arrow */ +#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + right: 0; + border: 8px solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + top: 10px; + z-index: 10000; +} + +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-width: 4px; + margin-top: -4px; + top: 18px; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #2c3338; +} + +#adminmenu li.menu-top:hover .wp-menu-image img, +#adminmenu li.wp-has-current-submenu .wp-menu-image img { + opacity: 1; + filter: alpha(opacity=100); +} + +#adminmenu li.wp-menu-separator { + height: 5px; + padding: 0; + margin: 0 0 6px; + cursor: inherit; +} + +/* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */ +#adminmenu div.separator { + height: 2px; + padding: 0; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #fff; + font-weight: 400; + font-size: 14px; + padding: 5px 4px 5px 11px; + margin: -7px 0 4px -5px; + border-width: 3px 0 3px 5px; + border-style: solid; + border-color: transparent; +} + +#adminmenu li.current, +.folded #adminmenu li.wp-menu-open { + border: 0 none; +} + +/* @todo: consider to use a single rule for these counters and the list table comments counters. */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + display: inline-block; + vertical-align: top; + box-sizing: border-box; + margin: 1px 0 -1px 2px; + padding: 0 5px; + min-width: 18px; + height: 18px; + border-radius: 9px; + background-color: #d63638; + color: #fff; + font-size: 11px; + line-height: 1.6; + text-align: center; + z-index: 26; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins { + background-color: #d63638; + color: #fff; +} + +#adminmenu li span.count-0 { + display: none; +} + +#collapse-button { + display: block; + width: 100%; + height: 34px; + margin: 0; + border: none; + padding: 0; + position: relative; + overflow: visible; + background: none; + color: #a7aaad; + cursor: pointer; +} + +#collapse-button:hover { + color: #72aee6; +} + +#collapse-button:focus { + color: #72aee6; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: -1px; +} + +#collapse-button .collapse-button-icon, +#collapse-button .collapse-button-label { + /* absolutely positioned to avoid 1px shift in IE when button is pressed */ + display: block; + position: absolute; + top: 0; + left: 0; +} + +#collapse-button .collapse-button-label { + top: 8px; +} + +#collapse-button .collapse-button-icon { + width: 36px; + height: 34px; +} + +#collapse-button .collapse-button-label { + padding: 0 0 0 36px; +} + +.folded #collapse-button .collapse-button-label { + display: none; +} + +#collapse-button .collapse-button-icon:after { + content: "\f148"; + display: block; + position: relative; + top: 7px; + text-align: center; + font: normal 20px/1 dashicons !important; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* rtl:ignore */ +.folded #collapse-button .collapse-button-icon:after, +.rtl #collapse-button .collapse-button-icon:after { + transform: rotate(180deg); +} + +.rtl.folded #collapse-button .collapse-button-icon:after { + transform: none; +} + +#collapse-button .collapse-button-icon:after, +#collapse-button .collapse-button-label { + transition: all .1s ease-in-out; +} + +/** + * Toolbar menu toggle + */ +li#wp-admin-bar-menu-toggle { + display: none; +} + +/* Hide-if-customize for items we can't add classes to */ +.customize-support #menu-appearance a[href="themes.php?page=custom-header"], +.customize-support #menu-appearance a[href="themes.php?page=custom-background"] { + display: none; +} + +/* Auto-folding of the admin menu */ +@media only screen and (max-width: 960px) { + .auto-fold #wpcontent, + .auto-fold #wpfooter { + margin-left: 36px; + } + + .auto-fold #adminmenuback, + .auto-fold #adminmenuwrap, + .auto-fold #adminmenu, + .auto-fold #adminmenu li.menu-top { + width: 36px; + } + + .auto-fold #adminmenu .wp-submenu.sub-open, + .auto-fold #adminmenu .opensub .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, + .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu, + .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + top: 0; + left: 36px; + } + + .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { + position: absolute; + top: -1000em; + margin-right: -1px; + padding: 7px 0 8px; + z-index: 9999; + } + + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { + min-width: 150px; + width: auto; + } + + .auto-fold #adminmenu .wp-has-current-submenu li > a { + padding-right: 16px; + padding-left: 14px; + } + + + .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { + padding-left: 12px; + } + + .auto-fold #adminmenu .wp-menu-name { + position: absolute; + left: -999px; + } + + .auto-fold #adminmenu .wp-submenu-head { + display: block; + } + + .auto-fold #adminmenu div.wp-menu-image { + height: 30px; + width: 34px; + position: absolute; + z-index: 25; + } + + .auto-fold #adminmenu a.menu-top { + min-height: 34px; + } + + .auto-fold #adminmenu li.wp-menu-open { + border: 0 none; + } + + .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last { + margin-bottom: 0; + } + + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { + display: none; + } + + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-width: 4px; + margin-top: -4px; + top: 16px; + } + + .auto-fold ul#adminmenu a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu > li a.current:after { + border-width: 4px; + margin-top: -4px; + } + + .auto-fold #adminmenu li.menu-top:hover, + .auto-fold #adminmenu li.opensub > a.menu-top, + .auto-fold #adminmenu li > a.menu-top:focus { + z-index: 10000; + } + + .auto-fold #collapse-menu .collapse-button-label { + display: none; + } + + /* rtl:ignore */ + .auto-fold #collapse-button .collapse-button-icon:after { + transform: rotate(180deg); + } + + .rtl.auto-fold #collapse-button .collapse-button-icon:after { + transform: none; + } + +} + +@media screen and (max-width: 782px) { + .auto-fold #wpcontent { + position: relative; + margin-left: 0; + padding-left: 10px; + } + + .sticky-menu #adminmenuwrap { + position: relative; + z-index: auto; + top: 0; + } + + /* Sidebar Adjustments */ + .auto-fold #adminmenu, + .auto-fold #adminmenuback, + .auto-fold #adminmenuwrap { + position: absolute; + width: 190px; + z-index: 100; + } + + .auto-fold #adminmenuback { + position: fixed; + } + + .auto-fold #adminmenuback, + .auto-fold #adminmenuwrap { + display: none; + } + + .auto-fold .wp-responsive-open #adminmenuback, + .auto-fold .wp-responsive-open #adminmenuwrap { + display: block; + } + + .auto-fold #adminmenu li.menu-top { + width: 100%; + } + + /* Resize the admin menu items to a comfortable touch size */ + .auto-fold #adminmenu li a { + font-size: 16px; + padding: 5px; + } + + .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { + padding: 10px 10px 10px 20px; + } + + /* Restore the menu names */ + .auto-fold #adminmenu .wp-menu-name { + position: static; + } + + /* Switch the arrow side */ + .auto-fold ul#adminmenu a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu > li.current > a.current:after { + border-width: 8px; + margin-top: -8px; + } + + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + display: none; + } + + /* Make the submenus appear correctly when tapped. */ + #adminmenu .wp-submenu { + position: relative; + display: none; + } + + .auto-fold #adminmenu .selected .wp-submenu, + .auto-fold #adminmenu .wp-menu-open .wp-submenu { + position: relative; + display: block; + top: 0; + left: -1px; + box-shadow: none; + } + + .auto-fold #adminmenu .selected .wp-submenu:after, + .auto-fold #adminmenu .wp-menu-open .wp-submenu:after { + display: none; + } + + .auto-fold #adminmenu .opensub .wp-submenu { + display: none; + } + + .auto-fold #adminmenu .selected .wp-submenu { + display: block; + } + + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { + display: block; + } + + .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + position: relative; + left: -1px; + right: 0; + top: 0; + } + + #adminmenu .wp-not-current-submenu .wp-submenu, + .folded #adminmenu .wp-has-current-submenu .wp-submenu { + border-left: none; + } + + /* Remove submenu headers and adjust sub meu*/ + #adminmenu .wp-submenu .wp-submenu-head { + display: none; + } + + /* Toolbar menu toggle */ + #wp-responsive-toggle { + position: fixed; + top: 5px; + left: 4px; + padding-right: 10px; + z-index: 99999; + border: none; + box-sizing: border-box; + } + + #wpadminbar #wp-admin-bar-menu-toggle a { + display: block; + padding: 0; + overflow: hidden; + outline: none; + text-decoration: none; + border: 1px solid transparent; + background: none; + height: 44px; + margin-left: -1px; + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #2c3338; + } + + li#wp-admin-bar-menu-toggle { + display: block; + } + + #wpadminbar #wp-admin-bar-menu-toggle a:hover { + border: 1px solid transparent; + } + + #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + content: "\f228"; + display: inline-block; + float: left; + font: normal 40px/45px dashicons; + vertical-align: middle; + outline: none; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 44px; + width: 50px; + padding: 0; + border: none; + text-align: center; + text-decoration: none; + box-sizing: border-box; + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #72aee6; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + #adminmenuwrap, + #adminmenuback { + display: none; + } + + .wp-responsive-open #adminmenuwrap, + .wp-responsive-open #adminmenuback { + display: block; + } + + .auto-fold #adminmenu { + top: 46px; + } +} diff --git a/tools/storybook/wordpress/css/admin-menu.min.css b/tools/storybook/wordpress/css/admin-menu.min.css new file mode 100644 index 00000000000..5f12ce44935 --- /dev/null +++ b/tools/storybook/wordpress/css/admin-menu.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#adminmenu,#adminmenu .wp-submenu,#adminmenuback,#adminmenuwrap{width:160px;background-color:#1d2327}#adminmenuback{position:fixed;top:0;bottom:-120px;z-index:1}.php-error #adminmenuback{position:absolute}.php-error #adminmenuback,.php-error #adminmenuwrap{margin-top:2em}#adminmenu{clear:left;margin:12px 0;padding:0;list-style:none}.folded #adminmenu,.folded #adminmenu li.menu-top,.folded #adminmenuback,.folded #adminmenuwrap{width:36px}.icon16{height:18px;width:18px;padding:6px;margin:-6px 0 0 -8px;float:left}.icon16:before{color:#8c8f94;font:normal 20px/1 dashicons;speak:never;padding:6px 0;height:34px;width:20px;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:all .1s ease-in-out}.icon16.icon-dashboard:before{content:"\f226"}.icon16.icon-post:before{content:"\f109"}.icon16.icon-media:before{content:"\f104"}.icon16.icon-links:before{content:"\f103"}.icon16.icon-page:before{content:"\f105"}.icon16.icon-comments:before{content:"\f101";margin-top:1px}.icon16.icon-appearance:before{content:"\f100"}.icon16.icon-plugins:before{content:"\f106"}.icon16.icon-users:before{content:"\f110"}.icon16.icon-tools:before{content:"\f107"}.icon16.icon-settings:before{content:"\f108"}.icon16.icon-site:before{content:"\f541"}.icon16.icon-generic:before{content:"\f111"}.icon16.icon-appearance,.icon16.icon-comments,.icon16.icon-dashboard,.icon16.icon-generic,.icon16.icon-links,.icon16.icon-media,.icon16.icon-page,.icon16.icon-plugins,.icon16.icon-post,.icon16.icon-settings,.icon16.icon-site,.icon16.icon-tools,.icon16.icon-users,.menu-icon-appearance div.wp-menu-image,.menu-icon-comments div.wp-menu-image,.menu-icon-dashboard div.wp-menu-image,.menu-icon-generic div.wp-menu-image,.menu-icon-links div.wp-menu-image,.menu-icon-media div.wp-menu-image,.menu-icon-page div.wp-menu-image,.menu-icon-plugins div.wp-menu-image,.menu-icon-post div.wp-menu-image,.menu-icon-settings div.wp-menu-image,.menu-icon-site div.wp-menu-image,.menu-icon-tools div.wp-menu-image,.menu-icon-users div.wp-menu-image{background-image:none!important}#adminmenuwrap{position:relative;float:left;z-index:9990}#adminmenu *{-webkit-user-select:none;user-select:none}#adminmenu li{margin:0;padding:0}#adminmenu a{display:block;line-height:1.3;padding:2px 5px;color:#f0f0f1}#adminmenu .wp-submenu a{color:#c3c4c7;color:rgba(240,246,252,.7);font-size:13px;line-height:1.4;margin:0;padding:5px 0}#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover{background:0 0}#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a:hover,#adminmenu li.menu-top>a:focus{color:#72aee6}#adminmenu a:focus,#adminmenu a:hover,.folded #adminmenu .wp-submenu-head:hover{box-shadow:inset 4px 0 0 0 currentColor;transition:box-shadow .1s linear}#adminmenu li.menu-top{border:none;min-height:34px;position:relative}#adminmenu .wp-submenu{list-style:none;position:absolute;top:-1000em;left:160px;overflow:visible;word-wrap:break-word;padding:7px 0 8px;z-index:9999;background-color:#2c3338;box-shadow:0 3px 5px rgba(0,0,0,.2)}#adminmenu a.menu-top:focus+.wp-submenu,.js #adminmenu .opensub .wp-submenu,.js #adminmenu .sub-open,.no-js li.wp-has-submenu:hover .wp-submenu{top:-1px}#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{top:0}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,.no-js li.wp-has-current-submenu:hover .wp-submenu{position:relative;z-index:3;top:auto;left:auto;right:auto;bottom:auto;border:0 none;margin-top:0;box-shadow:none}.folded #adminmenu .wp-has-current-submenu .wp-submenu{box-shadow:0 3px 5px rgba(0,0,0,.2)}#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{position:relative;background-color:#1d2327;color:#72aee6}.folded #adminmenu li.menu-top:hover,.folded #adminmenu li.opensub>a.menu-top,.folded #adminmenu li>a.menu-top:focus{z-index:10000}#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu .wp-menu-arrow,#adminmenu .wp-menu-arrow div,#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu{background:#2271b1;color:#fff}.folded #adminmenu .opensub .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,.folded #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,.folded #adminmenu .wp-submenu.sub-open,.folded #adminmenu a.menu-top:focus+.wp-submenu,.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu{top:0;left:36px}.folded #adminmenu .wp-has-current-submenu .wp-submenu,.folded #adminmenu a.wp-has-current-submenu:focus+.wp-submenu{position:absolute;top:-1000em}#adminmenu .wp-not-current-submenu .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu{min-width:160px;width:auto;border-left:5px solid transparent}#adminmenu .opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current,#adminmenu .wp-submenu li.current a,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-not-current-submenu li>a,.folded #adminmenu .wp-has-current-submenu li>a{padding-right:16px;padding-left:14px;transition:all .1s ease-in-out,outline 0s}#adminmenu .wp-has-current-submenu ul>li>a,.folded #adminmenu li.menu-top .wp-submenu>li>a{padding:5px 12px}#adminmenu .wp-submenu-head,#adminmenu a.menu-top{font-size:14px;font-weight:400;line-height:1.3;padding:0}#adminmenu .wp-submenu-head{display:none}.folded #adminmenu .wp-menu-name{position:absolute;left:-999px}.folded #adminmenu .wp-submenu-head{display:block}#adminmenu .wp-submenu li{padding:0;margin:0}#adminmenu .wp-menu-image img{padding:9px 0 0;opacity:.6}#adminmenu div.wp-menu-name{padding:8px 8px 8px 36px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}#adminmenu div.wp-menu-image{float:left;width:36px;height:34px;margin:0;text-align:center}#adminmenu div.wp-menu-image.svg{background-repeat:no-repeat;background-position:center;background-size:20px auto}div.wp-menu-image:before{color:#a7aaad;color:rgba(240,246,252,.6);padding:7px 0;transition:all .1s ease-in-out}#adminmenu div.wp-menu-image:before{color:#a7aaad;color:rgba(240,246,252,.6)}#adminmenu .current div.wp-menu-image:before,#adminmenu .wp-has-current-submenu div.wp-menu-image:before,#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before{color:#fff}#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#72aee6}.folded #adminmenu div.wp-menu-image{width:35px;height:30px;position:absolute;z-index:25}.folded #adminmenu a.menu-top{height:34px}.sticky-menu #adminmenuwrap{position:fixed}.wp-menu-arrow{display:none!important}ul#adminmenu a.wp-has-current-submenu{position:relative}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{right:0;border:solid 8px transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-right-color:#f0f0f1;top:50%;margin-top:-8px}.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after,.folded ul#adminmenu li:hover a.wp-has-current-submenu:after{display:none}.folded ul#adminmenu a.wp-has-current-submenu:after,.folded ul#adminmenu>li a.current:after{border-width:4px;margin-top:-4px}#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{right:0;border:8px solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;top:10px;z-index:10000}.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{border-width:4px;margin-top:-4px;top:18px}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#2c3338}#adminmenu li.menu-top:hover .wp-menu-image img,#adminmenu li.wp-has-current-submenu .wp-menu-image img{opacity:1}#adminmenu li.wp-menu-separator{height:5px;padding:0;margin:0 0 6px;cursor:inherit}#adminmenu div.separator{height:2px;padding:0}#adminmenu .wp-submenu .wp-submenu-head{color:#fff;font-weight:400;font-size:14px;padding:5px 4px 5px 11px;margin:-7px 0 4px -5px;border-width:3px 0 3px 5px;border-style:solid;border-color:transparent}#adminmenu li.current,.folded #adminmenu li.wp-menu-open{border:0 none}#adminmenu .awaiting-mod,#adminmenu .update-plugins{display:inline-block;vertical-align:top;box-sizing:border-box;margin:1px 0 -1px 2px;padding:0 5px;min-width:18px;height:18px;border-radius:9px;background-color:#d63638;color:#fff;font-size:11px;line-height:1.6;text-align:center;z-index:26}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod{background-color:#d63638;color:#fff}#adminmenu li span.count-0{display:none}#collapse-button{display:block;width:100%;height:34px;margin:0;border:none;padding:0;position:relative;overflow:visible;background:0 0;color:#a7aaad;cursor:pointer}#collapse-button:hover{color:#72aee6}#collapse-button:focus{color:#72aee6;outline:1px solid transparent;outline-offset:-1px}#collapse-button .collapse-button-icon,#collapse-button .collapse-button-label{display:block;position:absolute;top:0;left:0}#collapse-button .collapse-button-label{top:8px}#collapse-button .collapse-button-icon{width:36px;height:34px}#collapse-button .collapse-button-label{padding:0 0 0 36px}.folded #collapse-button .collapse-button-label{display:none}#collapse-button .collapse-button-icon:after{content:"\f148";display:block;position:relative;top:7px;text-align:center;font:normal 20px/1 dashicons!important;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.folded #collapse-button .collapse-button-icon:after,.rtl #collapse-button .collapse-button-icon:after{transform:rotate(180deg)}.rtl.folded #collapse-button .collapse-button-icon:after{transform:none}#collapse-button .collapse-button-icon:after,#collapse-button .collapse-button-label{transition:all .1s ease-in-out}li#wp-admin-bar-menu-toggle{display:none}.customize-support #menu-appearance a[href="themes.php?page=custom-background"],.customize-support #menu-appearance a[href="themes.php?page=custom-header"]{display:none}@media only screen and (max-width:960px){.auto-fold #wpcontent,.auto-fold #wpfooter{margin-left:36px}.auto-fold #adminmenu,.auto-fold #adminmenu li.menu-top,.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{width:36px}.auto-fold #adminmenu .opensub .wp-submenu,.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,.auto-fold #adminmenu .wp-submenu.sub-open,.auto-fold #adminmenu a.menu-top:focus+.wp-submenu{top:0;left:36px}.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu,.auto-fold #adminmenu a.wp-has-current-submenu:focus+.wp-submenu{position:absolute;top:-1000em;margin-right:-1px;padding:7px 0 8px;z-index:9999}.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu{min-width:150px;width:auto}.auto-fold #adminmenu .wp-has-current-submenu li>a{padding-right:16px;padding-left:14px}.auto-fold #adminmenu li.menu-top .wp-submenu>li>a{padding-left:12px}.auto-fold #adminmenu .wp-menu-name{position:absolute;left:-999px}.auto-fold #adminmenu .wp-submenu-head{display:block}.auto-fold #adminmenu div.wp-menu-image{height:30px;width:34px;position:absolute;z-index:25}.auto-fold #adminmenu a.menu-top{min-height:34px}.auto-fold #adminmenu li.wp-menu-open{border:0 none}.auto-fold #adminmenu .wp-has-current-submenu.menu-top-last{margin-bottom:0}.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after,.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after{display:none}.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{border-width:4px;margin-top:-4px;top:16px}.auto-fold ul#adminmenu a.wp-has-current-submenu:after,.auto-fold ul#adminmenu>li a.current:after{border-width:4px;margin-top:-4px}.auto-fold #adminmenu li.menu-top:hover,.auto-fold #adminmenu li.opensub>a.menu-top,.auto-fold #adminmenu li>a.menu-top:focus{z-index:10000}.auto-fold #collapse-menu .collapse-button-label{display:none}.auto-fold #collapse-button .collapse-button-icon:after{transform:rotate(180deg)}.rtl.auto-fold #collapse-button .collapse-button-icon:after{transform:none}}@media screen and (max-width:782px){.auto-fold #wpcontent{position:relative;margin-left:0;padding-left:10px}.sticky-menu #adminmenuwrap{position:relative;z-index:auto;top:0}.auto-fold #adminmenu,.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{position:absolute;width:190px;z-index:100}.auto-fold #adminmenuback{position:fixed}.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{display:none}.auto-fold .wp-responsive-open #adminmenuback,.auto-fold .wp-responsive-open #adminmenuwrap{display:block}.auto-fold #adminmenu li.menu-top{width:100%}.auto-fold #adminmenu li a{font-size:16px;padding:5px}.auto-fold #adminmenu li.menu-top .wp-submenu>li>a{padding:10px 10px 10px 20px}.auto-fold #adminmenu .wp-menu-name{position:static}.auto-fold ul#adminmenu a.wp-has-current-submenu:after,.auto-fold ul#adminmenu>li.current>a.current:after{border-width:8px;margin-top:-8px}.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after,.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{display:none}#adminmenu .wp-submenu{position:relative;display:none}.auto-fold #adminmenu .selected .wp-submenu,.auto-fold #adminmenu .wp-menu-open .wp-submenu{position:relative;display:block;top:0;left:-1px;box-shadow:none}.auto-fold #adminmenu .selected .wp-submenu:after,.auto-fold #adminmenu .wp-menu-open .wp-submenu:after{display:none}.auto-fold #adminmenu .opensub .wp-submenu{display:none}.auto-fold #adminmenu .selected .wp-submenu{display:block}.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after,.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after{display:block}.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.auto-fold #adminmenu a.menu-top:focus+.wp-submenu{position:relative;left:-1px;right:0;top:0}#adminmenu .wp-not-current-submenu .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu{border-left:none}#adminmenu .wp-submenu .wp-submenu-head{display:none}#wp-responsive-toggle{position:fixed;top:5px;left:4px;padding-right:10px;z-index:99999;border:none;box-sizing:border-box}#wpadminbar #wp-admin-bar-menu-toggle a{display:block;padding:0;overflow:hidden;outline:0;text-decoration:none;border:1px solid transparent;background:0 0;height:44px;margin-left:-1px}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#2c3338}li#wp-admin-bar-menu-toggle{display:block}#wpadminbar #wp-admin-bar-menu-toggle a:hover{border:1px solid transparent}#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{content:"\f228";display:inline-block;float:left;font:normal 40px/45px dashicons;vertical-align:middle;outline:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:44px;width:50px;padding:0;border:none;text-align:center;text-decoration:none;box-sizing:border-box}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#72aee6}}@media screen and (max-width:600px){#adminmenuback,#adminmenuwrap{display:none}.wp-responsive-open #adminmenuback,.wp-responsive-open #adminmenuwrap{display:block}.auto-fold #adminmenu{top:46px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/code-editor-rtl.css b/tools/storybook/wordpress/css/code-editor-rtl.css new file mode 100644 index 00000000000..a485e6c6c35 --- /dev/null +++ b/tools/storybook/wordpress/css/code-editor-rtl.css @@ -0,0 +1,77 @@ +/*! This file is auto-generated */ +.wrap [class*="CodeMirror-lint-marker"], +.wp-core-ui [class*="CodeMirror-lint-message"], +.wrap .CodeMirror-lint-marker-multiple { + background-image: none; +} + +.wp-core-ui .CodeMirror-lint-marker-error, +.wp-core-ui .CodeMirror-lint-marker-warning { + cursor: help; +} + +.wrap .CodeMirror-lint-marker-multiple { + position: absolute; + top: 0; +} + +.wrap [class*="CodeMirror-lint-marker"]:before { + font: normal 18px/1 dashicons; + position: relative; + top: -2px; +} + +.wp-core-ui [class*="CodeMirror-lint-message"]:before { + font: normal 16px/1 dashicons; + right: 16px; + position: absolute; +} + +.wp-core-ui .CodeMirror-lint-message-error, +.wp-core-ui .CodeMirror-lint-message-warning { + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + margin: 5px 0 2px; + padding: 3px 28px 3px 12px; +} + +.wp-core-ui .CodeMirror-lint-message-warning { + background-color: #fcf9e8; + border-right: 4px solid #dba617; +} + +.wrap .CodeMirror-lint-marker-warning:before, +.wp-core-ui .CodeMirror-lint-message-warning:before { + content: "\f534"; + color: #dba617; +} + +.wp-core-ui .CodeMirror-lint-message-error { + background-color: #fcf0f1; + border-right: 4px solid #d63638; +} + +.wrap .CodeMirror-lint-marker-error:before, +.wp-core-ui .CodeMirror-lint-message-error:before { + content: "\f153"; + color: #d63638; +} + +.wp-core-ui .CodeMirror-lint-tooltip { + background: none; + border: none; + border-radius: 0; + direction: rtl; +} + +.wrap .CodeMirror .CodeMirror-matchingbracket { + background: rgba(219, 166, 23, 0.3); + color: inherit; +} + +.CodeMirror { + text-align: right; +} + +.wrap .CodeMirror .CodeMirror-linenumber { + color: #646970; +} diff --git a/tools/storybook/wordpress/css/code-editor-rtl.min.css b/tools/storybook/wordpress/css/code-editor-rtl.min.css new file mode 100644 index 00000000000..d746eb2089e --- /dev/null +++ b/tools/storybook/wordpress/css/code-editor-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.wp-core-ui [class*=CodeMirror-lint-message],.wrap .CodeMirror-lint-marker-multiple,.wrap [class*=CodeMirror-lint-marker]{background-image:none}.wp-core-ui .CodeMirror-lint-marker-error,.wp-core-ui .CodeMirror-lint-marker-warning{cursor:help}.wrap .CodeMirror-lint-marker-multiple{position:absolute;top:0}.wrap [class*=CodeMirror-lint-marker]:before{font:normal 18px/1 dashicons;position:relative;top:-2px}.wp-core-ui [class*=CodeMirror-lint-message]:before{font:normal 16px/1 dashicons;right:16px;position:absolute}.wp-core-ui .CodeMirror-lint-message-error,.wp-core-ui .CodeMirror-lint-message-warning{box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:5px 0 2px;padding:3px 28px 3px 12px}.wp-core-ui .CodeMirror-lint-message-warning{background-color:#fcf9e8;border-right:4px solid #dba617}.wp-core-ui .CodeMirror-lint-message-warning:before,.wrap .CodeMirror-lint-marker-warning:before{content:"\f534";color:#dba617}.wp-core-ui .CodeMirror-lint-message-error{background-color:#fcf0f1;border-right:4px solid #d63638}.wp-core-ui .CodeMirror-lint-message-error:before,.wrap .CodeMirror-lint-marker-error:before{content:"\f153";color:#d63638}.wp-core-ui .CodeMirror-lint-tooltip{background:0 0;border:none;border-radius:0;direction:rtl}.wrap .CodeMirror .CodeMirror-matchingbracket{background:rgba(219,166,23,.3);color:inherit}.CodeMirror{text-align:right}.wrap .CodeMirror .CodeMirror-linenumber{color:#646970} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/code-editor.css b/tools/storybook/wordpress/css/code-editor.css new file mode 100644 index 00000000000..92c39405ba1 --- /dev/null +++ b/tools/storybook/wordpress/css/code-editor.css @@ -0,0 +1,76 @@ +.wrap [class*="CodeMirror-lint-marker"], +.wp-core-ui [class*="CodeMirror-lint-message"], +.wrap .CodeMirror-lint-marker-multiple { + background-image: none; +} + +.wp-core-ui .CodeMirror-lint-marker-error, +.wp-core-ui .CodeMirror-lint-marker-warning { + cursor: help; +} + +.wrap .CodeMirror-lint-marker-multiple { + position: absolute; + top: 0; +} + +.wrap [class*="CodeMirror-lint-marker"]:before { + font: normal 18px/1 dashicons; + position: relative; + top: -2px; +} + +.wp-core-ui [class*="CodeMirror-lint-message"]:before { + font: normal 16px/1 dashicons; + left: 16px; + position: absolute; +} + +.wp-core-ui .CodeMirror-lint-message-error, +.wp-core-ui .CodeMirror-lint-message-warning { + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + margin: 5px 0 2px; + padding: 3px 12px 3px 28px; +} + +.wp-core-ui .CodeMirror-lint-message-warning { + background-color: #fcf9e8; + border-left: 4px solid #dba617; +} + +.wrap .CodeMirror-lint-marker-warning:before, +.wp-core-ui .CodeMirror-lint-message-warning:before { + content: "\f534"; + color: #dba617; +} + +.wp-core-ui .CodeMirror-lint-message-error { + background-color: #fcf0f1; + border-left: 4px solid #d63638; +} + +.wrap .CodeMirror-lint-marker-error:before, +.wp-core-ui .CodeMirror-lint-message-error:before { + content: "\f153"; + color: #d63638; +} + +.wp-core-ui .CodeMirror-lint-tooltip { + background: none; + border: none; + border-radius: 0; + direction: ltr; +} + +.wrap .CodeMirror .CodeMirror-matchingbracket { + background: rgba(219, 166, 23, 0.3); + color: inherit; +} + +.CodeMirror { + text-align: left; +} + +.wrap .CodeMirror .CodeMirror-linenumber { + color: #646970; +} diff --git a/tools/storybook/wordpress/css/code-editor.min.css b/tools/storybook/wordpress/css/code-editor.min.css new file mode 100644 index 00000000000..fc08821a855 --- /dev/null +++ b/tools/storybook/wordpress/css/code-editor.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.wp-core-ui [class*=CodeMirror-lint-message],.wrap .CodeMirror-lint-marker-multiple,.wrap [class*=CodeMirror-lint-marker]{background-image:none}.wp-core-ui .CodeMirror-lint-marker-error,.wp-core-ui .CodeMirror-lint-marker-warning{cursor:help}.wrap .CodeMirror-lint-marker-multiple{position:absolute;top:0}.wrap [class*=CodeMirror-lint-marker]:before{font:normal 18px/1 dashicons;position:relative;top:-2px}.wp-core-ui [class*=CodeMirror-lint-message]:before{font:normal 16px/1 dashicons;left:16px;position:absolute}.wp-core-ui .CodeMirror-lint-message-error,.wp-core-ui .CodeMirror-lint-message-warning{box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:5px 0 2px;padding:3px 12px 3px 28px}.wp-core-ui .CodeMirror-lint-message-warning{background-color:#fcf9e8;border-left:4px solid #dba617}.wp-core-ui .CodeMirror-lint-message-warning:before,.wrap .CodeMirror-lint-marker-warning:before{content:"\f534";color:#dba617}.wp-core-ui .CodeMirror-lint-message-error{background-color:#fcf0f1;border-left:4px solid #d63638}.wp-core-ui .CodeMirror-lint-message-error:before,.wrap .CodeMirror-lint-marker-error:before{content:"\f153";color:#d63638}.wp-core-ui .CodeMirror-lint-tooltip{background:0 0;border:none;border-radius:0;direction:ltr}.wrap .CodeMirror .CodeMirror-matchingbracket{background:rgba(219,166,23,.3);color:inherit}.CodeMirror{text-align:left}.wrap .CodeMirror .CodeMirror-linenumber{color:#646970} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/color-picker-rtl.css b/tools/storybook/wordpress/css/color-picker-rtl.css new file mode 100644 index 00000000000..7b8e1842bf5 --- /dev/null +++ b/tools/storybook/wordpress/css/color-picker-rtl.css @@ -0,0 +1,183 @@ +/*! This file is auto-generated */ +/* rtl:ignore */ +.wp-color-picker { + width: 80px; + direction: ltr; +} + +.wp-picker-container .hidden { + display: none; +} + +/* Needs higher specificiity. */ +.wp-picker-container .wp-color-result.button { + min-height: 30px; + margin: 0 0 6px 6px; + padding: 0 30px 0 0; + font-size: 11px; +} + +.wp-color-result-text { + background: #f6f7f7; + border-radius: 2px 0 0 2px; + border-right: 1px solid #c3c4c7; + color: #50575e; + display: block; + line-height: 2.54545455; /* 28px */ + padding: 0 6px; + text-align: center; +} + +.wp-color-result:hover, +.wp-color-result:focus { + background: #f6f7f7; + border-color: #8c8f94; + color: #1d2327; +} + +.wp-color-result:hover:after, +.wp-color-result:focus:after { + color: #1d2327; + border-color: #a7aaad; + border-right: 1px solid #8c8f94; +} + +.wp-picker-container { + display: inline-block; +} + +.wp-color-result:focus { + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); +} + +.wp-color-result:active { + /* See Trac ticket #39662 */ + transform: none !important; +} + +.wp-picker-open + .wp-picker-input-wrap { + display: inline-block; + vertical-align: top; +} + +.wp-picker-input-wrap label { + display: inline-block; + vertical-align: top; +} + +/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */ +.form-table .wp-picker-input-wrap label { + margin: 0 !important; +} + +.wp-picker-input-wrap .button.wp-picker-default, +.wp-picker-input-wrap .button.wp-picker-clear, +.wp-customizer .wp-picker-input-wrap .button.wp-picker-default, +.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear { + margin-right: 6px; + padding: 0 8px; + line-height: 2.54545455; /* 28px */ + min-height: 30px; +} + +.wp-picker-container .iris-square-slider .ui-slider-handle:focus { + background-color: #50575e +} + +.wp-picker-container .iris-picker { + border-radius: 0; + border-color: #dcdcde; + margin-top: 6px; +} + +.wp-picker-container input[type="text"].wp-color-picker { + width: 4rem; + font-size: 12px; + font-family: monospace; + line-height: 2.33333333; /* 28px */ + margin: 0; + padding: 0 5px; + vertical-align: top; + min-height: 30px; +} + +.wp-color-picker::-webkit-input-placeholder { + color: #646970; +} + +.wp-color-picker::-moz-placeholder { + color: #646970; + opacity: 1; +} + +.wp-color-picker:-ms-input-placeholder { + color: #646970; +} + +.wp-picker-container input[type="text"].iris-error { + background-color: #fcf0f1; + border-color: #d63638; + color: #000; +} + +.iris-picker .ui-square-handle:focus, +.iris-picker .iris-strip .ui-slider-handle:focus { + border-color: #3582c4; + border-style: solid; + box-shadow: 0 0 0 1px #3582c4; + outline: 2px solid transparent; +} + +.iris-picker .iris-palette:focus { + box-shadow: 0 0 0 2px #3582c4; +} + +@media screen and (max-width: 782px) { + .wp-picker-container input[type="text"].wp-color-picker { + width: 5rem; + font-size: 16px; + line-height: 1.875; /* 30px */ + min-height: 32px; + } + + .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { + padding: 0 5px; + } + + .wp-picker-input-wrap .button.wp-picker-default, + .wp-picker-input-wrap .button.wp-picker-clear { + padding: 0 8px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; + } + + .wp-customizer .wp-picker-input-wrap .button.wp-picker-default, + .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear { + padding: 0 8px; + font-size: 14px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; + } + + .wp-picker-container .wp-color-result.button { + padding: 0 40px 0 0; + font-size: 14px; + line-height: 2.14285714; /* 30px */ + } + + .wp-customizer .wp-picker-container .wp-color-result.button { + font-size: 14px; + line-height: 2.14285714; /* 30px */ + } + + .wp-picker-container .wp-color-result-text { + padding: 0 14px; + font-size: inherit; + line-height: inherit; + } + + .wp-customizer .wp-picker-container .wp-color-result-text { + padding: 0 10px; + } +} diff --git a/tools/storybook/wordpress/css/color-picker-rtl.min.css b/tools/storybook/wordpress/css/color-picker-rtl.min.css new file mode 100644 index 00000000000..63f4ff7b73c --- /dev/null +++ b/tools/storybook/wordpress/css/color-picker-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.wp-color-picker{width:80px;direction:ltr}.wp-picker-container .hidden{display:none}.wp-picker-container .wp-color-result.button{min-height:30px;margin:0 0 6px 6px;padding:0 30px 0 0;font-size:11px}.wp-color-result-text{background:#f6f7f7;border-radius:2px 0 0 2px;border-right:1px solid #c3c4c7;color:#50575e;display:block;line-height:2.54545455;padding:0 6px;text-align:center}.wp-color-result:focus,.wp-color-result:hover{background:#f6f7f7;border-color:#8c8f94;color:#1d2327}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#1d2327;border-color:#a7aaad;border-right:1px solid #8c8f94}.wp-picker-container{display:inline-block}.wp-color-result:focus{border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8)}.wp-color-result:active{transform:none!important}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-input-wrap label{display:inline-block;vertical-align:top}.form-table .wp-picker-input-wrap label{margin:0!important}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{margin-right:6px;padding:0 8px;line-height:2.54545455;min-height:30px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#50575e}.wp-picker-container .iris-picker{border-radius:0;border-color:#dcdcde;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:4rem;font-size:12px;font-family:monospace;line-height:2.33333333;margin:0;padding:0 5px;vertical-align:top;min-height:30px}.wp-color-picker::-webkit-input-placeholder{color:#646970}.wp-color-picker::-moz-placeholder{color:#646970;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#646970}.wp-picker-container input[type=text].iris-error{background-color:#fcf0f1;border-color:#d63638;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{border-color:#3582c4;border-style:solid;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.iris-picker .iris-palette:focus{box-shadow:0 0 0 2px #3582c4}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{width:5rem;font-size:16px;line-height:1.875;min-height:32px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:0 5px}.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;line-height:2.14285714;min-height:32px}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;font-size:14px;line-height:2.14285714;min-height:32px}.wp-picker-container .wp-color-result.button{padding:0 40px 0 0;font-size:14px;line-height:2.14285714}.wp-customizer .wp-picker-container .wp-color-result.button{font-size:14px;line-height:2.14285714}.wp-picker-container .wp-color-result-text{padding:0 14px;font-size:inherit;line-height:inherit}.wp-customizer .wp-picker-container .wp-color-result-text{padding:0 10px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/color-picker.css b/tools/storybook/wordpress/css/color-picker.css new file mode 100644 index 00000000000..89513949579 --- /dev/null +++ b/tools/storybook/wordpress/css/color-picker.css @@ -0,0 +1,182 @@ +/* rtl:ignore */ +.wp-color-picker { + width: 80px; + direction: ltr; +} + +.wp-picker-container .hidden { + display: none; +} + +/* Needs higher specificiity. */ +.wp-picker-container .wp-color-result.button { + min-height: 30px; + margin: 0 6px 6px 0; + padding: 0 0 0 30px; + font-size: 11px; +} + +.wp-color-result-text { + background: #f6f7f7; + border-radius: 0 2px 2px 0; + border-left: 1px solid #c3c4c7; + color: #50575e; + display: block; + line-height: 2.54545455; /* 28px */ + padding: 0 6px; + text-align: center; +} + +.wp-color-result:hover, +.wp-color-result:focus { + background: #f6f7f7; + border-color: #8c8f94; + color: #1d2327; +} + +.wp-color-result:hover:after, +.wp-color-result:focus:after { + color: #1d2327; + border-color: #a7aaad; + border-left: 1px solid #8c8f94; +} + +.wp-picker-container { + display: inline-block; +} + +.wp-color-result:focus { + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); +} + +.wp-color-result:active { + /* See Trac ticket #39662 */ + transform: none !important; +} + +.wp-picker-open + .wp-picker-input-wrap { + display: inline-block; + vertical-align: top; +} + +.wp-picker-input-wrap label { + display: inline-block; + vertical-align: top; +} + +/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */ +.form-table .wp-picker-input-wrap label { + margin: 0 !important; +} + +.wp-picker-input-wrap .button.wp-picker-default, +.wp-picker-input-wrap .button.wp-picker-clear, +.wp-customizer .wp-picker-input-wrap .button.wp-picker-default, +.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear { + margin-left: 6px; + padding: 0 8px; + line-height: 2.54545455; /* 28px */ + min-height: 30px; +} + +.wp-picker-container .iris-square-slider .ui-slider-handle:focus { + background-color: #50575e +} + +.wp-picker-container .iris-picker { + border-radius: 0; + border-color: #dcdcde; + margin-top: 6px; +} + +.wp-picker-container input[type="text"].wp-color-picker { + width: 4rem; + font-size: 12px; + font-family: monospace; + line-height: 2.33333333; /* 28px */ + margin: 0; + padding: 0 5px; + vertical-align: top; + min-height: 30px; +} + +.wp-color-picker::-webkit-input-placeholder { + color: #646970; +} + +.wp-color-picker::-moz-placeholder { + color: #646970; + opacity: 1; +} + +.wp-color-picker:-ms-input-placeholder { + color: #646970; +} + +.wp-picker-container input[type="text"].iris-error { + background-color: #fcf0f1; + border-color: #d63638; + color: #000; +} + +.iris-picker .ui-square-handle:focus, +.iris-picker .iris-strip .ui-slider-handle:focus { + border-color: #3582c4; + border-style: solid; + box-shadow: 0 0 0 1px #3582c4; + outline: 2px solid transparent; +} + +.iris-picker .iris-palette:focus { + box-shadow: 0 0 0 2px #3582c4; +} + +@media screen and (max-width: 782px) { + .wp-picker-container input[type="text"].wp-color-picker { + width: 5rem; + font-size: 16px; + line-height: 1.875; /* 30px */ + min-height: 32px; + } + + .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { + padding: 0 5px; + } + + .wp-picker-input-wrap .button.wp-picker-default, + .wp-picker-input-wrap .button.wp-picker-clear { + padding: 0 8px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; + } + + .wp-customizer .wp-picker-input-wrap .button.wp-picker-default, + .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear { + padding: 0 8px; + font-size: 14px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; + } + + .wp-picker-container .wp-color-result.button { + padding: 0 0 0 40px; + font-size: 14px; + line-height: 2.14285714; /* 30px */ + } + + .wp-customizer .wp-picker-container .wp-color-result.button { + font-size: 14px; + line-height: 2.14285714; /* 30px */ + } + + .wp-picker-container .wp-color-result-text { + padding: 0 14px; + font-size: inherit; + line-height: inherit; + } + + .wp-customizer .wp-picker-container .wp-color-result-text { + padding: 0 10px; + } +} diff --git a/tools/storybook/wordpress/css/color-picker.min.css b/tools/storybook/wordpress/css/color-picker.min.css new file mode 100644 index 00000000000..a0c81489ed7 --- /dev/null +++ b/tools/storybook/wordpress/css/color-picker.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.wp-color-picker{width:80px;direction:ltr}.wp-picker-container .hidden{display:none}.wp-picker-container .wp-color-result.button{min-height:30px;margin:0 6px 6px 0;padding:0 0 0 30px;font-size:11px}.wp-color-result-text{background:#f6f7f7;border-radius:0 2px 2px 0;border-left:1px solid #c3c4c7;color:#50575e;display:block;line-height:2.54545455;padding:0 6px;text-align:center}.wp-color-result:focus,.wp-color-result:hover{background:#f6f7f7;border-color:#8c8f94;color:#1d2327}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#1d2327;border-color:#a7aaad;border-left:1px solid #8c8f94}.wp-picker-container{display:inline-block}.wp-color-result:focus{border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8)}.wp-color-result:active{transform:none!important}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-input-wrap label{display:inline-block;vertical-align:top}.form-table .wp-picker-input-wrap label{margin:0!important}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{margin-left:6px;padding:0 8px;line-height:2.54545455;min-height:30px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#50575e}.wp-picker-container .iris-picker{border-radius:0;border-color:#dcdcde;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:4rem;font-size:12px;font-family:monospace;line-height:2.33333333;margin:0;padding:0 5px;vertical-align:top;min-height:30px}.wp-color-picker::-webkit-input-placeholder{color:#646970}.wp-color-picker::-moz-placeholder{color:#646970;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#646970}.wp-picker-container input[type=text].iris-error{background-color:#fcf0f1;border-color:#d63638;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{border-color:#3582c4;border-style:solid;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.iris-picker .iris-palette:focus{box-shadow:0 0 0 2px #3582c4}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{width:5rem;font-size:16px;line-height:1.875;min-height:32px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:0 5px}.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;line-height:2.14285714;min-height:32px}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;font-size:14px;line-height:2.14285714;min-height:32px}.wp-picker-container .wp-color-result.button{padding:0 0 0 40px;font-size:14px;line-height:2.14285714}.wp-customizer .wp-picker-container .wp-color-result.button{font-size:14px;line-height:2.14285714}.wp-picker-container .wp-color-result-text{padding:0 14px;font-size:inherit;line-height:inherit}.wp-customizer .wp-picker-container .wp-color-result-text{padding:0 10px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/_admin.scss b/tools/storybook/wordpress/css/colors/_admin.scss new file mode 100644 index 00000000000..cb241905a02 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/_admin.scss @@ -0,0 +1,797 @@ + +@import 'variables'; +@import 'mixins'; + +@function url-friendly-colour( $color ) { + @return '%23' + str-slice( '#{ $color }', 2, -1 ); +} + +body { + background: $body-background; +} + + +/* Links */ + +a { + color: $link; + + &:hover, + &:active, + &:focus { + color: $link-focus; + } +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: $link; + + &:hover, + &:active, + &:focus { + color: $link-focus; + } +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ + +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: $form-checked; +} + +.wp-core-ui input[type="reset"]:hover, +.wp-core-ui input[type="reset"]:active { + color: $link-focus; +} + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="color"]:focus, +input[type="date"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="email"]:focus, +input[type="month"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="text"]:focus, +input[type="time"]:focus, +input[type="url"]:focus, +input[type="week"]:focus, +input[type="checkbox"]:focus, +input[type="radio"]:focus, +select:focus, +textarea:focus { + border-color: $highlight-color; + box-shadow: 0 0 0 1px $highlight-color; +} + + +/* Core UI */ + +.wp-core-ui { + + .button { + border-color: #7e8993; + color: #32373c; + } + + .button.hover, + .button:hover, + .button.focus, + .button:focus { + border-color: darken( #7e8993, 5% ); + color: darken( #32373c, 5% ); + } + + .button.focus, + .button:focus { + border-color: #7e8993; + color: darken( #32373c, 5% ); + box-shadow: 0 0 0 1px #32373c; + } + + .button:active { + border-color: #7e8993; + color: darken( #32373c, 5% ); + box-shadow: none; + } + + .button.active, + .button.active:focus, + .button.active:hover { + border-color: $button-color; + color: darken( #32373c, 5% ); + box-shadow: inset 0 2px 5px -3px $button-color; + } + + .button.active:focus { + box-shadow: 0 0 0 1px #32373c; + } + + @if ( $low-contrast-theme != "true" ) { + .button, + .button-secondary { + color: $highlight-color; + border-color: $highlight-color; + } + + .button.hover, + .button:hover, + .button-secondary:hover{ + border-color: darken($highlight-color, 10); + color: darken($highlight-color, 10); + } + + .button.focus, + .button:focus, + .button-secondary:focus { + border-color: lighten($highlight-color, 10); + color: darken($highlight-color, 20);; + box-shadow: 0 0 0 1px lighten($highlight-color, 10); + } + + .button-primary { + &:hover { + color: #fff; + } + } + } + + .button-primary { + @include button( $button-color ); + } + + .button-group > .button.active { + border-color: $button-color; + } + + .wp-ui-primary { + color: $text-color; + background-color: $base-color; + } + .wp-ui-text-primary { + color: $base-color; + } + + .wp-ui-highlight { + color: $menu-highlight-text; + background-color: $menu-highlight-background; + } + .wp-ui-text-highlight { + color: $menu-highlight-background; + } + + .wp-ui-notification { + color: $menu-bubble-text; + background-color: $menu-bubble-background; + } + .wp-ui-text-notification { + color: $menu-bubble-background; + } + + .wp-ui-text-icon { + color: $menu-icon; + } +} + + +/* List tables */ +@if $low-contrast-theme == "true" { + .wrap .page-title-action:hover { + color: $menu-text; + background-color: $menu-background; + } +} @else { + .wrap .page-title-action, + .wrap .page-title-action:active { + border: 1px solid $highlight-color; + color: $highlight-color; + } + + .wrap .page-title-action:hover { + color: darken($highlight-color, 10); + border-color: darken($highlight-color, 10); + } + + .wrap .page-title-action:focus { + border-color: lighten($highlight-color, 10); + color: darken($highlight-color, 20);; + box-shadow: 0 0 0 1px lighten($highlight-color, 10); + } +} + +.view-switch a.current:before { + color: $menu-background; +} + +.view-switch a:hover:before { + color: $menu-bubble-background; +} + + +/* Admin Menu */ + +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: $menu-background; +} + +#adminmenu a { + color: $menu-text; +} + +#adminmenu div.wp-menu-image:before { + color: $menu-icon; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: $menu-highlight-text; + background-color: $menu-highlight-background; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: $menu-highlight-icon; +} + + +/* Active tabs use a bottom border color that matches the page background color. */ + +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: $body-background; + border-bottom-color: $body-background; +} + + +/* Admin Menu: submenu */ + +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: $menu-submenu-background; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: $menu-submenu-background; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: $menu-submenu-text; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: $menu-submenu-text; + + &:focus, &:hover { + color: $menu-submenu-focus-text; + } +} + + +/* Admin Menu: current */ + +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: $menu-submenu-current-text; + + &:hover, &:focus { + color: $menu-submenu-focus-text; + } +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: $body-background; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: $menu-current-text; + background: $menu-current-background; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: $menu-current-icon; +} + + +/* Admin Menu: bubble */ + +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: $menu-bubble-text; + background: $menu-bubble-background; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: $menu-bubble-current-text; + background: $menu-bubble-current-background; +} + + +/* Admin Menu: collapse button */ + +#collapse-button { + color: $menu-collapse-text; +} + +#collapse-button:hover, +#collapse-button:focus { + color: $menu-submenu-focus-text; +} + +/* Admin Bar */ + +#wpadminbar { + color: $menu-text; + background: $menu-background; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: $menu-text; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: $menu-icon; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: $menu-submenu-focus-text; + background: $menu-submenu-background; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: $menu-submenu-focus-text; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: $menu-submenu-focus-text; +} + + +/* Admin Bar: submenu */ + +#wpadminbar .menupop .ab-sub-wrapper { + background: $menu-submenu-background; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: $menu-submenu-background-alt; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: $menu-submenu-text; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: $menu-icon; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: $menu-submenu-focus-text; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: $menu-submenu-focus-text; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: $menu-icon; +} + + +/* Admin Bar: search */ + +#wpadminbar #adminbarsearch:before { + color: $menu-icon; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: $menu-text; + background: $adminbar-input-background; +} + +/* Admin Bar: recovery mode */ + +#wpadminbar #wp-admin-bar-recovery-mode { + color: $adminbar-recovery-exit-text; + background-color: $adminbar-recovery-exit-background; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: $adminbar-recovery-exit-text; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: $adminbar-recovery-exit-text; + background-color: $adminbar-recovery-exit-background-alt; +} + +/* Admin Bar: my account */ + +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: $adminbar-avatar-frame; + background-color: $adminbar-avatar-frame; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: $menu-text; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: $menu-submenu-focus-text; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: $menu-submenu-text; +} + + +/* Pointers */ + +.wp-pointer .wp-pointer-content h3 { + background-color: $highlight-color; + border-color: darken( $highlight-color, 5% ); +} + +.wp-pointer .wp-pointer-content h3:before { + color: $highlight-color; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: $highlight-color; +} + + +/* Media */ + +.media-item .bar, +.media-progress-bar div { + background-color: $highlight-color; +} + +.details.attachment { + box-shadow: + inset 0 0 0 3px #fff, + inset 0 0 0 7px $highlight-color; +} + +.attachment.details .check { + background-color: $highlight-color; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color; +} + + +/* Themes */ + +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: $highlight-color; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: $highlight-color; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: $menu-background; +} + +body.more-filters-opened .more-filters { + color: $menu-text; + background-color: $menu-background; +} + +body.more-filters-opened .more-filters:before { + color: $menu-text; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: $menu-highlight-background; + color: $menu-highlight-text; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: $menu-highlight-text; +} + +/* Widgets */ + +.widgets-chooser li.widgets-chooser-selected { + background-color: $menu-highlight-background; + color: $menu-highlight-text; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: $menu-highlight-text; +} + + +/* Nav Menus */ + +.nav-menus-php .item-edit:focus:before { + box-shadow: + 0 0 0 1px lighten($button-color, 10), + 0 0 2px 1px $button-color; +} + + +/* Responsive Component */ + +div#wp-responsive-toggle a:before { + color: $menu-icon; +} + +.wp-responsive-open div#wp-responsive-toggle a { + // ToDo: make inset border + border-color: transparent; + background: $menu-highlight-background; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: $menu-submenu-background; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: $menu-icon; +} + +/* TinyMCE */ + +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: $highlight-color; +} + +/* Customizer */ +.wp-core-ui { + #customize-controls .control-section:hover > .accordion-section-title, + #customize-controls .control-section .accordion-section-title:hover, + #customize-controls .control-section.open .accordion-section-title, + #customize-controls .control-section .accordion-section-title:focus { + color: $link; + border-left-color: $button-color; + } + + .customize-controls-close:focus, + .customize-controls-close:hover, + .customize-controls-preview-toggle:focus, + .customize-controls-preview-toggle:hover { + color: $link; + border-top-color: $button-color; + } + + .customize-panel-back:hover, + .customize-panel-back:focus, + .customize-section-back:hover, + .customize-section-back:focus { + color: $link; + border-left-color: $button-color; + } + + .customize-screen-options-toggle:hover, + .customize-screen-options-toggle:active, + .customize-screen-options-toggle:focus, + .active-menu-screen-options .customize-screen-options-toggle, + #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, + #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, + #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: $link; + } + + .customize-screen-options-toggle:focus:before, + #customize-controls .customize-info .customize-help-toggle:focus:before, + &.wp-customizer button:focus .toggle-indicator:before, + .menu-item-bar .item-delete:focus:before, + #available-menu-items .item-add:focus:before, + #customize-save-button-wrapper .save:focus, + #publish-settings:focus { + box-shadow: + 0 0 0 1px lighten($button-color, 10), + 0 0 2px 1px $button-color; + } + + #customize-controls .customize-info.open .customize-help-toggle, + #customize-controls .customize-info .customize-help-toggle:focus, + #customize-controls .customize-info .customize-help-toggle:hover { + color: $link; + } + + .control-panel-themes .customize-themes-section-title:focus, + .control-panel-themes .customize-themes-section-title:hover { + border-left-color: $button-color; + color: $link; + } + + .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: $button-color; + } + + .control-panel-themes .customize-themes-section-title.selected { + color: $link; + } + + #customize-theme-controls .control-section:hover > .accordion-section-title:after, + #customize-theme-controls .control-section .accordion-section-title:hover:after, + #customize-theme-controls .control-section.open .accordion-section-title:after, + #customize-theme-controls .control-section .accordion-section-title:focus:after, + #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, + #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, + #customize-outer-theme-controls .control-section.open .accordion-section-title:after, + #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: $link; + } + + .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: $button-color; + border-style: solid; + box-shadow: 0 0 0 1px $button-color; + outline: 2px solid transparent; + } + + .wp-full-overlay-footer .devices button:focus, + .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: $button-color; + } + + .wp-full-overlay-footer .devices button:hover:before, + .wp-full-overlay-footer .devices button:focus:before { + color: $button-color; + } + + .wp-full-overlay .collapse-sidebar:hover, + .wp-full-overlay .collapse-sidebar:focus { + color: $button-color; + } + + .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, + .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: + 0 0 0 1px lighten($button-color, 10), + 0 0 2px 1px $button-color; + } + + &.wp-customizer .theme-overlay .theme-header .close:focus, + &.wp-customizer .theme-overlay .theme-header .close:hover, + &.wp-customizer .theme-overlay .theme-header .right:focus, + &.wp-customizer .theme-overlay .theme-header .right:hover, + &.wp-customizer .theme-overlay .theme-header .left:focus, + &.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: $button-color; + color: $link; + } +} + +/* Welcome Panel */ + +.welcome-panel { + background-color: $highlight-color; +} + +[class*="welcome-panel-icon"] { + @if ( $scheme-name == "light" ) { + background-color: $icon-color; + } @else { + background-color: $base-color; + } +} diff --git a/tools/storybook/wordpress/css/colors/_mixins.scss b/tools/storybook/wordpress/css/colors/_mixins.scss new file mode 100644 index 00000000000..9744a20a0e3 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/_mixins.scss @@ -0,0 +1,37 @@ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +@mixin button( $button-color, $button-text-color: #fff ) { + background: $button-color; + border-color: $button-color; + color: $button-text-color; + + &:hover, + &:focus { + background: lighten( $button-color, 3% ); + border-color: darken( $button-color, 3% ); + color: $button-text-color; + } + + &:focus { + box-shadow: + 0 0 0 1px #fff, + 0 0 0 3px $button-color; + } + + &:active { + background: darken( $button-color, 5% ); + border-color: darken( $button-color, 5% ); + color: $button-text-color; + } + + &.active, + &.active:focus, + &.active:hover { + background: $button-color; + color: $button-text-color; + border-color: darken( $button-color, 15% ); + box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% ); + } +} diff --git a/tools/storybook/wordpress/css/colors/_variables.scss b/tools/storybook/wordpress/css/colors/_variables.scss new file mode 100644 index 00000000000..21621342a42 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/_variables.scss @@ -0,0 +1,66 @@ +// assign default value to all undefined variables + +$scheme-name: "default" !default; + +// core variables + +$text-color: #fff !default; +$base-color: #23282d !default; +$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default; +$highlight-color: #0073aa !default; +$notification-color: #d54e21 !default; + + +// global + +$body-background: #f1f1f1 !default; + +$link: #0073aa !default; +$link-focus: lighten( $link, 10% ) !default; + +$button-color: $highlight-color !default; +$button-text-color: $text-color !default; + +$form-checked: #7e8993 !default; + +// admin menu & admin-bar + +$menu-text: $text-color !default; +$menu-icon: $icon-color !default; +$menu-background: $base-color !default; + +$menu-highlight-text: $text-color !default; +$menu-highlight-icon: $text-color !default; +$menu-highlight-background: $highlight-color !default; + +$menu-current-text: $menu-highlight-text !default; +$menu-current-icon: $menu-highlight-icon !default; +$menu-current-background: $menu-highlight-background !default; + +$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default; +$menu-submenu-background: darken( $base-color, 7% ) !default; +$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default; + +$menu-submenu-focus-text: $highlight-color !default; +$menu-submenu-current-text: $text-color !default; + +$menu-bubble-text: $text-color !default; +$menu-bubble-background: $notification-color !default; +$menu-bubble-current-text: $text-color !default; +$menu-bubble-current-background: $menu-submenu-background !default; + +$menu-collapse-text: $menu-icon !default; +$menu-collapse-icon: $menu-icon !default; +$menu-collapse-focus-text: $text-color !default; +$menu-collapse-focus-icon: $menu-highlight-icon !default; + +$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default; +$adminbar-input-background: lighten( $menu-background, 7% ) !default; + +$adminbar-recovery-exit-text: $menu-bubble-text !default; +$adminbar-recovery-exit-background: $menu-bubble-background !default; +$adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-background, 10%) !default; + +$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default; + +$low-contrast-theme: "false" !default; diff --git a/tools/storybook/wordpress/css/colors/blue/colors-rtl.css b/tools/storybook/wordpress/css/colors/blue/colors-rtl.css new file mode 100644 index 00000000000..44fd5ddff9d --- /dev/null +++ b/tools/storybook/wordpress/css/colors/blue/colors-rtl.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #096484; + box-shadow: 0 0 0 1px #096484; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #e1a948; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #e1a948; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #096484; + border-color: #096484; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #064054; + color: #064054; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #0c88b4; + color: #021c25; + box-shadow: 0 0 0 1px #0c88b4; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #e1a948; + border-color: #e1a948; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #e3af55; + border-color: #dfa33b; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e1a948; +} +.wp-core-ui .button-primary:active { + background: #dd9f32; + border-color: #dd9f32; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #e1a948; + color: #fff; + border-color: #bd831f; + box-shadow: inset 0 2px 5px -3px #241906; +} +.wp-core-ui .button-group > .button.active { + border-color: #e1a948; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #52accc; +} +.wp-core-ui .wp-ui-text-primary { + color: #52accc; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #096484; +} +.wp-core-ui .wp-ui-text-highlight { + color: #096484; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #e1a948; +} +.wp-core-ui .wp-ui-text-notification { + color: #e1a948; +} +.wp-core-ui .wp-ui-text-icon { + color: #e5f8ff; +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #096484; + color: #096484; +} + +.wrap .page-title-action:hover { + color: #064054; + border-color: #064054; +} + +.wrap .page-title-action:focus { + border-color: #0c88b4; + color: #021c25; + box-shadow: 0 0 0 1px #0c88b4; +} + +.view-switch a.current:before { + color: #52accc; +} + +.view-switch a:hover:before { + color: #e1a948; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #52accc; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: #e5f8ff; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #096484; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #4796b3; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #4796b3; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #e2ecf1; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #e2ecf1; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #fff; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #fff; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #096484; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #e1a948; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #4796b3; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #e5f8ff; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #fff; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #52accc; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #e5f8ff; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #fff; + background: #4796b3; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #fff; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #fff; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #4796b3; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #74b6ce; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #e2ecf1; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #e5f8ff; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #fff; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #fff; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #e5f8ff; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #e5f8ff; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #6eb9d4; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #e1a948; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #cb9841; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #6eb9d4; + background-color: #6eb9d4; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #e2ecf1; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #096484; + border-color: #07526c; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #096484; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #096484; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #096484; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #096484; +} + +.attachment.details .check { + background-color: #096484; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #096484; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #096484; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #096484; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #096484; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #52accc; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #52accc; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #096484; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #096484; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #e5f8ff; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #096484; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #4796b3; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #e5f8ff; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #096484; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-right-color: #e1a948; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #e1a948; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-right-color: #e1a948; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #e1a948; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #e1a948; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #e1a948; + border-style: solid; + box-shadow: 0 0 0 1px #e1a948; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #e1a948; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #e1a948; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #e1a948; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #e1a948; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #096484; +} + +[class*=welcome-panel-icon] { + background-color: #52accc; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/blue/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/blue/colors-rtl.min.css new file mode 100644 index 00000000000..27b7cbdac63 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/blue/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#096484;box-shadow:0 0 0 1px #096484}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#e1a948;color:#262a2e;box-shadow:inset 0 2px 5px -3px #e1a948}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#096484;border-color:#096484}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#064054;color:#064054}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#0c88b4;color:#021c25;box-shadow:0 0 0 1px #0c88b4}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#e1a948;border-color:#e1a948;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#e3af55;border-color:#dfa33b;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #e1a948}.wp-core-ui .button-primary:active{background:#dd9f32;border-color:#dd9f32;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#e1a948;color:#fff;border-color:#bd831f;box-shadow:inset 0 2px 5px -3px #241906}.wp-core-ui .button-group>.button.active{border-color:#e1a948}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#52accc}.wp-core-ui .wp-ui-text-primary{color:#52accc}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#096484}.wp-core-ui .wp-ui-text-highlight{color:#096484}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#e1a948}.wp-core-ui .wp-ui-text-notification{color:#e1a948}.wp-core-ui .wp-ui-text-icon{color:#e5f8ff}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #096484;color:#096484}.wrap .page-title-action:hover{color:#064054;border-color:#064054}.wrap .page-title-action:focus{border-color:#0c88b4;color:#021c25;box-shadow:0 0 0 1px #0c88b4}.view-switch a.current:before{color:#52accc}.view-switch a:hover:before{color:#e1a948}#adminmenu,#adminmenuback,#adminmenuwrap{background:#52accc}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:#e5f8ff}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#096484}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#4796b3}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#4796b3}#adminmenu .wp-submenu .wp-submenu-head{color:#e2ecf1}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#e2ecf1}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#fff}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#096484}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#e1a948}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#4796b3}#collapse-button{color:#e5f8ff}#collapse-button:focus,#collapse-button:hover{color:#fff}#wpadminbar{color:#fff;background:#52accc}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#e5f8ff}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#fff;background:#4796b3}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#fff}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#fff}#wpadminbar .menupop .ab-sub-wrapper{background:#4796b3}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#74b6ce}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#e2ecf1}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#e5f8ff}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#fff}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#fff}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#e5f8ff}#wpadminbar #adminbarsearch:before{color:#e5f8ff}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#6eb9d4}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#e1a948}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#cb9841}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#6eb9d4;background-color:#6eb9d4}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info .username{color:#e2ecf1}.wp-pointer .wp-pointer-content h3{background-color:#096484;border-color:#07526c}.wp-pointer .wp-pointer-content h3:before{color:#096484}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#096484}.media-item .bar,.media-progress-bar div{background-color:#096484}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #096484}.attachment.details .check{background-color:#096484;box-shadow:0 0 0 1px #fff,0 0 0 2px #096484}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #096484}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#096484}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#096484}.theme-filter.current,.theme-section.current{border-bottom-color:#52accc}body.more-filters-opened .more-filters{color:#fff;background-color:#52accc}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#096484;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#096484;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #e8be74,0 0 2px 1px #e1a948}div#wp-responsive-toggle a:before{color:#e5f8ff}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#096484}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#4796b3}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#e5f8ff}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#096484}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-right-color:#e1a948}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#e1a948}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-right-color:#e1a948}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #e8be74,0 0 2px 1px #e1a948}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#e1a948;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#e1a948}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#e1a948;border-style:solid;box-shadow:0 0 0 1px #e1a948;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#e1a948}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#e1a948}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#e1a948}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #e8be74,0 0 2px 1px #e1a948}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#e1a948;color:#0073aa}.welcome-panel{background-color:#096484}[class*=welcome-panel-icon]{background-color:#52accc} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/blue/colors.css b/tools/storybook/wordpress/css/colors/blue/colors.css new file mode 100644 index 00000000000..367415de3cf --- /dev/null +++ b/tools/storybook/wordpress/css/colors/blue/colors.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #096484; + box-shadow: 0 0 0 1px #096484; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #e1a948; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #e1a948; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #096484; + border-color: #096484; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #064054; + color: #064054; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #0c88b4; + color: #021c25; + box-shadow: 0 0 0 1px #0c88b4; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #e1a948; + border-color: #e1a948; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #e3af55; + border-color: #dfa33b; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e1a948; +} +.wp-core-ui .button-primary:active { + background: #dd9f32; + border-color: #dd9f32; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #e1a948; + color: #fff; + border-color: #bd831f; + box-shadow: inset 0 2px 5px -3px #241906; +} +.wp-core-ui .button-group > .button.active { + border-color: #e1a948; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #52accc; +} +.wp-core-ui .wp-ui-text-primary { + color: #52accc; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #096484; +} +.wp-core-ui .wp-ui-text-highlight { + color: #096484; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #e1a948; +} +.wp-core-ui .wp-ui-text-notification { + color: #e1a948; +} +.wp-core-ui .wp-ui-text-icon { + color: #e5f8ff; +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #096484; + color: #096484; +} + +.wrap .page-title-action:hover { + color: #064054; + border-color: #064054; +} + +.wrap .page-title-action:focus { + border-color: #0c88b4; + color: #021c25; + box-shadow: 0 0 0 1px #0c88b4; +} + +.view-switch a.current:before { + color: #52accc; +} + +.view-switch a:hover:before { + color: #e1a948; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #52accc; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: #e5f8ff; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #096484; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #4796b3; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #4796b3; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #e2ecf1; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #e2ecf1; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #fff; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #fff; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #096484; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #e1a948; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #4796b3; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #e5f8ff; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #fff; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #52accc; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #e5f8ff; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #fff; + background: #4796b3; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #fff; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #fff; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #4796b3; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #74b6ce; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #e2ecf1; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #e5f8ff; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #fff; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #fff; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #e5f8ff; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #e5f8ff; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #6eb9d4; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #e1a948; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #cb9841; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #6eb9d4; + background-color: #6eb9d4; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #e2ecf1; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #096484; + border-color: #07526c; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #096484; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #096484; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #096484; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #096484; +} + +.attachment.details .check { + background-color: #096484; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #096484; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #096484; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #096484; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #096484; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #52accc; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #52accc; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #096484; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #096484; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #e5f8ff; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #096484; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #4796b3; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #e5f8ff; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #096484; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-left-color: #e1a948; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #e1a948; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-left-color: #e1a948; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #e1a948; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #e1a948; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #e1a948; + border-style: solid; + box-shadow: 0 0 0 1px #e1a948; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #e1a948; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #e1a948; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #e1a948; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #e1a948; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #096484; +} + +[class*=welcome-panel-icon] { + background-color: #52accc; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/blue/colors.min.css b/tools/storybook/wordpress/css/colors/blue/colors.min.css new file mode 100644 index 00000000000..c005b655654 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/blue/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#096484;box-shadow:0 0 0 1px #096484}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#e1a948;color:#262a2e;box-shadow:inset 0 2px 5px -3px #e1a948}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#096484;border-color:#096484}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#064054;color:#064054}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#0c88b4;color:#021c25;box-shadow:0 0 0 1px #0c88b4}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#e1a948;border-color:#e1a948;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#e3af55;border-color:#dfa33b;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #e1a948}.wp-core-ui .button-primary:active{background:#dd9f32;border-color:#dd9f32;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#e1a948;color:#fff;border-color:#bd831f;box-shadow:inset 0 2px 5px -3px #241906}.wp-core-ui .button-group>.button.active{border-color:#e1a948}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#52accc}.wp-core-ui .wp-ui-text-primary{color:#52accc}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#096484}.wp-core-ui .wp-ui-text-highlight{color:#096484}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#e1a948}.wp-core-ui .wp-ui-text-notification{color:#e1a948}.wp-core-ui .wp-ui-text-icon{color:#e5f8ff}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #096484;color:#096484}.wrap .page-title-action:hover{color:#064054;border-color:#064054}.wrap .page-title-action:focus{border-color:#0c88b4;color:#021c25;box-shadow:0 0 0 1px #0c88b4}.view-switch a.current:before{color:#52accc}.view-switch a:hover:before{color:#e1a948}#adminmenu,#adminmenuback,#adminmenuwrap{background:#52accc}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:#e5f8ff}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#096484}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#4796b3}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#4796b3}#adminmenu .wp-submenu .wp-submenu-head{color:#e2ecf1}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#e2ecf1}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#fff}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#096484}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#e1a948}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#4796b3}#collapse-button{color:#e5f8ff}#collapse-button:focus,#collapse-button:hover{color:#fff}#wpadminbar{color:#fff;background:#52accc}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#e5f8ff}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#fff;background:#4796b3}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#fff}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#fff}#wpadminbar .menupop .ab-sub-wrapper{background:#4796b3}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#74b6ce}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#e2ecf1}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#e5f8ff}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#fff}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#fff}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#e5f8ff}#wpadminbar #adminbarsearch:before{color:#e5f8ff}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#6eb9d4}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#e1a948}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#cb9841}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#6eb9d4;background-color:#6eb9d4}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info .username{color:#e2ecf1}.wp-pointer .wp-pointer-content h3{background-color:#096484;border-color:#07526c}.wp-pointer .wp-pointer-content h3:before{color:#096484}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#096484}.media-item .bar,.media-progress-bar div{background-color:#096484}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #096484}.attachment.details .check{background-color:#096484;box-shadow:0 0 0 1px #fff,0 0 0 2px #096484}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #096484}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#096484}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#096484}.theme-filter.current,.theme-section.current{border-bottom-color:#52accc}body.more-filters-opened .more-filters{color:#fff;background-color:#52accc}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#096484;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#096484;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #e8be74,0 0 2px 1px #e1a948}div#wp-responsive-toggle a:before{color:#e5f8ff}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#096484}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#4796b3}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#e5f8ff}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#096484}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-left-color:#e1a948}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#e1a948}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-left-color:#e1a948}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #e8be74,0 0 2px 1px #e1a948}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#e1a948;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#e1a948}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#e1a948;border-style:solid;box-shadow:0 0 0 1px #e1a948;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#e1a948}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#e1a948}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#e1a948}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #e8be74,0 0 2px 1px #e1a948}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#e1a948;color:#0073aa}.welcome-panel{background-color:#096484}[class*=welcome-panel-icon]{background-color:#52accc} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/blue/colors.scss b/tools/storybook/wordpress/css/colors/blue/colors.scss new file mode 100644 index 00000000000..f44e540adf1 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/blue/colors.scss @@ -0,0 +1,12 @@ +$scheme-name: "blue"; +$base-color: #52accc; +$icon-color: #e5f8ff; +$highlight-color: #096484; +$notification-color: #e1a948; +$button-color: #e1a948; + +$menu-submenu-text: #e2ecf1; +$menu-submenu-focus-text: #fff; +$menu-submenu-background: #4796b3; + +@import "../_admin.scss"; diff --git a/tools/storybook/wordpress/css/colors/coffee/colors-rtl.css b/tools/storybook/wordpress/css/colors/coffee/colors-rtl.css new file mode 100644 index 00000000000..7f9996da908 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/coffee/colors-rtl.css @@ -0,0 +1,681 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2359524c%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #59524c; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #c7a589; + box-shadow: 0 0 0 1px #c7a589; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #c7a589; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #c7a589; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button-primary { + background: #c7a589; + border-color: #c7a589; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #ccad93; + border-color: #c29d7f; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589; +} +.wp-core-ui .button-primary:active { + background: #bf9878; + border-color: #bf9878; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #c7a589; + color: #fff; + border-color: #ae7d55; + box-shadow: inset 0 2px 5px -3px #37271a; +} +.wp-core-ui .button-group > .button.active { + border-color: #c7a589; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #59524c; +} +.wp-core-ui .wp-ui-text-primary { + color: #59524c; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #c7a589; +} +.wp-core-ui .wp-ui-text-highlight { + color: #c7a589; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #9ea476; +} +.wp-core-ui .wp-ui-text-notification { + color: #9ea476; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(27.6923076923deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action:hover { + color: #fff; + background-color: #59524c; +} + +.view-switch a.current:before { + color: #59524c; +} + +.view-switch a:hover:before { + color: #9ea476; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #59524c; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #c7a589; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #46403c; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #46403c; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #cdcbc9; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #cdcbc9; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #c7a589; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #c7a589; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #c7a589; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #9ea476; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #46403c; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #c7a589; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #59524c; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #c7a589; + background: #46403c; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #c7a589; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #c7a589; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #46403c; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #656463; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #cdcbc9; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #c7a589; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #c7a589; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #6c645c; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #9ea476; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #8e946a; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #6c645c; + background-color: #6c645c; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #c7a589; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #cdcbc9; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #c7a589; + border-color: #bf9878; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #c7a589; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #c7a589; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #c7a589; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #c7a589; +} + +.attachment.details .check { + background-color: #c7a589; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #c7a589; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #c7a589; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #c7a589; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #59524c; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #59524c; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #c7a589; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #c7a589; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #c7a589; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #46403c; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #c7a589; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-right-color: #c7a589; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #c7a589; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-right-color: #c7a589; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #c7a589; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #c7a589; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #c7a589; + border-style: solid; + box-shadow: 0 0 0 1px #c7a589; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #c7a589; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #c7a589; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #c7a589; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #c7a589; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #c7a589; +} + +[class*=welcome-panel-icon] { + background-color: #59524c; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/coffee/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/coffee/colors-rtl.min.css new file mode 100644 index 00000000000..ead04fd6694 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/coffee/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2359524c%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#59524c}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#c7a589;box-shadow:0 0 0 1px #c7a589}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#c7a589;color:#262a2e;box-shadow:inset 0 2px 5px -3px #c7a589}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button-primary{background:#c7a589;border-color:#c7a589;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#ccad93;border-color:#c29d7f;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #c7a589}.wp-core-ui .button-primary:active{background:#bf9878;border-color:#bf9878;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#c7a589;color:#fff;border-color:#ae7d55;box-shadow:inset 0 2px 5px -3px #37271a}.wp-core-ui .button-group>.button.active{border-color:#c7a589}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#59524c}.wp-core-ui .wp-ui-text-primary{color:#59524c}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#c7a589}.wp-core-ui .wp-ui-text-highlight{color:#c7a589}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#9ea476}.wp-core-ui .wp-ui-text-notification{color:#9ea476}.wp-core-ui .wp-ui-text-icon{color:hsl(27.6923076923deg,7%,95%)}.wrap .page-title-action:hover{color:#fff;background-color:#59524c}.view-switch a.current:before{color:#59524c}.view-switch a:hover:before{color:#9ea476}#adminmenu,#adminmenuback,#adminmenuwrap{background:#59524c}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(27.6923076923deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#c7a589}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#46403c}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#46403c}#adminmenu .wp-submenu .wp-submenu-head{color:#cdcbc9}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#cdcbc9}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#c7a589}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#c7a589}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#c7a589}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#9ea476}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#46403c}#collapse-button{color:hsl(27.6923076923deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#c7a589}#wpadminbar{color:#fff;background:#59524c}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#c7a589;background:#46403c}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#c7a589}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#c7a589}#wpadminbar .menupop .ab-sub-wrapper{background:#46403c}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#656463}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#cdcbc9}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#c7a589}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#c7a589}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#6c645c}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#9ea476}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#8e946a}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#6c645c;background-color:#6c645c}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#c7a589}#wpadminbar #wp-admin-bar-user-info .username{color:#cdcbc9}.wp-pointer .wp-pointer-content h3{background-color:#c7a589;border-color:#bf9878}.wp-pointer .wp-pointer-content h3:before{color:#c7a589}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#c7a589}.media-item .bar,.media-progress-bar div{background-color:#c7a589}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #c7a589}.attachment.details .check{background-color:#c7a589;box-shadow:0 0 0 1px #fff,0 0 0 2px #c7a589}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #c7a589}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#c7a589}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#c7a589}.theme-filter.current,.theme-section.current{border-bottom-color:#59524c}body.more-filters-opened .more-filters{color:#fff;background-color:#59524c}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#c7a589;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#c7a589;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #d7bfac,0 0 2px 1px #c7a589}div#wp-responsive-toggle a:before{color:hsl(27.6923076923deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#c7a589}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#46403c}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(27.6923076923deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#c7a589}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-right-color:#c7a589}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#c7a589}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-right-color:#c7a589}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #d7bfac,0 0 2px 1px #c7a589}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#c7a589;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#c7a589}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#c7a589;border-style:solid;box-shadow:0 0 0 1px #c7a589;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#c7a589}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#c7a589}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#c7a589}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #d7bfac,0 0 2px 1px #c7a589}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#c7a589;color:#0073aa}.welcome-panel{background-color:#c7a589}[class*=welcome-panel-icon]{background-color:#59524c} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/coffee/colors.css b/tools/storybook/wordpress/css/colors/coffee/colors.css new file mode 100644 index 00000000000..4390f44dede --- /dev/null +++ b/tools/storybook/wordpress/css/colors/coffee/colors.css @@ -0,0 +1,681 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2359524c%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #59524c; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #c7a589; + box-shadow: 0 0 0 1px #c7a589; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #c7a589; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #c7a589; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button-primary { + background: #c7a589; + border-color: #c7a589; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #ccad93; + border-color: #c29d7f; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589; +} +.wp-core-ui .button-primary:active { + background: #bf9878; + border-color: #bf9878; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #c7a589; + color: #fff; + border-color: #ae7d55; + box-shadow: inset 0 2px 5px -3px #37271a; +} +.wp-core-ui .button-group > .button.active { + border-color: #c7a589; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #59524c; +} +.wp-core-ui .wp-ui-text-primary { + color: #59524c; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #c7a589; +} +.wp-core-ui .wp-ui-text-highlight { + color: #c7a589; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #9ea476; +} +.wp-core-ui .wp-ui-text-notification { + color: #9ea476; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(27.6923076923deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action:hover { + color: #fff; + background-color: #59524c; +} + +.view-switch a.current:before { + color: #59524c; +} + +.view-switch a:hover:before { + color: #9ea476; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #59524c; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #c7a589; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #46403c; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #46403c; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #cdcbc9; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #cdcbc9; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #c7a589; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #c7a589; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #c7a589; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #9ea476; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #46403c; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #c7a589; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #59524c; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #c7a589; + background: #46403c; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #c7a589; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #c7a589; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #46403c; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #656463; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #cdcbc9; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #c7a589; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #c7a589; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #6c645c; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #9ea476; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #8e946a; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #6c645c; + background-color: #6c645c; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #c7a589; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #cdcbc9; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #c7a589; + border-color: #bf9878; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #c7a589; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #c7a589; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #c7a589; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #c7a589; +} + +.attachment.details .check { + background-color: #c7a589; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #c7a589; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #c7a589; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #c7a589; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #59524c; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #59524c; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #c7a589; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #c7a589; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #c7a589; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #46403c; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(27.6923076923deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #c7a589; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-left-color: #c7a589; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #c7a589; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-left-color: #c7a589; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #c7a589; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #c7a589; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #c7a589; + border-style: solid; + box-shadow: 0 0 0 1px #c7a589; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #c7a589; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #c7a589; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #c7a589; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #c7a589; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #c7a589; +} + +[class*=welcome-panel-icon] { + background-color: #59524c; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/coffee/colors.min.css b/tools/storybook/wordpress/css/colors/coffee/colors.min.css new file mode 100644 index 00000000000..62dd6ac4868 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/coffee/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2359524c%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#59524c}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#c7a589;box-shadow:0 0 0 1px #c7a589}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#c7a589;color:#262a2e;box-shadow:inset 0 2px 5px -3px #c7a589}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button-primary{background:#c7a589;border-color:#c7a589;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#ccad93;border-color:#c29d7f;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #c7a589}.wp-core-ui .button-primary:active{background:#bf9878;border-color:#bf9878;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#c7a589;color:#fff;border-color:#ae7d55;box-shadow:inset 0 2px 5px -3px #37271a}.wp-core-ui .button-group>.button.active{border-color:#c7a589}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#59524c}.wp-core-ui .wp-ui-text-primary{color:#59524c}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#c7a589}.wp-core-ui .wp-ui-text-highlight{color:#c7a589}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#9ea476}.wp-core-ui .wp-ui-text-notification{color:#9ea476}.wp-core-ui .wp-ui-text-icon{color:hsl(27.6923076923deg,7%,95%)}.wrap .page-title-action:hover{color:#fff;background-color:#59524c}.view-switch a.current:before{color:#59524c}.view-switch a:hover:before{color:#9ea476}#adminmenu,#adminmenuback,#adminmenuwrap{background:#59524c}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(27.6923076923deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#c7a589}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#46403c}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#46403c}#adminmenu .wp-submenu .wp-submenu-head{color:#cdcbc9}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#cdcbc9}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#c7a589}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#c7a589}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#c7a589}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#9ea476}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#46403c}#collapse-button{color:hsl(27.6923076923deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#c7a589}#wpadminbar{color:#fff;background:#59524c}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#c7a589;background:#46403c}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#c7a589}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#c7a589}#wpadminbar .menupop .ab-sub-wrapper{background:#46403c}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#656463}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#cdcbc9}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#c7a589}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#c7a589}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(27.6923076923deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#6c645c}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#9ea476}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#8e946a}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#6c645c;background-color:#6c645c}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#c7a589}#wpadminbar #wp-admin-bar-user-info .username{color:#cdcbc9}.wp-pointer .wp-pointer-content h3{background-color:#c7a589;border-color:#bf9878}.wp-pointer .wp-pointer-content h3:before{color:#c7a589}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#c7a589}.media-item .bar,.media-progress-bar div{background-color:#c7a589}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #c7a589}.attachment.details .check{background-color:#c7a589;box-shadow:0 0 0 1px #fff,0 0 0 2px #c7a589}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #c7a589}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#c7a589}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#c7a589}.theme-filter.current,.theme-section.current{border-bottom-color:#59524c}body.more-filters-opened .more-filters{color:#fff;background-color:#59524c}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#c7a589;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#c7a589;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #d7bfac,0 0 2px 1px #c7a589}div#wp-responsive-toggle a:before{color:hsl(27.6923076923deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#c7a589}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#46403c}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(27.6923076923deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#c7a589}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-left-color:#c7a589}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#c7a589}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-left-color:#c7a589}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #d7bfac,0 0 2px 1px #c7a589}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#c7a589;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#c7a589}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#c7a589;border-style:solid;box-shadow:0 0 0 1px #c7a589;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#c7a589}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#c7a589}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#c7a589}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #d7bfac,0 0 2px 1px #c7a589}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#c7a589;color:#0073aa}.welcome-panel{background-color:#c7a589}[class*=welcome-panel-icon]{background-color:#59524c} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/coffee/colors.scss b/tools/storybook/wordpress/css/colors/coffee/colors.scss new file mode 100644 index 00000000000..a52491d57de --- /dev/null +++ b/tools/storybook/wordpress/css/colors/coffee/colors.scss @@ -0,0 +1,9 @@ +$scheme-name: "coffee"; +$base-color: #59524c; +$highlight-color: #c7a589; +$notification-color: #9ea476; +$low-contrast-theme: "true"; + +$form-checked: $base-color; + +@import "../_admin.scss"; diff --git a/tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.css b/tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.css new file mode 100644 index 00000000000..bf63bc4595d --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23523f6d%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #523f6d; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #a3b745; + box-shadow: 0 0 0 1px #a3b745; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #a3b745; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #a3b745; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #a3b745; + border-color: #a3b745; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #829237; + color: #829237; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #b6c669; + color: #616d29; + box-shadow: 0 0 0 1px #b6c669; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #a3b745; + border-color: #a3b745; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #a9bd4f; + border-color: #99ac41; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745; +} +.wp-core-ui .button-primary:active { + background: #93a43e; + border-color: #93a43e; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #a3b745; + color: #fff; + border-color: #727f30; + box-shadow: inset 0 2px 5px -3px black; +} +.wp-core-ui .button-group > .button.active { + border-color: #a3b745; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #523f6d; +} +.wp-core-ui .wp-ui-text-primary { + color: #523f6d; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #a3b745; +} +.wp-core-ui .wp-ui-text-highlight { + color: #a3b745; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #d46f15; +} +.wp-core-ui .wp-ui-text-notification { + color: #d46f15; +} +.wp-core-ui .wp-ui-text-icon { + color: #ece6f6; +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #a3b745; + color: #a3b745; +} + +.wrap .page-title-action:hover { + color: #829237; + border-color: #829237; +} + +.wrap .page-title-action:focus { + border-color: #b6c669; + color: #616d29; + box-shadow: 0 0 0 1px #b6c669; +} + +.view-switch a.current:before { + color: #523f6d; +} + +.view-switch a:hover:before { + color: #d46f15; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #523f6d; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: #ece6f6; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #a3b745; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #413256; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #413256; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #cbc5d3; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #cbc5d3; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #a3b745; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #a3b745; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #a3b745; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #d46f15; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #413256; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #ece6f6; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #a3b745; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #523f6d; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #ece6f6; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #a3b745; + background: #413256; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #a3b745; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #a3b745; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #413256; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #64537c; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #cbc5d3; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #ece6f6; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #a3b745; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #a3b745; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #ece6f6; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #ece6f6; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #634c84; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #d46f15; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #bf6413; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #634c84; + background-color: #634c84; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #a3b745; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #cbc5d3; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #a3b745; + border-color: #93a43e; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #a3b745; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #a3b745; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #a3b745; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #a3b745; +} + +.attachment.details .check { + background-color: #a3b745; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #a3b745; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #a3b745; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #a3b745; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #523f6d; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #523f6d; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #a3b745; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #a3b745; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #ece6f6; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #a3b745; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #413256; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #ece6f6; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #a3b745; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-right-color: #a3b745; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #a3b745; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-right-color: #a3b745; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #a3b745; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #a3b745; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #a3b745; + border-style: solid; + box-shadow: 0 0 0 1px #a3b745; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #a3b745; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #a3b745; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #a3b745; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #a3b745; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #a3b745; +} + +[class*=welcome-panel-icon] { + background-color: #523f6d; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.min.css new file mode 100644 index 00000000000..85903941917 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23523f6d%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#523f6d}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#a3b745;box-shadow:0 0 0 1px #a3b745}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#a3b745;color:#262a2e;box-shadow:inset 0 2px 5px -3px #a3b745}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#a3b745;border-color:#a3b745}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#829237;color:#829237}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#b6c669;color:#616d29;box-shadow:0 0 0 1px #b6c669}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#a3b745;border-color:#a3b745;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#a9bd4f;border-color:#99ac41;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #a3b745}.wp-core-ui .button-primary:active{background:#93a43e;border-color:#93a43e;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#a3b745;color:#fff;border-color:#727f30;box-shadow:inset 0 2px 5px -3px #000}.wp-core-ui .button-group>.button.active{border-color:#a3b745}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#523f6d}.wp-core-ui .wp-ui-text-primary{color:#523f6d}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#a3b745}.wp-core-ui .wp-ui-text-highlight{color:#a3b745}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#d46f15}.wp-core-ui .wp-ui-text-notification{color:#d46f15}.wp-core-ui .wp-ui-text-icon{color:#ece6f6}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #a3b745;color:#a3b745}.wrap .page-title-action:hover{color:#829237;border-color:#829237}.wrap .page-title-action:focus{border-color:#b6c669;color:#616d29;box-shadow:0 0 0 1px #b6c669}.view-switch a.current:before{color:#523f6d}.view-switch a:hover:before{color:#d46f15}#adminmenu,#adminmenuback,#adminmenuwrap{background:#523f6d}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:#ece6f6}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#a3b745}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#413256}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#413256}#adminmenu .wp-submenu .wp-submenu-head{color:#cbc5d3}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#cbc5d3}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#a3b745}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#a3b745}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#a3b745}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#d46f15}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#413256}#collapse-button{color:#ece6f6}#collapse-button:focus,#collapse-button:hover{color:#a3b745}#wpadminbar{color:#fff;background:#523f6d}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#ece6f6}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#a3b745;background:#413256}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#a3b745}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#a3b745}#wpadminbar .menupop .ab-sub-wrapper{background:#413256}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#64537c}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#cbc5d3}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#ece6f6}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#a3b745}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#a3b745}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#ece6f6}#wpadminbar #adminbarsearch:before{color:#ece6f6}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#634c84}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#d46f15}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#bf6413}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#634c84;background-color:#634c84}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#a3b745}#wpadminbar #wp-admin-bar-user-info .username{color:#cbc5d3}.wp-pointer .wp-pointer-content h3{background-color:#a3b745;border-color:#93a43e}.wp-pointer .wp-pointer-content h3:before{color:#a3b745}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#a3b745}.media-item .bar,.media-progress-bar div{background-color:#a3b745}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #a3b745}.attachment.details .check{background-color:#a3b745;box-shadow:0 0 0 1px #fff,0 0 0 2px #a3b745}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #a3b745}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#a3b745}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#a3b745}.theme-filter.current,.theme-section.current{border-bottom-color:#523f6d}body.more-filters-opened .more-filters{color:#fff;background-color:#523f6d}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#a3b745;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#a3b745;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #b6c669,0 0 2px 1px #a3b745}div#wp-responsive-toggle a:before{color:#ece6f6}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#a3b745}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#413256}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#ece6f6}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#a3b745}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-right-color:#a3b745}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#a3b745}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-right-color:#a3b745}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #b6c669,0 0 2px 1px #a3b745}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#a3b745;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#a3b745}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#a3b745;border-style:solid;box-shadow:0 0 0 1px #a3b745;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#a3b745}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#a3b745}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#a3b745}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #b6c669,0 0 2px 1px #a3b745}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#a3b745;color:#0073aa}.welcome-panel{background-color:#a3b745}[class*=welcome-panel-icon]{background-color:#523f6d} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ectoplasm/colors.css b/tools/storybook/wordpress/css/colors/ectoplasm/colors.css new file mode 100644 index 00000000000..322980a9545 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ectoplasm/colors.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23523f6d%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #523f6d; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #a3b745; + box-shadow: 0 0 0 1px #a3b745; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #a3b745; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #a3b745; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #a3b745; + border-color: #a3b745; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #829237; + color: #829237; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #b6c669; + color: #616d29; + box-shadow: 0 0 0 1px #b6c669; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #a3b745; + border-color: #a3b745; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #a9bd4f; + border-color: #99ac41; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745; +} +.wp-core-ui .button-primary:active { + background: #93a43e; + border-color: #93a43e; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #a3b745; + color: #fff; + border-color: #727f30; + box-shadow: inset 0 2px 5px -3px black; +} +.wp-core-ui .button-group > .button.active { + border-color: #a3b745; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #523f6d; +} +.wp-core-ui .wp-ui-text-primary { + color: #523f6d; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #a3b745; +} +.wp-core-ui .wp-ui-text-highlight { + color: #a3b745; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #d46f15; +} +.wp-core-ui .wp-ui-text-notification { + color: #d46f15; +} +.wp-core-ui .wp-ui-text-icon { + color: #ece6f6; +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #a3b745; + color: #a3b745; +} + +.wrap .page-title-action:hover { + color: #829237; + border-color: #829237; +} + +.wrap .page-title-action:focus { + border-color: #b6c669; + color: #616d29; + box-shadow: 0 0 0 1px #b6c669; +} + +.view-switch a.current:before { + color: #523f6d; +} + +.view-switch a:hover:before { + color: #d46f15; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #523f6d; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: #ece6f6; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #a3b745; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #413256; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #413256; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #cbc5d3; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #cbc5d3; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #a3b745; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #a3b745; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #a3b745; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #d46f15; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #413256; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #ece6f6; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #a3b745; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #523f6d; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #ece6f6; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #a3b745; + background: #413256; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #a3b745; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #a3b745; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #413256; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #64537c; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #cbc5d3; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #ece6f6; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #a3b745; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #a3b745; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #ece6f6; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #ece6f6; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #634c84; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #d46f15; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #bf6413; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #634c84; + background-color: #634c84; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #a3b745; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #cbc5d3; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #a3b745; + border-color: #93a43e; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #a3b745; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #a3b745; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #a3b745; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #a3b745; +} + +.attachment.details .check { + background-color: #a3b745; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #a3b745; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #a3b745; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #a3b745; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #523f6d; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #523f6d; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #a3b745; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #a3b745; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #ece6f6; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #a3b745; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #413256; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #ece6f6; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #a3b745; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-left-color: #a3b745; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #a3b745; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-left-color: #a3b745; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #a3b745; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #a3b745; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #a3b745; + border-style: solid; + box-shadow: 0 0 0 1px #a3b745; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #a3b745; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #a3b745; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #a3b745; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #a3b745; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #a3b745; +} + +[class*=welcome-panel-icon] { + background-color: #523f6d; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ectoplasm/colors.min.css b/tools/storybook/wordpress/css/colors/ectoplasm/colors.min.css new file mode 100644 index 00000000000..e460f58853f --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ectoplasm/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23523f6d%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#523f6d}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#a3b745;box-shadow:0 0 0 1px #a3b745}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#a3b745;color:#262a2e;box-shadow:inset 0 2px 5px -3px #a3b745}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#a3b745;border-color:#a3b745}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#829237;color:#829237}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#b6c669;color:#616d29;box-shadow:0 0 0 1px #b6c669}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#a3b745;border-color:#a3b745;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#a9bd4f;border-color:#99ac41;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #a3b745}.wp-core-ui .button-primary:active{background:#93a43e;border-color:#93a43e;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#a3b745;color:#fff;border-color:#727f30;box-shadow:inset 0 2px 5px -3px #000}.wp-core-ui .button-group>.button.active{border-color:#a3b745}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#523f6d}.wp-core-ui .wp-ui-text-primary{color:#523f6d}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#a3b745}.wp-core-ui .wp-ui-text-highlight{color:#a3b745}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#d46f15}.wp-core-ui .wp-ui-text-notification{color:#d46f15}.wp-core-ui .wp-ui-text-icon{color:#ece6f6}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #a3b745;color:#a3b745}.wrap .page-title-action:hover{color:#829237;border-color:#829237}.wrap .page-title-action:focus{border-color:#b6c669;color:#616d29;box-shadow:0 0 0 1px #b6c669}.view-switch a.current:before{color:#523f6d}.view-switch a:hover:before{color:#d46f15}#adminmenu,#adminmenuback,#adminmenuwrap{background:#523f6d}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:#ece6f6}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#a3b745}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#413256}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#413256}#adminmenu .wp-submenu .wp-submenu-head{color:#cbc5d3}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#cbc5d3}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#a3b745}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#a3b745}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#a3b745}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#d46f15}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#413256}#collapse-button{color:#ece6f6}#collapse-button:focus,#collapse-button:hover{color:#a3b745}#wpadminbar{color:#fff;background:#523f6d}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#ece6f6}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#a3b745;background:#413256}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#a3b745}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#a3b745}#wpadminbar .menupop .ab-sub-wrapper{background:#413256}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#64537c}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#cbc5d3}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#ece6f6}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#a3b745}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#a3b745}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#ece6f6}#wpadminbar #adminbarsearch:before{color:#ece6f6}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#634c84}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#d46f15}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#bf6413}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#634c84;background-color:#634c84}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#a3b745}#wpadminbar #wp-admin-bar-user-info .username{color:#cbc5d3}.wp-pointer .wp-pointer-content h3{background-color:#a3b745;border-color:#93a43e}.wp-pointer .wp-pointer-content h3:before{color:#a3b745}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#a3b745}.media-item .bar,.media-progress-bar div{background-color:#a3b745}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #a3b745}.attachment.details .check{background-color:#a3b745;box-shadow:0 0 0 1px #fff,0 0 0 2px #a3b745}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #a3b745}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#a3b745}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#a3b745}.theme-filter.current,.theme-section.current{border-bottom-color:#523f6d}body.more-filters-opened .more-filters{color:#fff;background-color:#523f6d}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#a3b745;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#a3b745;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #b6c669,0 0 2px 1px #a3b745}div#wp-responsive-toggle a:before{color:#ece6f6}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#a3b745}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#413256}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#ece6f6}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#a3b745}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-left-color:#a3b745}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#a3b745}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-left-color:#a3b745}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #b6c669,0 0 2px 1px #a3b745}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#a3b745;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#a3b745}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#a3b745;border-style:solid;box-shadow:0 0 0 1px #a3b745;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#a3b745}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#a3b745}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#a3b745}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #b6c669,0 0 2px 1px #a3b745}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#a3b745;color:#0073aa}.welcome-panel{background-color:#a3b745}[class*=welcome-panel-icon]{background-color:#523f6d} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ectoplasm/colors.scss b/tools/storybook/wordpress/css/colors/ectoplasm/colors.scss new file mode 100644 index 00000000000..230ff9efb49 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ectoplasm/colors.scss @@ -0,0 +1,9 @@ +$scheme-name: "ectoplasm"; +$base-color: #523f6d; +$icon-color: #ece6f6; +$highlight-color: #a3b745; +$notification-color: #d46f15; + +$form-checked: $base-color; + +@import "../_admin.scss"; diff --git a/tools/storybook/wordpress/css/colors/light/colors-rtl.css b/tools/storybook/wordpress/css/colors/light/colors-rtl.css new file mode 100644 index 00000000000..019547a169a --- /dev/null +++ b/tools/storybook/wordpress/css/colors/light/colors-rtl.css @@ -0,0 +1,720 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f5f5f5; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #04a4cc; + box-shadow: 0 0 0 1px #04a4cc; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #04a4cc; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #04a4cc; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #04a4cc; + border-color: #04a4cc; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #037c9a; + color: #037c9a; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #09cafa; + color: #025468; + box-shadow: 0 0 0 1px #09cafa; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #04a4cc; + border-color: #04a4cc; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #04b0db; + border-color: #0498bd; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc; +} +.wp-core-ui .button-primary:active { + background: #0490b3; + border-color: #0490b3; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #04a4cc; + color: #fff; + border-color: #036881; + box-shadow: inset 0 2px 5px -3px black; +} +.wp-core-ui .button-group > .button.active { + border-color: #04a4cc; +} +.wp-core-ui .wp-ui-primary { + color: #333; + background-color: #e5e5e5; +} +.wp-core-ui .wp-ui-text-primary { + color: #e5e5e5; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #888; +} +.wp-core-ui .wp-ui-text-highlight { + color: #888; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #d64e07; +} +.wp-core-ui .wp-ui-text-notification { + color: #d64e07; +} +.wp-core-ui .wp-ui-text-icon { + color: #999; +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #04a4cc; + color: #04a4cc; +} + +.wrap .page-title-action:hover { + color: #037c9a; + border-color: #037c9a; +} + +.wrap .page-title-action:focus { + border-color: #09cafa; + color: #025468; + box-shadow: 0 0 0 1px #09cafa; +} + +.view-switch a.current:before { + color: #e5e5e5; +} + +.view-switch a:hover:before { + color: #d64e07; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #e5e5e5; +} + +#adminmenu a { + color: #333; +} + +#adminmenu div.wp-menu-image:before { + color: #999; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #888; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #ccc; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f5f5f5; + border-bottom-color: #f5f5f5; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #fff; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #fff; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #686868; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #686868; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #04a4cc; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #333; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #04a4cc; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f5f5f5; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #888; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #ccc; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #d64e07; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #333; + background: #fff; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #777; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #04a4cc; +} + +/* Admin Bar */ +#wpadminbar { + color: #333; + background: #e5e5e5; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #333; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #999; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #04a4cc; + background: #fff; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #04a4cc; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #04a4cc; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #fff; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #f7f7f7; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #686868; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #999; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #04a4cc; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #04a4cc; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #999; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #999; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #333; + background: #f7f7f7; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #d64e07; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #c14606; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #f7f7f7; + background-color: #f7f7f7; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #333; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #04a4cc; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #686868; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #04a4cc; + border-color: #0490b3; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #04a4cc; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #04a4cc; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #04a4cc; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #04a4cc; +} + +.attachment.details .check { + background-color: #04a4cc; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #04a4cc; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #04a4cc; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #04a4cc; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #e5e5e5; +} + +body.more-filters-opened .more-filters { + color: #333; + background-color: #e5e5e5; +} + +body.more-filters-opened .more-filters:before { + color: #333; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #888; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #888; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #999; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #888; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #fff; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #999; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #04a4cc; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-right-color: #04a4cc; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #04a4cc; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-right-color: #04a4cc; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #04a4cc; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #04a4cc; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #04a4cc; + border-style: solid; + box-shadow: 0 0 0 1px #04a4cc; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #04a4cc; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #04a4cc; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #04a4cc; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #04a4cc; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #04a4cc; +} + +[class*=welcome-panel-icon] { + background-color: #999; +} + +/* Override the theme filter highlight color for this scheme */ +.theme-section.current, +.theme-filter.current { + border-bottom-color: #04a4cc; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/light/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/light/colors-rtl.min.css new file mode 100644 index 00000000000..6811263bea9 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/light/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f5f5f5}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#04a4cc;box-shadow:0 0 0 1px #04a4cc}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#04a4cc;color:#262a2e;box-shadow:inset 0 2px 5px -3px #04a4cc}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#04a4cc;border-color:#04a4cc}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#037c9a;color:#037c9a}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#09cafa;color:#025468;box-shadow:0 0 0 1px #09cafa}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#04a4cc;border-color:#04a4cc;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#04b0db;border-color:#0498bd;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #04a4cc}.wp-core-ui .button-primary:active{background:#0490b3;border-color:#0490b3;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#04a4cc;color:#fff;border-color:#036881;box-shadow:inset 0 2px 5px -3px #000}.wp-core-ui .button-group>.button.active{border-color:#04a4cc}.wp-core-ui .wp-ui-primary{color:#333;background-color:#e5e5e5}.wp-core-ui .wp-ui-text-primary{color:#e5e5e5}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#888}.wp-core-ui .wp-ui-text-highlight{color:#888}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#d64e07}.wp-core-ui .wp-ui-text-notification{color:#d64e07}.wp-core-ui .wp-ui-text-icon{color:#999}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #04a4cc;color:#04a4cc}.wrap .page-title-action:hover{color:#037c9a;border-color:#037c9a}.wrap .page-title-action:focus{border-color:#09cafa;color:#025468;box-shadow:0 0 0 1px #09cafa}.view-switch a.current:before{color:#e5e5e5}.view-switch a:hover:before{color:#d64e07}#adminmenu,#adminmenuback,#adminmenuwrap{background:#e5e5e5}#adminmenu a{color:#333}#adminmenu div.wp-menu-image:before{color:#999}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#888}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#ccc}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f5f5f5;border-bottom-color:#f5f5f5}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#fff}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#fff}#adminmenu .wp-submenu .wp-submenu-head{color:#686868}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#686868}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#04a4cc}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#333}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#04a4cc}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f5f5f5}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#888}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#ccc}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#d64e07}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#333;background:#fff}#collapse-button{color:#777}#collapse-button:focus,#collapse-button:hover{color:#04a4cc}#wpadminbar{color:#333;background:#e5e5e5}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#333}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#999}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#04a4cc;background:#fff}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#04a4cc}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#04a4cc}#wpadminbar .menupop .ab-sub-wrapper{background:#fff}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#f7f7f7}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#686868}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#999}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#04a4cc}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#04a4cc}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#999}#wpadminbar #adminbarsearch:before{color:#999}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#333;background:#f7f7f7}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#d64e07}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#c14606}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#f7f7f7;background-color:#f7f7f7}#wpadminbar #wp-admin-bar-user-info .display-name{color:#333}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#04a4cc}#wpadminbar #wp-admin-bar-user-info .username{color:#686868}.wp-pointer .wp-pointer-content h3{background-color:#04a4cc;border-color:#0490b3}.wp-pointer .wp-pointer-content h3:before{color:#04a4cc}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#04a4cc}.media-item .bar,.media-progress-bar div{background-color:#04a4cc}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #04a4cc}.attachment.details .check{background-color:#04a4cc;box-shadow:0 0 0 1px #fff,0 0 0 2px #04a4cc}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #04a4cc}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#04a4cc}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#04a4cc}.theme-filter.current,.theme-section.current{border-bottom-color:#e5e5e5}body.more-filters-opened .more-filters{color:#333;background-color:#e5e5e5}body.more-filters-opened .more-filters:before{color:#333}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#888;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#888;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #09cafa,0 0 2px 1px #04a4cc}div#wp-responsive-toggle a:before{color:#999}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#888}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#fff}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#999}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#04a4cc}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-right-color:#04a4cc}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#04a4cc}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-right-color:#04a4cc}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #09cafa,0 0 2px 1px #04a4cc}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#04a4cc;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#04a4cc}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#04a4cc;border-style:solid;box-shadow:0 0 0 1px #04a4cc;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#04a4cc}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#04a4cc}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#04a4cc}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #09cafa,0 0 2px 1px #04a4cc}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#04a4cc;color:#0073aa}.welcome-panel{background-color:#04a4cc}[class*=welcome-panel-icon]{background-color:#999}.theme-filter.current,.theme-section.current{border-bottom-color:#04a4cc} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/light/colors.css b/tools/storybook/wordpress/css/colors/light/colors.css new file mode 100644 index 00000000000..9293f6b85a9 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/light/colors.css @@ -0,0 +1,720 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f5f5f5; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #04a4cc; + box-shadow: 0 0 0 1px #04a4cc; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #04a4cc; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #04a4cc; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #04a4cc; + border-color: #04a4cc; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #037c9a; + color: #037c9a; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #09cafa; + color: #025468; + box-shadow: 0 0 0 1px #09cafa; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #04a4cc; + border-color: #04a4cc; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #04b0db; + border-color: #0498bd; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc; +} +.wp-core-ui .button-primary:active { + background: #0490b3; + border-color: #0490b3; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #04a4cc; + color: #fff; + border-color: #036881; + box-shadow: inset 0 2px 5px -3px black; +} +.wp-core-ui .button-group > .button.active { + border-color: #04a4cc; +} +.wp-core-ui .wp-ui-primary { + color: #333; + background-color: #e5e5e5; +} +.wp-core-ui .wp-ui-text-primary { + color: #e5e5e5; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #888; +} +.wp-core-ui .wp-ui-text-highlight { + color: #888; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #d64e07; +} +.wp-core-ui .wp-ui-text-notification { + color: #d64e07; +} +.wp-core-ui .wp-ui-text-icon { + color: #999; +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #04a4cc; + color: #04a4cc; +} + +.wrap .page-title-action:hover { + color: #037c9a; + border-color: #037c9a; +} + +.wrap .page-title-action:focus { + border-color: #09cafa; + color: #025468; + box-shadow: 0 0 0 1px #09cafa; +} + +.view-switch a.current:before { + color: #e5e5e5; +} + +.view-switch a:hover:before { + color: #d64e07; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #e5e5e5; +} + +#adminmenu a { + color: #333; +} + +#adminmenu div.wp-menu-image:before { + color: #999; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #888; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #ccc; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f5f5f5; + border-bottom-color: #f5f5f5; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #fff; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #fff; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #686868; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #686868; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #04a4cc; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #333; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #04a4cc; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f5f5f5; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #888; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #ccc; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #d64e07; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #333; + background: #fff; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #777; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #04a4cc; +} + +/* Admin Bar */ +#wpadminbar { + color: #333; + background: #e5e5e5; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #333; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #999; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #04a4cc; + background: #fff; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #04a4cc; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #04a4cc; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #fff; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #f7f7f7; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #686868; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #999; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #04a4cc; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #04a4cc; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #999; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #999; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #333; + background: #f7f7f7; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #d64e07; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #c14606; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #f7f7f7; + background-color: #f7f7f7; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #333; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #04a4cc; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #686868; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #04a4cc; + border-color: #0490b3; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #04a4cc; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #04a4cc; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #04a4cc; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #04a4cc; +} + +.attachment.details .check { + background-color: #04a4cc; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #04a4cc; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #04a4cc; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #04a4cc; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #e5e5e5; +} + +body.more-filters-opened .more-filters { + color: #333; + background-color: #e5e5e5; +} + +body.more-filters-opened .more-filters:before { + color: #333; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #888; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #888; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #999; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #888; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #fff; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #999; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #04a4cc; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-left-color: #04a4cc; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #04a4cc; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-left-color: #04a4cc; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #04a4cc; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #04a4cc; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #04a4cc; + border-style: solid; + box-shadow: 0 0 0 1px #04a4cc; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #04a4cc; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #04a4cc; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #04a4cc; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #04a4cc; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #04a4cc; +} + +[class*=welcome-panel-icon] { + background-color: #999; +} + +/* Override the theme filter highlight color for this scheme */ +.theme-section.current, +.theme-filter.current { + border-bottom-color: #04a4cc; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/light/colors.min.css b/tools/storybook/wordpress/css/colors/light/colors.min.css new file mode 100644 index 00000000000..bc2ad8144fe --- /dev/null +++ b/tools/storybook/wordpress/css/colors/light/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f5f5f5}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#04a4cc;box-shadow:0 0 0 1px #04a4cc}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#04a4cc;color:#262a2e;box-shadow:inset 0 2px 5px -3px #04a4cc}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#04a4cc;border-color:#04a4cc}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#037c9a;color:#037c9a}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#09cafa;color:#025468;box-shadow:0 0 0 1px #09cafa}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#04a4cc;border-color:#04a4cc;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#04b0db;border-color:#0498bd;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #04a4cc}.wp-core-ui .button-primary:active{background:#0490b3;border-color:#0490b3;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#04a4cc;color:#fff;border-color:#036881;box-shadow:inset 0 2px 5px -3px #000}.wp-core-ui .button-group>.button.active{border-color:#04a4cc}.wp-core-ui .wp-ui-primary{color:#333;background-color:#e5e5e5}.wp-core-ui .wp-ui-text-primary{color:#e5e5e5}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#888}.wp-core-ui .wp-ui-text-highlight{color:#888}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#d64e07}.wp-core-ui .wp-ui-text-notification{color:#d64e07}.wp-core-ui .wp-ui-text-icon{color:#999}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #04a4cc;color:#04a4cc}.wrap .page-title-action:hover{color:#037c9a;border-color:#037c9a}.wrap .page-title-action:focus{border-color:#09cafa;color:#025468;box-shadow:0 0 0 1px #09cafa}.view-switch a.current:before{color:#e5e5e5}.view-switch a:hover:before{color:#d64e07}#adminmenu,#adminmenuback,#adminmenuwrap{background:#e5e5e5}#adminmenu a{color:#333}#adminmenu div.wp-menu-image:before{color:#999}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#888}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#ccc}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f5f5f5;border-bottom-color:#f5f5f5}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#fff}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#fff}#adminmenu .wp-submenu .wp-submenu-head{color:#686868}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#686868}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#04a4cc}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#333}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#04a4cc}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f5f5f5}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#888}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#ccc}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#d64e07}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#333;background:#fff}#collapse-button{color:#777}#collapse-button:focus,#collapse-button:hover{color:#04a4cc}#wpadminbar{color:#333;background:#e5e5e5}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#333}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#999}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#04a4cc;background:#fff}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#04a4cc}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#04a4cc}#wpadminbar .menupop .ab-sub-wrapper{background:#fff}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#f7f7f7}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#686868}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#999}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#04a4cc}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#04a4cc}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#999}#wpadminbar #adminbarsearch:before{color:#999}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#333;background:#f7f7f7}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#d64e07}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#c14606}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#f7f7f7;background-color:#f7f7f7}#wpadminbar #wp-admin-bar-user-info .display-name{color:#333}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#04a4cc}#wpadminbar #wp-admin-bar-user-info .username{color:#686868}.wp-pointer .wp-pointer-content h3{background-color:#04a4cc;border-color:#0490b3}.wp-pointer .wp-pointer-content h3:before{color:#04a4cc}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#04a4cc}.media-item .bar,.media-progress-bar div{background-color:#04a4cc}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #04a4cc}.attachment.details .check{background-color:#04a4cc;box-shadow:0 0 0 1px #fff,0 0 0 2px #04a4cc}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #04a4cc}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#04a4cc}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#04a4cc}.theme-filter.current,.theme-section.current{border-bottom-color:#e5e5e5}body.more-filters-opened .more-filters{color:#333;background-color:#e5e5e5}body.more-filters-opened .more-filters:before{color:#333}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#888;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#888;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #09cafa,0 0 2px 1px #04a4cc}div#wp-responsive-toggle a:before{color:#999}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#888}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#fff}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#999}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#04a4cc}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-left-color:#04a4cc}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#04a4cc}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-left-color:#04a4cc}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #09cafa,0 0 2px 1px #04a4cc}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#04a4cc;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#04a4cc}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#04a4cc;border-style:solid;box-shadow:0 0 0 1px #04a4cc;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#04a4cc}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#04a4cc}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#04a4cc}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #09cafa,0 0 2px 1px #04a4cc}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#04a4cc;color:#0073aa}.welcome-panel{background-color:#04a4cc}[class*=welcome-panel-icon]{background-color:#999}.theme-filter.current,.theme-section.current{border-bottom-color:#04a4cc} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/light/colors.scss b/tools/storybook/wordpress/css/colors/light/colors.scss new file mode 100644 index 00000000000..817bd345499 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/light/colors.scss @@ -0,0 +1,27 @@ +$scheme-name: "light"; +$base-color: #e5e5e5; +$icon-color: #999; +$text-color: #333; +$highlight-color: #04a4cc; +$notification-color: #d64e07; + +$body-background: #f5f5f5; + +$menu-highlight-text: #fff; +$menu-highlight-icon: #ccc; +$menu-highlight-background: #888; + +$menu-bubble-text: #fff; +$menu-avatar-frame: #aaa; +$menu-submenu-background: #fff; + +$menu-collapse-text: #777; +$menu-collapse-focus-icon: #555; + +@import "../_admin.scss"; + +/* Override the theme filter highlight color for this scheme */ +.theme-section.current, +.theme-filter.current { + border-bottom-color: $highlight-color; +} diff --git a/tools/storybook/wordpress/css/colors/midnight/colors-rtl.css b/tools/storybook/wordpress/css/colors/midnight/colors-rtl.css new file mode 100644 index 00000000000..057798b26b8 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/midnight/colors-rtl.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #e14d43; + box-shadow: 0 0 0 1px #e14d43; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #e14d43; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #e14d43; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #e14d43; + border-color: #e14d43; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #d02c21; + color: #d02c21; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #e8776f; + color: #a4231a; + box-shadow: 0 0 0 1px #e8776f; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #e14d43; + border-color: #e14d43; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #e35950; + border-color: #df4136; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e14d43; +} +.wp-core-ui .button-primary:active { + background: #dd382d; + border-color: #dd382d; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #e14d43; + color: #fff; + border-color: #ba281e; + box-shadow: inset 0 2px 5px -3px #200705; +} +.wp-core-ui .button-group > .button.active { + border-color: #e14d43; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #363b3f; +} +.wp-core-ui .wp-ui-text-primary { + color: #363b3f; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #e14d43; +} +.wp-core-ui .wp-ui-text-highlight { + color: #e14d43; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #69a8bb; +} +.wp-core-ui .wp-ui-text-notification { + color: #69a8bb; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(206.6666666667deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #e14d43; + color: #e14d43; +} + +.wrap .page-title-action:hover { + color: #d02c21; + border-color: #d02c21; +} + +.wrap .page-title-action:focus { + border-color: #e8776f; + color: #a4231a; + box-shadow: 0 0 0 1px #e8776f; +} + +.view-switch a.current:before { + color: #363b3f; +} + +.view-switch a:hover:before { + color: #69a8bb; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #363b3f; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #e14d43; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #26292c; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #26292c; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #c3c4c5; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #c3c4c5; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #e14d43; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #e14d43; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #e14d43; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #69a8bb; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #26292c; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #e14d43; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #363b3f; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #e14d43; + background: #26292c; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #e14d43; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #e14d43; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #26292c; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #4c4c4d; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #c3c4c5; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #e14d43; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #e14d43; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #464d52; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #69a8bb; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #5f97a8; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #464d52; + background-color: #464d52; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #e14d43; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #c3c4c5; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #e14d43; + border-color: #dd382d; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #e14d43; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #e14d43; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #e14d43; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #e14d43; +} + +.attachment.details .check { + background-color: #e14d43; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #e14d43; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e14d43; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #e14d43; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #e14d43; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #363b3f; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #363b3f; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #e14d43; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #e14d43; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #e8776f, 0 0 2px 1px #e14d43; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #e14d43; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #26292c; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #e14d43; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-right-color: #e14d43; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #e14d43; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-right-color: #e14d43; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #e8776f, 0 0 2px 1px #e14d43; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #e14d43; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #e14d43; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #e14d43; + border-style: solid; + box-shadow: 0 0 0 1px #e14d43; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #e14d43; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #e14d43; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #e14d43; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #e8776f, 0 0 2px 1px #e14d43; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #e14d43; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #e14d43; +} + +[class*=welcome-panel-icon] { + background-color: #363b3f; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/midnight/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/midnight/colors-rtl.min.css new file mode 100644 index 00000000000..260a2db8164 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/midnight/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#e14d43;box-shadow:0 0 0 1px #e14d43}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#e14d43;color:#262a2e;box-shadow:inset 0 2px 5px -3px #e14d43}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#e14d43;border-color:#e14d43}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#d02c21;color:#d02c21}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#e8776f;color:#a4231a;box-shadow:0 0 0 1px #e8776f}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#e14d43;border-color:#e14d43;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#e35950;border-color:#df4136;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #e14d43}.wp-core-ui .button-primary:active{background:#dd382d;border-color:#dd382d;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#e14d43;color:#fff;border-color:#ba281e;box-shadow:inset 0 2px 5px -3px #200705}.wp-core-ui .button-group>.button.active{border-color:#e14d43}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#363b3f}.wp-core-ui .wp-ui-text-primary{color:#363b3f}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#e14d43}.wp-core-ui .wp-ui-text-highlight{color:#e14d43}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#69a8bb}.wp-core-ui .wp-ui-text-notification{color:#69a8bb}.wp-core-ui .wp-ui-text-icon{color:hsl(206.6666666667deg,7%,95%)}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #e14d43;color:#e14d43}.wrap .page-title-action:hover{color:#d02c21;border-color:#d02c21}.wrap .page-title-action:focus{border-color:#e8776f;color:#a4231a;box-shadow:0 0 0 1px #e8776f}.view-switch a.current:before{color:#363b3f}.view-switch a:hover:before{color:#69a8bb}#adminmenu,#adminmenuback,#adminmenuwrap{background:#363b3f}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(206.6666666667deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#e14d43}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#26292c}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#26292c}#adminmenu .wp-submenu .wp-submenu-head{color:#c3c4c5}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#c3c4c5}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#e14d43}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#e14d43}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#e14d43}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#69a8bb}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#26292c}#collapse-button{color:hsl(206.6666666667deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#e14d43}#wpadminbar{color:#fff;background:#363b3f}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#e14d43;background:#26292c}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#e14d43}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#e14d43}#wpadminbar .menupop .ab-sub-wrapper{background:#26292c}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#4c4c4d}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#c3c4c5}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#e14d43}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#e14d43}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#464d52}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#69a8bb}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#5f97a8}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#464d52;background-color:#464d52}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#e14d43}#wpadminbar #wp-admin-bar-user-info .username{color:#c3c4c5}.wp-pointer .wp-pointer-content h3{background-color:#e14d43;border-color:#dd382d}.wp-pointer .wp-pointer-content h3:before{color:#e14d43}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#e14d43}.media-item .bar,.media-progress-bar div{background-color:#e14d43}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #e14d43}.attachment.details .check{background-color:#e14d43;box-shadow:0 0 0 1px #fff,0 0 0 2px #e14d43}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #e14d43}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#e14d43}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#e14d43}.theme-filter.current,.theme-section.current{border-bottom-color:#363b3f}body.more-filters-opened .more-filters{color:#fff;background-color:#363b3f}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#e14d43;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#e14d43;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #e8776f,0 0 2px 1px #e14d43}div#wp-responsive-toggle a:before{color:hsl(206.6666666667deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#e14d43}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#26292c}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(206.6666666667deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#e14d43}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-right-color:#e14d43}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#e14d43}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-right-color:#e14d43}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #e8776f,0 0 2px 1px #e14d43}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#e14d43;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#e14d43}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#e14d43;border-style:solid;box-shadow:0 0 0 1px #e14d43;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#e14d43}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#e14d43}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#e14d43}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #e8776f,0 0 2px 1px #e14d43}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#e14d43;color:#0073aa}.welcome-panel{background-color:#e14d43}[class*=welcome-panel-icon]{background-color:#363b3f} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/midnight/colors.css b/tools/storybook/wordpress/css/colors/midnight/colors.css new file mode 100644 index 00000000000..1ef551d5f06 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/midnight/colors.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #e14d43; + box-shadow: 0 0 0 1px #e14d43; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #e14d43; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #e14d43; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #e14d43; + border-color: #e14d43; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #d02c21; + color: #d02c21; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #e8776f; + color: #a4231a; + box-shadow: 0 0 0 1px #e8776f; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #e14d43; + border-color: #e14d43; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #e35950; + border-color: #df4136; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e14d43; +} +.wp-core-ui .button-primary:active { + background: #dd382d; + border-color: #dd382d; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #e14d43; + color: #fff; + border-color: #ba281e; + box-shadow: inset 0 2px 5px -3px #200705; +} +.wp-core-ui .button-group > .button.active { + border-color: #e14d43; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #363b3f; +} +.wp-core-ui .wp-ui-text-primary { + color: #363b3f; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #e14d43; +} +.wp-core-ui .wp-ui-text-highlight { + color: #e14d43; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #69a8bb; +} +.wp-core-ui .wp-ui-text-notification { + color: #69a8bb; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(206.6666666667deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #e14d43; + color: #e14d43; +} + +.wrap .page-title-action:hover { + color: #d02c21; + border-color: #d02c21; +} + +.wrap .page-title-action:focus { + border-color: #e8776f; + color: #a4231a; + box-shadow: 0 0 0 1px #e8776f; +} + +.view-switch a.current:before { + color: #363b3f; +} + +.view-switch a:hover:before { + color: #69a8bb; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #363b3f; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #e14d43; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #26292c; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #26292c; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #c3c4c5; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #c3c4c5; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #e14d43; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #e14d43; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #e14d43; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #69a8bb; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #26292c; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #e14d43; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #363b3f; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #e14d43; + background: #26292c; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #e14d43; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #e14d43; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #26292c; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #4c4c4d; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #c3c4c5; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #e14d43; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #e14d43; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #464d52; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #69a8bb; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #5f97a8; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #464d52; + background-color: #464d52; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #e14d43; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #c3c4c5; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #e14d43; + border-color: #dd382d; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #e14d43; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #e14d43; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #e14d43; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #e14d43; +} + +.attachment.details .check { + background-color: #e14d43; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #e14d43; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e14d43; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #e14d43; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #e14d43; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #363b3f; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #363b3f; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #e14d43; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #e14d43; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #e8776f, 0 0 2px 1px #e14d43; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #e14d43; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #26292c; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(206.6666666667deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #e14d43; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-left-color: #e14d43; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #e14d43; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-left-color: #e14d43; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #e8776f, 0 0 2px 1px #e14d43; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #e14d43; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #e14d43; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #e14d43; + border-style: solid; + box-shadow: 0 0 0 1px #e14d43; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #e14d43; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #e14d43; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #e14d43; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #e8776f, 0 0 2px 1px #e14d43; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #e14d43; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #e14d43; +} + +[class*=welcome-panel-icon] { + background-color: #363b3f; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/midnight/colors.min.css b/tools/storybook/wordpress/css/colors/midnight/colors.min.css new file mode 100644 index 00000000000..bf804f1ce55 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/midnight/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#e14d43;box-shadow:0 0 0 1px #e14d43}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#e14d43;color:#262a2e;box-shadow:inset 0 2px 5px -3px #e14d43}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#e14d43;border-color:#e14d43}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#d02c21;color:#d02c21}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#e8776f;color:#a4231a;box-shadow:0 0 0 1px #e8776f}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#e14d43;border-color:#e14d43;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#e35950;border-color:#df4136;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #e14d43}.wp-core-ui .button-primary:active{background:#dd382d;border-color:#dd382d;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#e14d43;color:#fff;border-color:#ba281e;box-shadow:inset 0 2px 5px -3px #200705}.wp-core-ui .button-group>.button.active{border-color:#e14d43}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#363b3f}.wp-core-ui .wp-ui-text-primary{color:#363b3f}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#e14d43}.wp-core-ui .wp-ui-text-highlight{color:#e14d43}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#69a8bb}.wp-core-ui .wp-ui-text-notification{color:#69a8bb}.wp-core-ui .wp-ui-text-icon{color:hsl(206.6666666667deg,7%,95%)}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #e14d43;color:#e14d43}.wrap .page-title-action:hover{color:#d02c21;border-color:#d02c21}.wrap .page-title-action:focus{border-color:#e8776f;color:#a4231a;box-shadow:0 0 0 1px #e8776f}.view-switch a.current:before{color:#363b3f}.view-switch a:hover:before{color:#69a8bb}#adminmenu,#adminmenuback,#adminmenuwrap{background:#363b3f}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(206.6666666667deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#e14d43}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#26292c}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#26292c}#adminmenu .wp-submenu .wp-submenu-head{color:#c3c4c5}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#c3c4c5}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#e14d43}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#e14d43}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#e14d43}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#69a8bb}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#26292c}#collapse-button{color:hsl(206.6666666667deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#e14d43}#wpadminbar{color:#fff;background:#363b3f}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#e14d43;background:#26292c}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#e14d43}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#e14d43}#wpadminbar .menupop .ab-sub-wrapper{background:#26292c}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#4c4c4d}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#c3c4c5}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#e14d43}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#e14d43}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(206.6666666667deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#464d52}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#69a8bb}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#5f97a8}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#464d52;background-color:#464d52}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#e14d43}#wpadminbar #wp-admin-bar-user-info .username{color:#c3c4c5}.wp-pointer .wp-pointer-content h3{background-color:#e14d43;border-color:#dd382d}.wp-pointer .wp-pointer-content h3:before{color:#e14d43}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#e14d43}.media-item .bar,.media-progress-bar div{background-color:#e14d43}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #e14d43}.attachment.details .check{background-color:#e14d43;box-shadow:0 0 0 1px #fff,0 0 0 2px #e14d43}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #e14d43}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#e14d43}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#e14d43}.theme-filter.current,.theme-section.current{border-bottom-color:#363b3f}body.more-filters-opened .more-filters{color:#fff;background-color:#363b3f}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#e14d43;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#e14d43;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #e8776f,0 0 2px 1px #e14d43}div#wp-responsive-toggle a:before{color:hsl(206.6666666667deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#e14d43}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#26292c}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(206.6666666667deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#e14d43}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-left-color:#e14d43}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#e14d43}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-left-color:#e14d43}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #e8776f,0 0 2px 1px #e14d43}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#e14d43;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#e14d43}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#e14d43;border-style:solid;box-shadow:0 0 0 1px #e14d43;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#e14d43}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#e14d43}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#e14d43}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #e8776f,0 0 2px 1px #e14d43}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#e14d43;color:#0073aa}.welcome-panel{background-color:#e14d43}[class*=welcome-panel-icon]{background-color:#363b3f} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/midnight/colors.scss b/tools/storybook/wordpress/css/colors/midnight/colors.scss new file mode 100644 index 00000000000..8570c9526eb --- /dev/null +++ b/tools/storybook/wordpress/css/colors/midnight/colors.scss @@ -0,0 +1,6 @@ +$scheme-name: "midnight"; +$base-color: #363b3f; +$highlight-color: #e14d43; +$notification-color: #69a8bb; + +@import "../_admin.scss"; diff --git a/tools/storybook/wordpress/css/colors/modern/colors-rtl.css b/tools/storybook/wordpress/css/colors/modern/colors-rtl.css new file mode 100644 index 00000000000..7c5cae613f1 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/modern/colors-rtl.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #3858e9; +} +a:hover, a:active, a:focus { + color: #183ad6; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #3858e9; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #183ad6; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #183ad6; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #3858e9; + box-shadow: 0 0 0 1px #3858e9; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #3858e9; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #3858e9; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #3858e9; + border-color: #3858e9; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #183ad6; + color: #183ad6; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #667fee; + color: #132ea8; + box-shadow: 0 0 0 1px #667fee; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #3858e9; + border-color: #3858e9; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #4664eb; + border-color: #2a4ce7; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #3858e9; +} +.wp-core-ui .button-primary:active { + background: #2145e6; + border-color: #2145e6; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #3858e9; + color: #fff; + border-color: #1534bf; + box-shadow: inset 0 2px 5px -3px #03081f; +} +.wp-core-ui .button-group > .button.active { + border-color: #3858e9; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #1e1e1e; +} +.wp-core-ui .wp-ui-text-primary { + color: #1e1e1e; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #3858e9; +} +.wp-core-ui .wp-ui-text-highlight { + color: #3858e9; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #3858e9; +} +.wp-core-ui .wp-ui-text-notification { + color: #3858e9; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(0deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #3858e9; + color: #3858e9; +} + +.wrap .page-title-action:hover { + color: #183ad6; + border-color: #183ad6; +} + +.wrap .page-title-action:focus { + border-color: #667fee; + color: #132ea8; + box-shadow: 0 0 0 1px #667fee; +} + +.view-switch a.current:before { + color: #1e1e1e; +} + +.view-switch a:hover:before { + color: #3858e9; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #1e1e1e; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(0deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #3858e9; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #0c0c0c; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #0c0c0c; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #bcbcbc; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #bcbcbc; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #33f078; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #33f078; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #3858e9; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #3858e9; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #0c0c0c; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(0deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #33f078; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #1e1e1e; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(0deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #33f078; + background: #0c0c0c; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #33f078; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #33f078; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #0c0c0c; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #303030; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #bcbcbc; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(0deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #33f078; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #33f078; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(0deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(0deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #303030; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #3858e9; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #324fd2; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #303030; + background-color: #303030; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #33f078; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #bcbcbc; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #3858e9; + border-color: #2145e6; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #3858e9; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #3858e9; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #3858e9; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #3858e9; +} + +.attachment.details .check { + background-color: #3858e9; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3858e9; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #3858e9; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #3858e9; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #3858e9; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #1e1e1e; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #1e1e1e; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #3858e9; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #3858e9; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #667fee, 0 0 2px 1px #3858e9; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(0deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #3858e9; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #0c0c0c; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(0deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #3858e9; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #3858e9; + border-right-color: #3858e9; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #3858e9; + border-top-color: #3858e9; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #3858e9; + border-right-color: #3858e9; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #3858e9; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #667fee, 0 0 2px 1px #3858e9; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #3858e9; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #3858e9; + color: #3858e9; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #3858e9; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #3858e9; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #3858e9; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #3858e9; + border-style: solid; + box-shadow: 0 0 0 1px #3858e9; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #3858e9; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #3858e9; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #3858e9; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #667fee, 0 0 2px 1px #3858e9; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #3858e9; + color: #3858e9; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #3858e9; +} + +[class*=welcome-panel-icon] { + background-color: #1e1e1e; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/modern/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/modern/colors-rtl.min.css new file mode 100644 index 00000000000..bf1605dbca8 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/modern/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#3858e9}a:active,a:focus,a:hover{color:#183ad6}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#3858e9}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#183ad6}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#183ad6}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#3858e9;box-shadow:0 0 0 1px #3858e9}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#3858e9;color:#262a2e;box-shadow:inset 0 2px 5px -3px #3858e9}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#3858e9;border-color:#3858e9}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#183ad6;color:#183ad6}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#667fee;color:#132ea8;box-shadow:0 0 0 1px #667fee}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#3858e9;border-color:#3858e9;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#4664eb;border-color:#2a4ce7;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #3858e9}.wp-core-ui .button-primary:active{background:#2145e6;border-color:#2145e6;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#3858e9;color:#fff;border-color:#1534bf;box-shadow:inset 0 2px 5px -3px #03081f}.wp-core-ui .button-group>.button.active{border-color:#3858e9}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#1e1e1e}.wp-core-ui .wp-ui-text-primary{color:#1e1e1e}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#3858e9}.wp-core-ui .wp-ui-text-highlight{color:#3858e9}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#3858e9}.wp-core-ui .wp-ui-text-notification{color:#3858e9}.wp-core-ui .wp-ui-text-icon{color:hsl(0deg,7%,95%)}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #3858e9;color:#3858e9}.wrap .page-title-action:hover{color:#183ad6;border-color:#183ad6}.wrap .page-title-action:focus{border-color:#667fee;color:#132ea8;box-shadow:0 0 0 1px #667fee}.view-switch a.current:before{color:#1e1e1e}.view-switch a:hover:before{color:#3858e9}#adminmenu,#adminmenuback,#adminmenuwrap{background:#1e1e1e}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(0deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#3858e9}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#0c0c0c}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#0c0c0c}#adminmenu .wp-submenu .wp-submenu-head{color:#bcbcbc}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#bcbcbc}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#33f078}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#33f078}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#3858e9}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#3858e9}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#0c0c0c}#collapse-button{color:hsl(0deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#33f078}#wpadminbar{color:#fff;background:#1e1e1e}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(0deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#33f078;background:#0c0c0c}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#33f078}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#33f078}#wpadminbar .menupop .ab-sub-wrapper{background:#0c0c0c}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#303030}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#bcbcbc}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(0deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#33f078}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#33f078}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(0deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(0deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#303030}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#3858e9}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#324fd2}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#303030;background-color:#303030}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#33f078}#wpadminbar #wp-admin-bar-user-info .username{color:#bcbcbc}.wp-pointer .wp-pointer-content h3{background-color:#3858e9;border-color:#2145e6}.wp-pointer .wp-pointer-content h3:before{color:#3858e9}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#3858e9}.media-item .bar,.media-progress-bar div{background-color:#3858e9}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #3858e9}.attachment.details .check{background-color:#3858e9;box-shadow:0 0 0 1px #fff,0 0 0 2px #3858e9}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #3858e9}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#3858e9}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#3858e9}.theme-filter.current,.theme-section.current{border-bottom-color:#1e1e1e}body.more-filters-opened .more-filters{color:#fff;background-color:#1e1e1e}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#3858e9;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#3858e9;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #667fee,0 0 2px 1px #3858e9}div#wp-responsive-toggle a:before{color:hsl(0deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#3858e9}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#0c0c0c}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(0deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#3858e9}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#3858e9;border-right-color:#3858e9}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#3858e9;border-top-color:#3858e9}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#3858e9;border-right-color:#3858e9}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#3858e9}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #667fee,0 0 2px 1px #3858e9}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#3858e9}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#3858e9;color:#3858e9}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#3858e9}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#3858e9}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#3858e9}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#3858e9;border-style:solid;box-shadow:0 0 0 1px #3858e9;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#3858e9}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#3858e9}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#3858e9}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #667fee,0 0 2px 1px #3858e9}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#3858e9;color:#3858e9}.welcome-panel{background-color:#3858e9}[class*=welcome-panel-icon]{background-color:#1e1e1e} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/modern/colors.css b/tools/storybook/wordpress/css/colors/modern/colors.css new file mode 100644 index 00000000000..4e8032ab8b7 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/modern/colors.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #3858e9; +} +a:hover, a:active, a:focus { + color: #183ad6; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #3858e9; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #183ad6; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #183ad6; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #3858e9; + box-shadow: 0 0 0 1px #3858e9; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #3858e9; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #3858e9; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #3858e9; + border-color: #3858e9; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #183ad6; + color: #183ad6; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #667fee; + color: #132ea8; + box-shadow: 0 0 0 1px #667fee; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #3858e9; + border-color: #3858e9; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #4664eb; + border-color: #2a4ce7; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #3858e9; +} +.wp-core-ui .button-primary:active { + background: #2145e6; + border-color: #2145e6; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #3858e9; + color: #fff; + border-color: #1534bf; + box-shadow: inset 0 2px 5px -3px #03081f; +} +.wp-core-ui .button-group > .button.active { + border-color: #3858e9; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #1e1e1e; +} +.wp-core-ui .wp-ui-text-primary { + color: #1e1e1e; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #3858e9; +} +.wp-core-ui .wp-ui-text-highlight { + color: #3858e9; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #3858e9; +} +.wp-core-ui .wp-ui-text-notification { + color: #3858e9; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(0deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #3858e9; + color: #3858e9; +} + +.wrap .page-title-action:hover { + color: #183ad6; + border-color: #183ad6; +} + +.wrap .page-title-action:focus { + border-color: #667fee; + color: #132ea8; + box-shadow: 0 0 0 1px #667fee; +} + +.view-switch a.current:before { + color: #1e1e1e; +} + +.view-switch a:hover:before { + color: #3858e9; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #1e1e1e; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(0deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #3858e9; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #0c0c0c; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #0c0c0c; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #bcbcbc; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #bcbcbc; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #33f078; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #33f078; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #3858e9; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #3858e9; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #0c0c0c; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(0deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #33f078; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #1e1e1e; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(0deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #33f078; + background: #0c0c0c; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #33f078; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #33f078; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #0c0c0c; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #303030; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #bcbcbc; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(0deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #33f078; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #33f078; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(0deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(0deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #303030; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #3858e9; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #324fd2; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #303030; + background-color: #303030; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #33f078; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #bcbcbc; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #3858e9; + border-color: #2145e6; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #3858e9; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #3858e9; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #3858e9; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #3858e9; +} + +.attachment.details .check { + background-color: #3858e9; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3858e9; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #3858e9; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #3858e9; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #3858e9; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #1e1e1e; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #1e1e1e; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #3858e9; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #3858e9; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #667fee, 0 0 2px 1px #3858e9; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(0deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #3858e9; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #0c0c0c; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(0deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #3858e9; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #3858e9; + border-left-color: #3858e9; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #3858e9; + border-top-color: #3858e9; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #3858e9; + border-left-color: #3858e9; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #3858e9; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #667fee, 0 0 2px 1px #3858e9; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #3858e9; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #3858e9; + color: #3858e9; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #3858e9; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #3858e9; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #3858e9; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #3858e9; + border-style: solid; + box-shadow: 0 0 0 1px #3858e9; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #3858e9; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #3858e9; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #3858e9; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #667fee, 0 0 2px 1px #3858e9; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #3858e9; + color: #3858e9; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #3858e9; +} + +[class*=welcome-panel-icon] { + background-color: #1e1e1e; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/modern/colors.min.css b/tools/storybook/wordpress/css/colors/modern/colors.min.css new file mode 100644 index 00000000000..a4f2c4cb1e9 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/modern/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#3858e9}a:active,a:focus,a:hover{color:#183ad6}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#3858e9}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#183ad6}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#183ad6}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#3858e9;box-shadow:0 0 0 1px #3858e9}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#3858e9;color:#262a2e;box-shadow:inset 0 2px 5px -3px #3858e9}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#3858e9;border-color:#3858e9}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#183ad6;color:#183ad6}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#667fee;color:#132ea8;box-shadow:0 0 0 1px #667fee}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#3858e9;border-color:#3858e9;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#4664eb;border-color:#2a4ce7;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #3858e9}.wp-core-ui .button-primary:active{background:#2145e6;border-color:#2145e6;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#3858e9;color:#fff;border-color:#1534bf;box-shadow:inset 0 2px 5px -3px #03081f}.wp-core-ui .button-group>.button.active{border-color:#3858e9}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#1e1e1e}.wp-core-ui .wp-ui-text-primary{color:#1e1e1e}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#3858e9}.wp-core-ui .wp-ui-text-highlight{color:#3858e9}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#3858e9}.wp-core-ui .wp-ui-text-notification{color:#3858e9}.wp-core-ui .wp-ui-text-icon{color:hsl(0deg,7%,95%)}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #3858e9;color:#3858e9}.wrap .page-title-action:hover{color:#183ad6;border-color:#183ad6}.wrap .page-title-action:focus{border-color:#667fee;color:#132ea8;box-shadow:0 0 0 1px #667fee}.view-switch a.current:before{color:#1e1e1e}.view-switch a:hover:before{color:#3858e9}#adminmenu,#adminmenuback,#adminmenuwrap{background:#1e1e1e}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(0deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#3858e9}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#0c0c0c}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#0c0c0c}#adminmenu .wp-submenu .wp-submenu-head{color:#bcbcbc}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#bcbcbc}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#33f078}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#33f078}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#3858e9}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#3858e9}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#0c0c0c}#collapse-button{color:hsl(0deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#33f078}#wpadminbar{color:#fff;background:#1e1e1e}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(0deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#33f078;background:#0c0c0c}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#33f078}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#33f078}#wpadminbar .menupop .ab-sub-wrapper{background:#0c0c0c}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#303030}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#bcbcbc}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(0deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#33f078}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#33f078}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(0deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(0deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#303030}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#3858e9}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#324fd2}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#303030;background-color:#303030}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#33f078}#wpadminbar #wp-admin-bar-user-info .username{color:#bcbcbc}.wp-pointer .wp-pointer-content h3{background-color:#3858e9;border-color:#2145e6}.wp-pointer .wp-pointer-content h3:before{color:#3858e9}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#3858e9}.media-item .bar,.media-progress-bar div{background-color:#3858e9}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #3858e9}.attachment.details .check{background-color:#3858e9;box-shadow:0 0 0 1px #fff,0 0 0 2px #3858e9}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #3858e9}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#3858e9}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#3858e9}.theme-filter.current,.theme-section.current{border-bottom-color:#1e1e1e}body.more-filters-opened .more-filters{color:#fff;background-color:#1e1e1e}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#3858e9;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#3858e9;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #667fee,0 0 2px 1px #3858e9}div#wp-responsive-toggle a:before{color:hsl(0deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#3858e9}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#0c0c0c}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(0deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#3858e9}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#3858e9;border-left-color:#3858e9}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#3858e9;border-top-color:#3858e9}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#3858e9;border-left-color:#3858e9}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#3858e9}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #667fee,0 0 2px 1px #3858e9}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#3858e9}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#3858e9;color:#3858e9}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#3858e9}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#3858e9}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#3858e9}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#3858e9;border-style:solid;box-shadow:0 0 0 1px #3858e9;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#3858e9}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#3858e9}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#3858e9}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #667fee,0 0 2px 1px #3858e9}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#3858e9;color:#3858e9}.welcome-panel{background-color:#3858e9}[class*=welcome-panel-icon]{background-color:#1e1e1e} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/modern/colors.scss b/tools/storybook/wordpress/css/colors/modern/colors.scss new file mode 100644 index 00000000000..7b7918174cd --- /dev/null +++ b/tools/storybook/wordpress/css/colors/modern/colors.scss @@ -0,0 +1,10 @@ +$scheme-name: "modern"; +$base-color: #1e1e1e; +$highlight-color: #3858e9; +$menu-submenu-focus-text: #33f078; +$notification-color: $highlight-color; + +$link: $highlight-color; +$link-focus: darken($highlight-color, 10%); + +@import "../_admin.scss"; diff --git a/tools/storybook/wordpress/css/colors/ocean/colors-rtl.css b/tools/storybook/wordpress/css/colors/ocean/colors-rtl.css new file mode 100644 index 00000000000..adb0eca15ec --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ocean/colors-rtl.css @@ -0,0 +1,681 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23738e96%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #738e96; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #9ebaa0; + box-shadow: 0 0 0 1px #9ebaa0; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #9ebaa0; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #9ebaa0; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button-primary { + background: #9ebaa0; + border-color: #9ebaa0; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #a7c0a9; + border-color: #95b497; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #9ebaa0; +} +.wp-core-ui .button-primary:active { + background: #8faf91; + border-color: #8faf91; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #9ebaa0; + color: #fff; + border-color: #719a74; + box-shadow: inset 0 2px 5px -3px #253426; +} +.wp-core-ui .button-group > .button.active { + border-color: #9ebaa0; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #738e96; +} +.wp-core-ui .wp-ui-text-primary { + color: #738e96; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #9ebaa0; +} +.wp-core-ui .wp-ui-text-highlight { + color: #9ebaa0; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #aa9d88; +} +.wp-core-ui .wp-ui-text-notification { + color: #aa9d88; +} +.wp-core-ui .wp-ui-text-icon { + color: #f2fcff; +} + +/* List tables */ +.wrap .page-title-action:hover { + color: #fff; + background-color: #738e96; +} + +.view-switch a.current:before { + color: #738e96; +} + +.view-switch a:hover:before { + color: #aa9d88; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #738e96; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: #f2fcff; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #9ebaa0; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #627c83; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #627c83; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #d5dde0; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #d5dde0; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #9ebaa0; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #9ebaa0; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #9ebaa0; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #aa9d88; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #627c83; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #f2fcff; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #9ebaa0; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #738e96; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #f2fcff; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #9ebaa0; + background: #627c83; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #9ebaa0; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #9ebaa0; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #627c83; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #8f9a9e; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #d5dde0; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #f2fcff; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #9ebaa0; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #9ebaa0; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #f2fcff; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #f2fcff; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #879ea5; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #aa9d88; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #998d7a; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #879ea5; + background-color: #879ea5; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #9ebaa0; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #d5dde0; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #9ebaa0; + border-color: #8faf91; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #9ebaa0; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #9ebaa0; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #9ebaa0; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #9ebaa0; +} + +.attachment.details .check { + background-color: #9ebaa0; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #9ebaa0; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #9ebaa0; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #9ebaa0; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #9ebaa0; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #738e96; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #738e96; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #9ebaa0; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #9ebaa0; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #bccfbd, 0 0 2px 1px #9ebaa0; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #f2fcff; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #9ebaa0; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #627c83; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #f2fcff; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #9ebaa0; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-right-color: #9ebaa0; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #9ebaa0; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-right-color: #9ebaa0; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #bccfbd, 0 0 2px 1px #9ebaa0; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #9ebaa0; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #9ebaa0; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #9ebaa0; + border-style: solid; + box-shadow: 0 0 0 1px #9ebaa0; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #9ebaa0; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #9ebaa0; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #9ebaa0; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #bccfbd, 0 0 2px 1px #9ebaa0; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #9ebaa0; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #9ebaa0; +} + +[class*=welcome-panel-icon] { + background-color: #738e96; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ocean/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/ocean/colors-rtl.min.css new file mode 100644 index 00000000000..7458450b893 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ocean/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23738e96%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#738e96}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#9ebaa0;box-shadow:0 0 0 1px #9ebaa0}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#9ebaa0;color:#262a2e;box-shadow:inset 0 2px 5px -3px #9ebaa0}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button-primary{background:#9ebaa0;border-color:#9ebaa0;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#a7c0a9;border-color:#95b497;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #9ebaa0}.wp-core-ui .button-primary:active{background:#8faf91;border-color:#8faf91;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#9ebaa0;color:#fff;border-color:#719a74;box-shadow:inset 0 2px 5px -3px #253426}.wp-core-ui .button-group>.button.active{border-color:#9ebaa0}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#738e96}.wp-core-ui .wp-ui-text-primary{color:#738e96}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#9ebaa0}.wp-core-ui .wp-ui-text-highlight{color:#9ebaa0}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#aa9d88}.wp-core-ui .wp-ui-text-notification{color:#aa9d88}.wp-core-ui .wp-ui-text-icon{color:#f2fcff}.wrap .page-title-action:hover{color:#fff;background-color:#738e96}.view-switch a.current:before{color:#738e96}.view-switch a:hover:before{color:#aa9d88}#adminmenu,#adminmenuback,#adminmenuwrap{background:#738e96}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:#f2fcff}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#9ebaa0}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#627c83}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#627c83}#adminmenu .wp-submenu .wp-submenu-head{color:#d5dde0}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#d5dde0}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#9ebaa0}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#9ebaa0}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#9ebaa0}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#aa9d88}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#627c83}#collapse-button{color:#f2fcff}#collapse-button:focus,#collapse-button:hover{color:#9ebaa0}#wpadminbar{color:#fff;background:#738e96}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#f2fcff}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#9ebaa0;background:#627c83}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#9ebaa0}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#9ebaa0}#wpadminbar .menupop .ab-sub-wrapper{background:#627c83}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#8f9a9e}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#d5dde0}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#f2fcff}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#9ebaa0}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#9ebaa0}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#f2fcff}#wpadminbar #adminbarsearch:before{color:#f2fcff}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#879ea5}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#aa9d88}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#998d7a}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#879ea5;background-color:#879ea5}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#9ebaa0}#wpadminbar #wp-admin-bar-user-info .username{color:#d5dde0}.wp-pointer .wp-pointer-content h3{background-color:#9ebaa0;border-color:#8faf91}.wp-pointer .wp-pointer-content h3:before{color:#9ebaa0}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#9ebaa0}.media-item .bar,.media-progress-bar div{background-color:#9ebaa0}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #9ebaa0}.attachment.details .check{background-color:#9ebaa0;box-shadow:0 0 0 1px #fff,0 0 0 2px #9ebaa0}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #9ebaa0}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#9ebaa0}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#9ebaa0}.theme-filter.current,.theme-section.current{border-bottom-color:#738e96}body.more-filters-opened .more-filters{color:#fff;background-color:#738e96}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#9ebaa0;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#9ebaa0;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #bccfbd,0 0 2px 1px #9ebaa0}div#wp-responsive-toggle a:before{color:#f2fcff}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#9ebaa0}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#627c83}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#f2fcff}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#9ebaa0}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-right-color:#9ebaa0}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#9ebaa0}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-right-color:#9ebaa0}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #bccfbd,0 0 2px 1px #9ebaa0}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#9ebaa0;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#9ebaa0}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#9ebaa0;border-style:solid;box-shadow:0 0 0 1px #9ebaa0;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#9ebaa0}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#9ebaa0}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#9ebaa0}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #bccfbd,0 0 2px 1px #9ebaa0}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#9ebaa0;color:#0073aa}.welcome-panel{background-color:#9ebaa0}[class*=welcome-panel-icon]{background-color:#738e96} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ocean/colors.css b/tools/storybook/wordpress/css/colors/ocean/colors.css new file mode 100644 index 00000000000..12e55e6088b --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ocean/colors.css @@ -0,0 +1,681 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23738e96%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #738e96; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #9ebaa0; + box-shadow: 0 0 0 1px #9ebaa0; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #9ebaa0; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #9ebaa0; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button-primary { + background: #9ebaa0; + border-color: #9ebaa0; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #a7c0a9; + border-color: #95b497; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #9ebaa0; +} +.wp-core-ui .button-primary:active { + background: #8faf91; + border-color: #8faf91; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #9ebaa0; + color: #fff; + border-color: #719a74; + box-shadow: inset 0 2px 5px -3px #253426; +} +.wp-core-ui .button-group > .button.active { + border-color: #9ebaa0; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #738e96; +} +.wp-core-ui .wp-ui-text-primary { + color: #738e96; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #9ebaa0; +} +.wp-core-ui .wp-ui-text-highlight { + color: #9ebaa0; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #aa9d88; +} +.wp-core-ui .wp-ui-text-notification { + color: #aa9d88; +} +.wp-core-ui .wp-ui-text-icon { + color: #f2fcff; +} + +/* List tables */ +.wrap .page-title-action:hover { + color: #fff; + background-color: #738e96; +} + +.view-switch a.current:before { + color: #738e96; +} + +.view-switch a:hover:before { + color: #aa9d88; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #738e96; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: #f2fcff; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #9ebaa0; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #627c83; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #627c83; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #d5dde0; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #d5dde0; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #9ebaa0; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #9ebaa0; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #9ebaa0; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #aa9d88; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #627c83; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: #f2fcff; +} + +#collapse-button:hover, +#collapse-button:focus { + color: #9ebaa0; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #738e96; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: #f2fcff; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #9ebaa0; + background: #627c83; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #9ebaa0; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #9ebaa0; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #627c83; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #8f9a9e; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #d5dde0; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: #f2fcff; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #9ebaa0; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #9ebaa0; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: #f2fcff; +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: #f2fcff; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #879ea5; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #aa9d88; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #998d7a; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #879ea5; + background-color: #879ea5; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #9ebaa0; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #d5dde0; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #9ebaa0; + border-color: #8faf91; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #9ebaa0; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #9ebaa0; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #9ebaa0; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #9ebaa0; +} + +.attachment.details .check { + background-color: #9ebaa0; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #9ebaa0; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #9ebaa0; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #9ebaa0; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #9ebaa0; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #738e96; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #738e96; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #9ebaa0; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #9ebaa0; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #bccfbd, 0 0 2px 1px #9ebaa0; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: #f2fcff; +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #9ebaa0; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #627c83; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: #f2fcff; +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #9ebaa0; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-left-color: #9ebaa0; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #9ebaa0; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-left-color: #9ebaa0; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #bccfbd, 0 0 2px 1px #9ebaa0; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #9ebaa0; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #9ebaa0; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #9ebaa0; + border-style: solid; + box-shadow: 0 0 0 1px #9ebaa0; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #9ebaa0; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #9ebaa0; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #9ebaa0; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #bccfbd, 0 0 2px 1px #9ebaa0; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #9ebaa0; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #9ebaa0; +} + +[class*=welcome-panel-icon] { + background-color: #738e96; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ocean/colors.min.css b/tools/storybook/wordpress/css/colors/ocean/colors.min.css new file mode 100644 index 00000000000..2ce9b71d998 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ocean/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23738e96%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#738e96}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#9ebaa0;box-shadow:0 0 0 1px #9ebaa0}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#9ebaa0;color:#262a2e;box-shadow:inset 0 2px 5px -3px #9ebaa0}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button-primary{background:#9ebaa0;border-color:#9ebaa0;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#a7c0a9;border-color:#95b497;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #9ebaa0}.wp-core-ui .button-primary:active{background:#8faf91;border-color:#8faf91;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#9ebaa0;color:#fff;border-color:#719a74;box-shadow:inset 0 2px 5px -3px #253426}.wp-core-ui .button-group>.button.active{border-color:#9ebaa0}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#738e96}.wp-core-ui .wp-ui-text-primary{color:#738e96}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#9ebaa0}.wp-core-ui .wp-ui-text-highlight{color:#9ebaa0}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#aa9d88}.wp-core-ui .wp-ui-text-notification{color:#aa9d88}.wp-core-ui .wp-ui-text-icon{color:#f2fcff}.wrap .page-title-action:hover{color:#fff;background-color:#738e96}.view-switch a.current:before{color:#738e96}.view-switch a:hover:before{color:#aa9d88}#adminmenu,#adminmenuback,#adminmenuwrap{background:#738e96}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:#f2fcff}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#9ebaa0}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#627c83}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#627c83}#adminmenu .wp-submenu .wp-submenu-head{color:#d5dde0}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#d5dde0}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#9ebaa0}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#9ebaa0}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#9ebaa0}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#aa9d88}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#627c83}#collapse-button{color:#f2fcff}#collapse-button:focus,#collapse-button:hover{color:#9ebaa0}#wpadminbar{color:#fff;background:#738e96}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:#f2fcff}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#9ebaa0;background:#627c83}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#9ebaa0}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#9ebaa0}#wpadminbar .menupop .ab-sub-wrapper{background:#627c83}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#8f9a9e}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#d5dde0}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:#f2fcff}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#9ebaa0}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#9ebaa0}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#f2fcff}#wpadminbar #adminbarsearch:before{color:#f2fcff}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#879ea5}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#aa9d88}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#998d7a}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#879ea5;background-color:#879ea5}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#9ebaa0}#wpadminbar #wp-admin-bar-user-info .username{color:#d5dde0}.wp-pointer .wp-pointer-content h3{background-color:#9ebaa0;border-color:#8faf91}.wp-pointer .wp-pointer-content h3:before{color:#9ebaa0}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#9ebaa0}.media-item .bar,.media-progress-bar div{background-color:#9ebaa0}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #9ebaa0}.attachment.details .check{background-color:#9ebaa0;box-shadow:0 0 0 1px #fff,0 0 0 2px #9ebaa0}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #9ebaa0}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#9ebaa0}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#9ebaa0}.theme-filter.current,.theme-section.current{border-bottom-color:#738e96}body.more-filters-opened .more-filters{color:#fff;background-color:#738e96}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#9ebaa0;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#9ebaa0;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #bccfbd,0 0 2px 1px #9ebaa0}div#wp-responsive-toggle a:before{color:#f2fcff}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#9ebaa0}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#627c83}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#f2fcff}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#9ebaa0}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-left-color:#9ebaa0}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#9ebaa0}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-left-color:#9ebaa0}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #bccfbd,0 0 2px 1px #9ebaa0}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#9ebaa0;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#9ebaa0}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#9ebaa0;border-style:solid;box-shadow:0 0 0 1px #9ebaa0;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#9ebaa0}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#9ebaa0}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#9ebaa0}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #bccfbd,0 0 2px 1px #9ebaa0}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#9ebaa0;color:#0073aa}.welcome-panel{background-color:#9ebaa0}[class*=welcome-panel-icon]{background-color:#738e96} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/ocean/colors.scss b/tools/storybook/wordpress/css/colors/ocean/colors.scss new file mode 100644 index 00000000000..027c27d470a --- /dev/null +++ b/tools/storybook/wordpress/css/colors/ocean/colors.scss @@ -0,0 +1,10 @@ +$scheme-name: "ocean"; +$base-color: #738e96; +$icon-color: #f2fcff; +$highlight-color: #9ebaa0; +$notification-color: #aa9d88; +$low-contrast-theme: "true"; + +$form-checked: $base-color; + +@import "../_admin.scss"; diff --git a/tools/storybook/wordpress/css/colors/sunrise/colors-rtl.css b/tools/storybook/wordpress/css/colors/sunrise/colors-rtl.css new file mode 100644 index 00000000000..faa6154292a --- /dev/null +++ b/tools/storybook/wordpress/css/colors/sunrise/colors-rtl.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #dd823b; + box-shadow: 0 0 0 1px #dd823b; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #dd823b; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #dd823b; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #dd823b; + border-color: #dd823b; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #c36922; + color: #c36922; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #e59e66; + color: #98511a; + box-shadow: 0 0 0 1px #e59e66; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #dd823b; + border-color: #dd823b; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #df8a48; + border-color: #db7a2e; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dd823b; +} +.wp-core-ui .button-primary:active { + background: #d97426; + border-color: #d97426; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #dd823b; + color: #fff; + border-color: #ad5d1e; + box-shadow: inset 0 2px 5px -3px #150b04; +} +.wp-core-ui .button-group > .button.active { + border-color: #dd823b; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #cf4944; +} +.wp-core-ui .wp-ui-text-primary { + color: #cf4944; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #dd823b; +} +.wp-core-ui .wp-ui-text-highlight { + color: #dd823b; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #ccaf0b; +} +.wp-core-ui .wp-ui-text-notification { + color: #ccaf0b; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(2.1582733813deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #dd823b; + color: #dd823b; +} + +.wrap .page-title-action:hover { + color: #c36922; + border-color: #c36922; +} + +.wrap .page-title-action:focus { + border-color: #e59e66; + color: #98511a; + box-shadow: 0 0 0 1px #e59e66; +} + +.view-switch a.current:before { + color: #cf4944; +} + +.view-switch a:hover:before { + color: #ccaf0b; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #cf4944; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #dd823b; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #be3631; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-left-color: #be3631; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #f1c8c7; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #f1c8c7; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #f7e3d3; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #f7e3d3; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-left-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #dd823b; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #ccaf0b; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #be3631; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #f7e3d3; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #cf4944; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #f7e3d3; + background: #be3631; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #f7e3d3; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #f7e3d3; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #be3631; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #cf6b67; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #f1c8c7; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #f7e3d3; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #f7e3d3; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #d66560; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #ccaf0b; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #b89e0a; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #d66560; + background-color: #d66560; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #f7e3d3; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #f1c8c7; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #dd823b; + border-color: #d97426; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #dd823b; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #dd823b; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #dd823b; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #dd823b; +} + +.attachment.details .check { + background-color: #dd823b; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #dd823b; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dd823b; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #dd823b; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #dd823b; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #cf4944; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #cf4944; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #dd823b; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #dd823b; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #e59e66, 0 0 2px 1px #dd823b; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #dd823b; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #be3631; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #dd823b; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-right-color: #dd823b; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #dd823b; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-right-color: #dd823b; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #e59e66, 0 0 2px 1px #dd823b; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-right-color: #dd823b; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #dd823b; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #dd823b; + border-style: solid; + box-shadow: 0 0 0 1px #dd823b; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #dd823b; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #dd823b; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #dd823b; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #e59e66, 0 0 2px 1px #dd823b; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #dd823b; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #dd823b; +} + +[class*=welcome-panel-icon] { + background-color: #cf4944; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/sunrise/colors-rtl.min.css b/tools/storybook/wordpress/css/colors/sunrise/colors-rtl.min.css new file mode 100644 index 00000000000..d434427d75a --- /dev/null +++ b/tools/storybook/wordpress/css/colors/sunrise/colors-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#dd823b;box-shadow:0 0 0 1px #dd823b}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#dd823b;color:#262a2e;box-shadow:inset 0 2px 5px -3px #dd823b}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#dd823b;border-color:#dd823b}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#c36922;color:#c36922}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#e59e66;color:#98511a;box-shadow:0 0 0 1px #e59e66}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#dd823b;border-color:#dd823b;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#df8a48;border-color:#db7a2e;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #dd823b}.wp-core-ui .button-primary:active{background:#d97426;border-color:#d97426;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#dd823b;color:#fff;border-color:#ad5d1e;box-shadow:inset 0 2px 5px -3px #150b04}.wp-core-ui .button-group>.button.active{border-color:#dd823b}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#cf4944}.wp-core-ui .wp-ui-text-primary{color:#cf4944}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#dd823b}.wp-core-ui .wp-ui-text-highlight{color:#dd823b}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#ccaf0b}.wp-core-ui .wp-ui-text-notification{color:#ccaf0b}.wp-core-ui .wp-ui-text-icon{color:hsl(2.1582733813deg,7%,95%)}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #dd823b;color:#dd823b}.wrap .page-title-action:hover{color:#c36922;border-color:#c36922}.wrap .page-title-action:focus{border-color:#e59e66;color:#98511a;box-shadow:0 0 0 1px #e59e66}.view-switch a.current:before{color:#cf4944}.view-switch a:hover:before{color:#ccaf0b}#adminmenu,#adminmenuback,#adminmenuwrap{background:#cf4944}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(2.1582733813deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#dd823b}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#be3631}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-left-color:#be3631}#adminmenu .wp-submenu .wp-submenu-head{color:#f1c8c7}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#f1c8c7}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#f7e3d3}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#f7e3d3}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-left-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#dd823b}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#ccaf0b}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#be3631}#collapse-button{color:hsl(2.1582733813deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#f7e3d3}#wpadminbar{color:#fff;background:#cf4944}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#f7e3d3;background:#be3631}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#f7e3d3}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#f7e3d3}#wpadminbar .menupop .ab-sub-wrapper{background:#be3631}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#cf6b67}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#f1c8c7}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#f7e3d3}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#f7e3d3}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#d66560}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#ccaf0b}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#b89e0a}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#d66560;background-color:#d66560}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#f7e3d3}#wpadminbar #wp-admin-bar-user-info .username{color:#f1c8c7}.wp-pointer .wp-pointer-content h3{background-color:#dd823b;border-color:#d97426}.wp-pointer .wp-pointer-content h3:before{color:#dd823b}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#dd823b}.media-item .bar,.media-progress-bar div{background-color:#dd823b}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #dd823b}.attachment.details .check{background-color:#dd823b;box-shadow:0 0 0 1px #fff,0 0 0 2px #dd823b}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #dd823b}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#dd823b}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#dd823b}.theme-filter.current,.theme-section.current{border-bottom-color:#cf4944}body.more-filters-opened .more-filters{color:#fff;background-color:#cf4944}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#dd823b;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#dd823b;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #e59e66,0 0 2px 1px #dd823b}div#wp-responsive-toggle a:before{color:hsl(2.1582733813deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#dd823b}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#be3631}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(2.1582733813deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#dd823b}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-right-color:#dd823b}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#dd823b}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-right-color:#dd823b}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #e59e66,0 0 2px 1px #dd823b}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-right-color:#dd823b;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#dd823b}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#dd823b;border-style:solid;box-shadow:0 0 0 1px #dd823b;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#dd823b}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#dd823b}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#dd823b}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #e59e66,0 0 2px 1px #dd823b}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#dd823b;color:#0073aa}.welcome-panel{background-color:#dd823b}[class*=welcome-panel-icon]{background-color:#cf4944} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/sunrise/colors.css b/tools/storybook/wordpress/css/colors/sunrise/colors.css new file mode 100644 index 00000000000..1c8fb4afabb --- /dev/null +++ b/tools/storybook/wordpress/css/colors/sunrise/colors.css @@ -0,0 +1,714 @@ +/*! This file is auto-generated */ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ +body { + background: #f1f1f1; +} + +/* Links */ +a { + color: #0073aa; +} +a:hover, a:active, a:focus { + color: #0096dd; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: #0073aa; +} +.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus { + color: #0096dd; +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: #7e8993; +} + +.wp-core-ui input[type=reset]:hover, +.wp-core-ui input[type=reset]:active { + color: #0096dd; +} + +input[type=text]:focus, +input[type=password]:focus, +input[type=color]:focus, +input[type=date]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=email]:focus, +input[type=month]:focus, +input[type=number]:focus, +input[type=search]:focus, +input[type=tel]:focus, +input[type=text]:focus, +input[type=time]:focus, +input[type=url]:focus, +input[type=week]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus, +select:focus, +textarea:focus { + border-color: #dd823b; + box-shadow: 0 0 0 1px #dd823b; +} + +/* Core UI */ +.wp-core-ui .button { + border-color: #7e8993; + color: #32373c; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #717c87; + color: #262a2e; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus { + border-color: #7e8993; + color: #262a2e; + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button:active { + border-color: #7e8993; + color: #262a2e; + box-shadow: none; +} +.wp-core-ui .button.active, +.wp-core-ui .button.active:focus, +.wp-core-ui .button.active:hover { + border-color: #dd823b; + color: #262a2e; + box-shadow: inset 0 2px 5px -3px #dd823b; +} +.wp-core-ui .button.active:focus { + box-shadow: 0 0 0 1px #32373c; +} +.wp-core-ui .button, +.wp-core-ui .button-secondary { + color: #dd823b; + border-color: #dd823b; +} +.wp-core-ui .button.hover, +.wp-core-ui .button:hover, +.wp-core-ui .button-secondary:hover { + border-color: #c36922; + color: #c36922; +} +.wp-core-ui .button.focus, +.wp-core-ui .button:focus, +.wp-core-ui .button-secondary:focus { + border-color: #e59e66; + color: #98511a; + box-shadow: 0 0 0 1px #e59e66; +} +.wp-core-ui .button-primary:hover { + color: #fff; +} +.wp-core-ui .button-primary { + background: #dd823b; + border-color: #dd823b; + color: #fff; +} +.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { + background: #df8a48; + border-color: #db7a2e; + color: #fff; +} +.wp-core-ui .button-primary:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dd823b; +} +.wp-core-ui .button-primary:active { + background: #d97426; + border-color: #d97426; + color: #fff; +} +.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover { + background: #dd823b; + color: #fff; + border-color: #ad5d1e; + box-shadow: inset 0 2px 5px -3px #150b04; +} +.wp-core-ui .button-group > .button.active { + border-color: #dd823b; +} +.wp-core-ui .wp-ui-primary { + color: #fff; + background-color: #cf4944; +} +.wp-core-ui .wp-ui-text-primary { + color: #cf4944; +} +.wp-core-ui .wp-ui-highlight { + color: #fff; + background-color: #dd823b; +} +.wp-core-ui .wp-ui-text-highlight { + color: #dd823b; +} +.wp-core-ui .wp-ui-notification { + color: #fff; + background-color: #ccaf0b; +} +.wp-core-ui .wp-ui-text-notification { + color: #ccaf0b; +} +.wp-core-ui .wp-ui-text-icon { + color: hsl(2.1582733813deg, 7%, 95%); +} + +/* List tables */ +.wrap .page-title-action, +.wrap .page-title-action:active { + border: 1px solid #dd823b; + color: #dd823b; +} + +.wrap .page-title-action:hover { + color: #c36922; + border-color: #c36922; +} + +.wrap .page-title-action:focus { + border-color: #e59e66; + color: #98511a; + box-shadow: 0 0 0 1px #e59e66; +} + +.view-switch a.current:before { + color: #cf4944; +} + +.view-switch a:hover:before { + color: #ccaf0b; +} + +/* Admin Menu */ +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: #cf4944; +} + +#adminmenu a { + color: #fff; +} + +#adminmenu div.wp-menu-image:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: #fff; + background-color: #dd823b; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: #fff; +} + +/* Active tabs use a bottom border color that matches the page background color. */ +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: #f1f1f1; + border-bottom-color: #f1f1f1; +} + +/* Admin Menu: submenu */ +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: #be3631; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #be3631; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: #f1c8c7; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: #f1c8c7; +} +#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu .wp-submenu a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { + color: #f7e3d3; +} + +/* Admin Menu: current */ +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: #fff; +} +#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { + color: #f7e3d3; +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: #f1f1f1; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: #fff; + background: #dd823b; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: #fff; +} + +/* Admin Menu: bubble */ +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: #fff; + background: #ccaf0b; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: #fff; + background: #be3631; +} + +/* Admin Menu: collapse button */ +#collapse-button { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#collapse-button:hover, +#collapse-button:focus { + color: #f7e3d3; +} + +/* Admin Bar */ +#wpadminbar { + color: #fff; + background: #cf4944; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: #fff; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: #f7e3d3; + background: #be3631; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: #f7e3d3; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: #f7e3d3; +} + +/* Admin Bar: submenu */ +#wpadminbar .menupop .ab-sub-wrapper { + background: #be3631; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: #cf6b67; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: #f1c8c7; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: #f7e3d3; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: #f7e3d3; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +/* Admin Bar: search */ +#wpadminbar #adminbarsearch:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: #fff; + background: #d66560; +} + +/* Admin Bar: recovery mode */ +#wpadminbar #wp-admin-bar-recovery-mode { + color: #fff; + background-color: #ccaf0b; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: #fff; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: #fff; + background-color: #b89e0a; +} + +/* Admin Bar: my account */ +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: #d66560; + background-color: #d66560; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: #fff; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: #f7e3d3; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: #f1c8c7; +} + +/* Pointers */ +.wp-pointer .wp-pointer-content h3 { + background-color: #dd823b; + border-color: #d97426; +} + +.wp-pointer .wp-pointer-content h3:before { + color: #dd823b; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: #dd823b; +} + +/* Media */ +.media-item .bar, +.media-progress-bar div { + background-color: #dd823b; +} + +.details.attachment { + box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #dd823b; +} + +.attachment.details .check { + background-color: #dd823b; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px #dd823b; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dd823b; +} + +/* Themes */ +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: #dd823b; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: #dd823b; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: #cf4944; +} + +body.more-filters-opened .more-filters { + color: #fff; + background-color: #cf4944; +} + +body.more-filters-opened .more-filters:before { + color: #fff; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: #dd823b; + color: #fff; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: #fff; +} + +/* Widgets */ +.widgets-chooser li.widgets-chooser-selected { + background-color: #dd823b; + color: #fff; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: #fff; +} + +/* Nav Menus */ +.nav-menus-php .item-edit:focus:before { + box-shadow: 0 0 0 1px #e59e66, 0 0 2px 1px #dd823b; +} + +/* Responsive Component */ +div#wp-responsive-toggle a:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +.wp-responsive-open div#wp-responsive-toggle a { + border-color: transparent; + background: #dd823b; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #be3631; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: hsl(2.1582733813deg, 7%, 95%); +} + +/* TinyMCE */ +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: #dd823b; +} + +/* Customizer */ +.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:hover, +.wp-core-ui #customize-controls .control-section.open .accordion-section-title, +.wp-core-ui #customize-controls .control-section .accordion-section-title:focus { + color: #0073aa; + border-left-color: #dd823b; +} +.wp-core-ui .customize-controls-close:focus, +.wp-core-ui .customize-controls-close:hover, +.wp-core-ui .customize-controls-preview-toggle:focus, +.wp-core-ui .customize-controls-preview-toggle:hover { + color: #0073aa; + border-top-color: #dd823b; +} +.wp-core-ui .customize-panel-back:hover, +.wp-core-ui .customize-panel-back:focus, +.wp-core-ui .customize-section-back:hover, +.wp-core-ui .customize-section-back:focus { + color: #0073aa; + border-left-color: #dd823b; +} +.wp-core-ui .customize-screen-options-toggle:hover, +.wp-core-ui .customize-screen-options-toggle:active, +.wp-core-ui .customize-screen-options-toggle:focus, +.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #0073aa; +} +.wp-core-ui .customize-screen-options-toggle:focus:before, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before, +.wp-core-ui .menu-item-bar .item-delete:focus:before, +.wp-core-ui #available-menu-items .item-add:focus:before, +.wp-core-ui #customize-save-button-wrapper .save:focus, +.wp-core-ui #publish-settings:focus { + box-shadow: 0 0 0 1px #e59e66, 0 0 2px 1px #dd823b; +} +.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus, +.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title:focus, +.wp-core-ui .control-panel-themes .customize-themes-section-title:hover { + border-left-color: #dd823b; + color: #0073aa; +} +.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: #dd823b; +} +.wp-core-ui .control-panel-themes .customize-themes-section-title.selected { + color: #0073aa; +} +.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after, +.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after, +.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #0073aa; +} +.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: #dd823b; + border-style: solid; + box-shadow: 0 0 0 1px #dd823b; + outline: 2px solid transparent; +} +.wp-core-ui .wp-full-overlay-footer .devices button:focus, +.wp-core-ui .wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #dd823b; +} +.wp-core-ui .wp-full-overlay-footer .devices button:hover:before, +.wp-core-ui .wp-full-overlay-footer .devices button:focus:before { + color: #dd823b; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #dd823b; +} +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: 0 0 0 1px #e59e66, 0 0 2px 1px #dd823b; +} +.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover { + border-bottom-color: #dd823b; + color: #0073aa; +} + +/* Welcome Panel */ +.welcome-panel { + background-color: #dd823b; +} + +[class*=welcome-panel-icon] { + background-color: #cf4944; +} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/sunrise/colors.min.css b/tools/storybook/wordpress/css/colors/sunrise/colors.min.css new file mode 100644 index 00000000000..c118ab235f2 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/sunrise/colors.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{background:#f1f1f1}a{color:#0073aa}a:active,a:focus,a:hover{color:#0096dd}#post-body #visibility:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-revisions:before,.curtime #timestamp:before,span.wp-media-buttons-icon:before{color:currentColor}.wp-core-ui .button-link{color:#0073aa}.wp-core-ui .button-link:active,.wp-core-ui .button-link:focus,.wp-core-ui .button-link:hover{color:#0096dd}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment,.wp-core-ui .button-link-delete{color:#a00}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover,.wp-core-ui .button-link-delete:focus,.wp-core-ui .button-link-delete:hover{color:#dc3232}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%237e8993%27%2F%3E%3C%2Fsvg%3E")}input[type=radio]:checked::before{background:#7e8993}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#0096dd}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#dd823b;box-shadow:0 0 0 1px #dd823b}.wp-core-ui .button{border-color:#7e8993;color:#32373c}.wp-core-ui .button.focus,.wp-core-ui .button.hover,.wp-core-ui .button:focus,.wp-core-ui .button:hover{border-color:#717c87;color:#262a2e}.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#7e8993;color:#262a2e;box-shadow:0 0 0 1px #32373c}.wp-core-ui .button:active{border-color:#7e8993;color:#262a2e;box-shadow:none}.wp-core-ui .button.active,.wp-core-ui .button.active:focus,.wp-core-ui .button.active:hover{border-color:#dd823b;color:#262a2e;box-shadow:inset 0 2px 5px -3px #dd823b}.wp-core-ui .button.active:focus{box-shadow:0 0 0 1px #32373c}.wp-core-ui .button,.wp-core-ui .button-secondary{color:#dd823b;border-color:#dd823b}.wp-core-ui .button-secondary:hover,.wp-core-ui .button.hover,.wp-core-ui .button:hover{border-color:#c36922;color:#c36922}.wp-core-ui .button-secondary:focus,.wp-core-ui .button.focus,.wp-core-ui .button:focus{border-color:#e59e66;color:#98511a;box-shadow:0 0 0 1px #e59e66}.wp-core-ui .button-primary:hover{color:#fff}.wp-core-ui .button-primary{background:#dd823b;border-color:#dd823b;color:#fff}.wp-core-ui .button-primary:focus,.wp-core-ui .button-primary:hover{background:#df8a48;border-color:#db7a2e;color:#fff}.wp-core-ui .button-primary:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #dd823b}.wp-core-ui .button-primary:active{background:#d97426;border-color:#d97426;color:#fff}.wp-core-ui .button-primary.active,.wp-core-ui .button-primary.active:focus,.wp-core-ui .button-primary.active:hover{background:#dd823b;color:#fff;border-color:#ad5d1e;box-shadow:inset 0 2px 5px -3px #150b04}.wp-core-ui .button-group>.button.active{border-color:#dd823b}.wp-core-ui .wp-ui-primary{color:#fff;background-color:#cf4944}.wp-core-ui .wp-ui-text-primary{color:#cf4944}.wp-core-ui .wp-ui-highlight{color:#fff;background-color:#dd823b}.wp-core-ui .wp-ui-text-highlight{color:#dd823b}.wp-core-ui .wp-ui-notification{color:#fff;background-color:#ccaf0b}.wp-core-ui .wp-ui-text-notification{color:#ccaf0b}.wp-core-ui .wp-ui-text-icon{color:hsl(2.1582733813deg,7%,95%)}.wrap .page-title-action,.wrap .page-title-action:active{border:1px solid #dd823b;color:#dd823b}.wrap .page-title-action:hover{color:#c36922;border-color:#c36922}.wrap .page-title-action:focus{border-color:#e59e66;color:#98511a;box-shadow:0 0 0 1px #e59e66}.view-switch a.current:before{color:#cf4944}.view-switch a:hover:before{color:#ccaf0b}#adminmenu,#adminmenuback,#adminmenuwrap{background:#cf4944}#adminmenu a{color:#fff}#adminmenu div.wp-menu-image:before{color:hsl(2.1582733813deg,7%,95%)}#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{color:#fff;background-color:#dd823b}#adminmenu li.menu-top:hover div.wp-menu-image:before,#adminmenu li.opensub>a.menu-top div.wp-menu-image:before{color:#fff}.about-wrap .nav-tab-active,.nav-tab-active,.nav-tab-active:hover{background-color:#f1f1f1;border-bottom-color:#f1f1f1}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu{background:#be3631}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:#be3631}#adminmenu .wp-submenu .wp-submenu-head{color:#f1c8c7}#adminmenu .wp-has-current-submenu .wp-submenu a,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a,#adminmenu .wp-submenu a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a{color:#f1c8c7}#adminmenu .wp-has-current-submenu .wp-submenu a:focus,#adminmenu .wp-has-current-submenu .wp-submenu a:hover,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover{color:#f7e3d3}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current a,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus,#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover{color:#f7e3d3}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{border-right-color:#f1f1f1}#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{color:#fff;background:#dd823b}#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.current div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#fff}#adminmenu .awaiting-mod,#adminmenu .update-plugins{color:#fff;background:#ccaf0b}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod,#adminmenu li.menu-top:hover>a .update-plugins,#adminmenu li:hover a .awaiting-mod{color:#fff;background:#be3631}#collapse-button{color:hsl(2.1582733813deg,7%,95%)}#collapse-button:focus,#collapse-button:hover{color:#f7e3d3}#wpadminbar{color:#fff;background:#cf4944}#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#fff}#wpadminbar .ab-icon,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:after,#wpadminbar .ab-item:before{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{color:#f7e3d3;background:#be3631}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li.hover span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label{color:#f7e3d3}#wpadminbar:not(.mobile) li:hover #adminbarsearch:before,#wpadminbar:not(.mobile) li:hover .ab-icon:before,#wpadminbar:not(.mobile) li:hover .ab-item:after,#wpadminbar:not(.mobile) li:hover .ab-item:before{color:#f7e3d3}#wpadminbar .menupop .ab-sub-wrapper{background:#be3631}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#cf6b67}#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#f1c8c7}#wpadminbar .menupop .menupop>.ab-item:before,#wpadminbar .quicklinks li .blavatar{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar .quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks .menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop.hover ul li a:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#f7e3d3}#wpadminbar .menupop .menupop>.ab-item:hover:before,#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar,#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#f7e3d3}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar #adminbarsearch:before{color:hsl(2.1582733813deg,7%,95%)}#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input:focus{color:#fff;background:#d66560}#wpadminbar #wp-admin-bar-recovery-mode{color:#fff;background-color:#ccaf0b}#wpadminbar #wp-admin-bar-recovery-mode .ab-item,#wpadminbar #wp-admin-bar-recovery-mode a.ab-item{color:#fff}#wpadminbar .ab-top-menu>#wp-admin-bar-recovery-mode.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>#wp-admin-bar-recovery-mode>.ab-item:focus{color:#fff;background-color:#b89e0a}#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:#d66560;background-color:#d66560}#wpadminbar #wp-admin-bar-user-info .display-name{color:#fff}#wpadminbar #wp-admin-bar-user-info a:hover .display-name{color:#f7e3d3}#wpadminbar #wp-admin-bar-user-info .username{color:#f1c8c7}.wp-pointer .wp-pointer-content h3{background-color:#dd823b;border-color:#d97426}.wp-pointer .wp-pointer-content h3:before{color:#dd823b}.wp-pointer.wp-pointer-top .wp-pointer-arrow,.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner{border-bottom-color:#dd823b}.media-item .bar,.media-progress-bar div{background-color:#dd823b}.details.attachment{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #dd823b}.attachment.details .check{background-color:#dd823b;box-shadow:0 0 0 1px #fff,0 0 0 2px #dd823b}.media-selection .attachment.selection.details .thumbnail{box-shadow:0 0 0 1px #fff,0 0 0 3px #dd823b}.theme-browser .theme.active .theme-name,.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{background:#dd823b}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{color:#dd823b}.theme-filter.current,.theme-section.current{border-bottom-color:#cf4944}body.more-filters-opened .more-filters{color:#fff;background-color:#cf4944}body.more-filters-opened .more-filters:before{color:#fff}body.more-filters-opened .more-filters:focus,body.more-filters-opened .more-filters:hover{background-color:#dd823b;color:#fff}body.more-filters-opened .more-filters:focus:before,body.more-filters-opened .more-filters:hover:before{color:#fff}.widgets-chooser li.widgets-chooser-selected{background-color:#dd823b;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{color:#fff}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #e59e66,0 0 2px 1px #dd823b}div#wp-responsive-toggle a:before{color:hsl(2.1582733813deg,7%,95%)}.wp-responsive-open div#wp-responsive-toggle a{border-color:transparent;background:#dd823b}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#be3631}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:hsl(2.1582733813deg,7%,95%)}.mce-container.mce-menu .mce-menu-item-normal.mce-active,.mce-container.mce-menu .mce-menu-item-preview.mce-active,.mce-container.mce-menu .mce-menu-item.mce-selected,.mce-container.mce-menu .mce-menu-item:focus,.mce-container.mce-menu .mce-menu-item:hover{background:#dd823b}.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,.wp-core-ui #customize-controls .control-section.open .accordion-section-title,.wp-core-ui #customize-controls .control-section:hover>.accordion-section-title{color:#0073aa;border-left-color:#dd823b}.wp-core-ui .customize-controls-close:focus,.wp-core-ui .customize-controls-close:hover,.wp-core-ui .customize-controls-preview-toggle:focus,.wp-core-ui .customize-controls-preview-toggle:hover{color:#0073aa;border-top-color:#dd823b}.wp-core-ui .customize-panel-back:focus,.wp-core-ui .customize-panel-back:hover,.wp-core-ui .customize-section-back:focus,.wp-core-ui .customize-section-back:hover{color:#0073aa;border-left-color:#dd823b}.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,.wp-core-ui .customize-screen-options-toggle:active,.wp-core-ui .customize-screen-options-toggle:focus,.wp-core-ui .customize-screen-options-toggle:hover{color:#0073aa}.wp-core-ui #available-menu-items .item-add:focus:before,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before,.wp-core-ui #customize-save-button-wrapper .save:focus,.wp-core-ui #publish-settings:focus,.wp-core-ui .customize-screen-options-toggle:focus:before,.wp-core-ui .menu-item-bar .item-delete:focus:before,.wp-core-ui.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #e59e66,0 0 2px 1px #dd823b}.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover,.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,.wp-core-ui .control-panel-themes .customize-themes-section-title:hover{border-left-color:#dd823b;color:#0073aa}.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after{background:#dd823b}.wp-core-ui .control-panel-themes .customize-themes-section-title.selected{color:#0073aa}.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,.wp-core-ui #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#0073aa}.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus{background-color:#fbfbfc;border-color:#dd823b;border-style:solid;box-shadow:0 0 0 1px #dd823b;outline:2px solid transparent}.wp-core-ui .wp-full-overlay-footer .devices button.active:hover,.wp-core-ui .wp-full-overlay-footer .devices button:focus{border-bottom-color:#dd823b}.wp-core-ui .wp-full-overlay-footer .devices button:focus:before,.wp-core-ui .wp-full-overlay-footer .devices button:hover:before{color:#dd823b}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#dd823b}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #e59e66,0 0 2px 1px #dd823b}.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus,.wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover{border-bottom-color:#dd823b;color:#0073aa}.welcome-panel{background-color:#dd823b}[class*=welcome-panel-icon]{background-color:#cf4944} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/colors/sunrise/colors.scss b/tools/storybook/wordpress/css/colors/sunrise/colors.scss new file mode 100644 index 00000000000..75d74d86706 --- /dev/null +++ b/tools/storybook/wordpress/css/colors/sunrise/colors.scss @@ -0,0 +1,7 @@ +$scheme-name: "sunrise"; +$base-color: #cf4944; +$highlight-color: #dd823b; +$notification-color: #ccaf0b; +$menu-submenu-focus-text: lighten( $highlight-color, 35% ); + +@import "../_admin.scss"; diff --git a/tools/storybook/wordpress/css/common-rtl.css b/tools/storybook/wordpress/css/common-rtl.css new file mode 100644 index 00000000000..4efd986de61 --- /dev/null +++ b/tools/storybook/wordpress/css/common-rtl.css @@ -0,0 +1,4123 @@ +/*! This file is auto-generated */ +/* 2 column liquid layout */ +#wpwrap { + height: auto; + min-height: 100%; + width: 100%; + position: relative; + -webkit-font-smoothing: subpixel-antialiased; +} + +#wpcontent { + height: 100%; + padding-right: 20px; +} + +#wpcontent, +#wpfooter { + margin-right: 160px; +} + +.folded #wpcontent, +.folded #wpfooter { + margin-right: 36px; +} + +#wpbody-content { + padding-bottom: 65px; + float: right; + width: 100%; + overflow: visible; +} + +/* inner 2 column liquid layout */ + +.inner-sidebar { + float: left; + clear: left; + display: none; + width: 281px; + position: relative; +} + +.columns-2 .inner-sidebar { + margin-left: auto; + width: 286px; + display: block; +} + +.inner-sidebar #side-sortables, +.columns-2 .inner-sidebar #side-sortables { + min-height: 300px; + width: 280px; + padding: 0; +} + +.has-right-sidebar .inner-sidebar { + display: block; +} + +.has-right-sidebar #post-body { + float: right; + clear: right; + width: 100%; + margin-left: -2000px; +} + +.has-right-sidebar #post-body-content { + margin-left: 300px; + float: none; + width: auto; +} + +/* 2 columns main area */ + +#col-left { + float: right; + width: 35%; +} + +#col-right { + float: left; + width: 65%; +} + +#col-left .col-wrap { + padding: 0 0 0 6px; +} + +#col-right .col-wrap { + padding: 0 6px 0 0; +} + +/* utility classes */ +.alignleft { + float: right; +} + +.alignright { + float: left; +} + +.textleft { + text-align: right; +} + +.textright { + text-align: left; +} + +.clear { + clear: both; +} + +/* modern clearfix */ +.wp-clearfix:after { + content: ""; + display: table; + clear: both; +} + +/* Hide visually but not from screen readers */ +.screen-reader-text, +.screen-reader-text span, +.ui-helper-hidden-accessible { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ +} + +.button .screen-reader-text { + height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */ +} + +.screen-reader-shortcut { + position: absolute; + top: -1000em; +} + +.screen-reader-shortcut:focus { + right: 6px; + top: -25px; + height: auto; + width: auto; + display: block; + font-size: 14px; + font-weight: 600; + padding: 15px 23px 14px; + background: #f0f0f1; + color: #2271b1; + z-index: 100000; + line-height: normal; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + text-decoration: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.hidden, +.js .closed .inside, +.js .hide-if-js, +.no-js .hide-if-no-js, +.js.wp-core-ui .hide-if-js, +.js .wp-core-ui .hide-if-js, +.no-js.wp-core-ui .hide-if-no-js, +.no-js .wp-core-ui .hide-if-no-js { + display: none; +} + +/* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */ +.widget-top, +.menu-item-handle, +.widget-inside, +#menu-settings-column .accordion-container, +#menu-management .menu-edit, +.manage-menus, +table.widefat, +.stuffbox, +p.popular-tags, +.widgets-holder-wrap, +.wp-editor-container, +.popular-tags, +.feature-filter, +.imgedit-group, +.comment-ays { + border: 1px solid #c3c4c7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +table.widefat, +.wp-editor-container, +.stuffbox, +p.popular-tags, +.widgets-holder-wrap, +.popular-tags, +.feature-filter, +.imgedit-group, +.comment-ays { + background: #fff; +} + +/* general */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + background: #f0f0f1; + color: #3c434a; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + line-height: 1.4em; + min-width: 600px; +} + +body.iframe { + min-width: 0; + padding-top: 1px; +} + +body.modal-open { + overflow: hidden; +} + +body.mobile.modal-open #wpwrap { + overflow: hidden; + position: fixed; + height: 100%; +} + +iframe, +img { + border: 0; +} + +td { + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +/* Any change to the default link style must be applied to button-link too. */ +a { + color: #2271b1; + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +a, +div { + outline: 0; +} + +a:hover, +a:active { + color: #135e96; +} + +a:focus, +a:focus .media-icon img, +a:focus .plugin-icon, +.wp-person a:focus .gravatar { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +#adminmenu a:focus { + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: -1px; +} + +.screen-reader-text:focus { + box-shadow: none; + outline: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +p, +.wp-die-message { + font-size: 13px; + line-height: 1.5; + margin: 1em 0; +} + +blockquote { + margin: 1em; +} + +li, +dd { + margin-bottom: 6px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + display: block; + font-weight: 600; +} + +h1 { + color: #1d2327; + font-size: 2em; + margin: .67em 0; +} + +h2, +h3 { + color: #1d2327; + font-size: 1.3em; + margin: 1em 0; +} + +.update-core-php h2 { + margin-top: 4em; +} + +.update-php h2, +.update-messages h2, +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +ul, +ol { + padding: 0; +} + +ul { + list-style: none; +} + +ol { + list-style-type: decimal; + margin-right: 2em; +} + +ul.ul-disc { + list-style: disc outside; +} + +ul.ul-square { + list-style: square outside; +} + +ol.ol-decimal { + list-style: decimal outside; +} + +ul.ul-disc, +ul.ul-square, +ol.ol-decimal { + margin-right: 1.8em; +} + +ul.ul-disc > li, +ul.ul-square > li, +ol.ol-decimal > li { + margin: 0 0 0.5em; +} + +/* rtl:ignore */ +.ltr { + direction: ltr; +} + +/* rtl:ignore */ +.code, +code { + font-family: Consolas, Monaco, monospace; + direction: ltr; + unicode-bidi: embed; +} + +kbd, +code { + padding: 3px 5px 2px; + margin: 0 1px; + background: #f0f0f1; + background: rgba(0, 0, 0, 0.07); + font-size: 13px; +} + +.subsubsub { + list-style: none; + margin: 8px 0 0; + padding: 0; + font-size: 13px; + float: right; + color: #646970; +} + +.subsubsub a { + line-height: 2; + padding: .2em; + text-decoration: none; +} + +.subsubsub a .count, +.subsubsub a.current .count { + color: #50575e; /* #f1f1f1 background */ + font-weight: 400; +} + +.subsubsub a.current { + font-weight: 600; + border: none; +} + +.subsubsub li { + display: inline-block; + margin: 0; + padding: 0; + white-space: nowrap; +} + +/* .widefat - main style for tables */ +.widefat { + border-spacing: 0; + width: 100%; + clear: both; + margin: 0; +} + +.widefat * { + word-wrap: break-word; +} + +.widefat a, +.widefat button.button-link { + text-decoration: none; +} + +.widefat td, +.widefat th { + padding: 8px 10px; +} + +.widefat thead th, +.widefat thead td { + border-bottom: 1px solid #c3c4c7; +} + +.widefat tfoot th, +.widefat tfoot td { + border-top: 1px solid #c3c4c7; + border-bottom: none; +} + +.widefat .no-items td { + border-bottom-width: 0; +} + +.widefat td { + vertical-align: top; +} + +.widefat td, +.widefat td p, +.widefat td ol, +.widefat td ul { + font-size: 13px; + line-height: 1.5em; +} + +.widefat th, +.widefat thead td, +.widefat tfoot td { + text-align: right; + line-height: 1.3em; + font-size: 14px; +} + +.widefat th input, +.updates-table td input, +.widefat thead td input, +.widefat tfoot td input { + margin: 0 8px 0 0; + padding: 0; + vertical-align: text-top; +} + +.widefat .check-column { + width: 2.2em; + padding: 6px 0 25px; + vertical-align: top; +} + +.widefat tbody th.check-column { + padding: 9px 0 22px; +} + +.widefat thead td.check-column, +.widefat tbody th.check-column, +.updates-table tbody td.check-column, +.widefat tfoot td.check-column { + padding: 11px 3px 0 0; +} + +.widefat thead td.check-column, +.widefat tfoot td.check-column { + padding-top: 4px; + vertical-align: middle; +} + +.update-php div.updated, +.update-php div.error { + margin-right: 0; +} + +.no-js .widefat thead .check-column input, +.no-js .widefat tfoot .check-column input { + display: none; +} + +.widefat .num, +.column-comments, +.column-links, +.column-posts { + text-align: center; +} + +.widefat th#comments { + vertical-align: middle; +} + +.wrap { + margin: 10px 2px 0 20px; +} + +.wrap.block-editor-no-js { + padding-right: 20px; +} + +.wrap > h2:first-child, /* Back-compat for pre-4.4 */ +.wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */ +.postbox .inside h2, /* Back-compat for pre-4.4 */ +.wrap h1 { + font-size: 23px; + font-weight: 400; + margin: 0; + padding: 9px 0 4px; + line-height: 1.3; +} + +.wrap h1.wp-heading-inline { + display: inline-block; + margin-left: 5px; +} + +.wp-header-end { + visibility: hidden; + margin: -2px 0 0; +} + +.subtitle { + margin: 0; + padding-right: 25px; + color: #50575e; + font-size: 14px; + font-weight: 400; + line-height: 1; +} + +.subtitle strong { + word-break: break-all; +} + +.wrap .add-new-h2, /* deprecated */ +.wrap .add-new-h2:active, /* deprecated */ +.wrap .page-title-action, +.wrap .page-title-action:active { + margin-right: 4px; + padding: 4px 8px; + position: relative; + top: -3px; + text-decoration: none; + border: 1px solid #2271b1; + border-radius: 2px; + text-shadow: none; + font-weight: 600; + font-size: 13px; + line-height: normal; /* IE8-IE11 need this for buttons */ + color: #2271b1; /* use the standard color used for buttons */ + background: #f6f7f7; + cursor: pointer; +} + +.wrap .wp-heading-inline + .page-title-action { + margin-right: 0; +} + +.wrap .add-new-h2:hover, /* deprecated */ +.wrap .page-title-action:hover { + background: #f0f0f1; + border-color: #0a4b78; + color: #0a4b78; +} + +/* lower specificity: color needs to be overridden by :hover and :active */ +.page-title-action:focus { + color: #0a4b78; +} + +/* Dashicon for language options on General Settings and Profile screens */ +.form-table th label[for="locale"] .dashicons, +.form-table th label[for="WPLANG"] .dashicons { + margin-right: 5px; +} + +.wrap .page-title-action:focus { + border-color: #3582c4; + box-shadow: 0 0 0 1px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.wrap h1.long-header { + padding-left: 0; +} + +.wp-dialog { + background-color: #fff; +} + +.widgets-chooser ul, +#widgets-left .widget-in-question .widget-top, +#available-widgets .widget-top:hover, +div#widgets-right .widget-top:hover, +#widgets-left .widget-top:hover { + border-color: #8c8f94; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.sorthelper { + background-color: #c5d9ed; +} + +.ac_match, +.subsubsub a.current { + color: #000; +} + +.striped > tbody > :nth-child(odd), +ul.striped > :nth-child(odd), +.alternate { + background-color: #f6f7f7; +} + +.bar { + background-color: #f0f0f1; + border-left-color: #4f94d4; +} + +/* Helper classes for plugins to leverage the active WordPress color scheme */ + +.highlight { + background-color: #f0f6fc; + color: #3c434a; +} + +.wp-ui-primary { + color: #fff; + background-color: #2c3338; +} +.wp-ui-text-primary { + color: #2c3338; +} + +.wp-ui-highlight { + color: #fff; + background-color: #2271b1; +} +.wp-ui-text-highlight { + color: #2271b1; +} + +.wp-ui-notification { + color: #fff; + background-color: #d63638; +} +.wp-ui-text-notification { + color: #d63638; +} + +.wp-ui-text-icon { + color: #8c8f94; /* same as new icons */ +} + +/* For emoji replacement images */ +img.emoji { + display: inline !important; + border: none !important; + height: 1em !important; + width: 1em !important; + margin: 0 .07em !important; + vertical-align: -0.1em !important; + background: none !important; + padding: 0 !important; + box-shadow: none !important; +} + +/*------------------------------------------------------------------------------ + 1.0 - Text Styles +------------------------------------------------------------------------------*/ + +.widget .widget-top, +.postbox .hndle, +.stuffbox .hndle, +.control-section .accordion-section-title, +.sidebar-name, +#nav-menu-header, +#nav-menu-footer, +.menu-item-handle, +.checkbox, +.side-info, +#your-profile #rich_editing, +.widefat thead th, +.widefat thead td, +.widefat tfoot th, +.widefat tfoot td { + line-height: 1.4em; +} + +.widget .widget-top, +.menu-item-handle { + background: #f6f7f7; + color: #1d2327; +} + +.stuffbox .hndle { + border-bottom: 1px solid #c3c4c7; +} + +.quicktags { + background-color: #c3c4c7; + color: #000; + font-size: 12px; +} + +.icon32 { + display: none; +} + +/* @todo can we combine these into a class or use an existing dashicon one? */ +.welcome-panel .welcome-panel-close:before, +.tagchecklist .ntdelbutton .remove-tag-icon:before, +#bulk-titles .ntdelbutton:before, +.notice-dismiss:before { + background: none; + color: #787c82; + content: "\f153"; + display: block; + font: normal 16px/20px dashicons; + speak: never; + height: 20px; + text-align: center; + width: 20px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.welcome-panel .welcome-panel-close:before { + margin: 0; +} + +.tagchecklist .ntdelbutton .remove-tag-icon:before { + margin-right: 2px; + border-radius: 50%; + color: #2271b1; + /* vertically center the icon cross browsers */ + line-height: 1.28; +} + +.tagchecklist .ntdelbutton:focus { + outline: 0; +} + +.tagchecklist .ntdelbutton:hover .remove-tag-icon:before, +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before, +#bulk-titles .ntdelbutton:hover:before, +#bulk-titles .ntdelbutton:focus:before { + color: #d63638; +} + +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.key-labels label { + line-height: 24px; +} + +strong, b { + font-weight: 600; +} + +.pre { + /* https://developer.mozilla.org/en-US/docs/CSS/white-space */ + white-space: pre-wrap; /* css-3 */ + word-wrap: break-word; /* IE 5.5 - 7 */ +} + +.howto { + color: #646970; + display: block; +} + +p.install-help { + margin: 8px 0; + font-style: italic; +} + +.no-break { + white-space: nowrap; +} + +hr { + border: 0; + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #f6f7f7; +} + +.row-actions span.delete a, +.row-actions span.trash a, +.row-actions span.spam a, +.plugins a.delete, +#all-plugins-table .plugins a.delete, +#search-plugins-table .plugins a.delete, +.submitbox .submitdelete, +#media-items a.delete, +#media-items a.delete-permanently, +#nav-menu-footer .menu-delete, +#delete-link a.delete, +a#remove-post-thumbnail, +.privacy_requests .remove-personal-data .remove-personal-data-handle { + color: #b32d2e; +} + +abbr.required, +span.required, +.file-error, +.row-actions .delete a:hover, +.row-actions .trash a:hover, +.row-actions .spam a:hover, +.plugins a.delete:hover, +#all-plugins-table .plugins a.delete:hover, +#search-plugins-table .plugins a.delete:hover, +.submitbox .submitdelete:hover, +#media-items a.delete:hover, +#media-items a.delete-permanently:hover, +#nav-menu-footer .menu-delete:hover, +#delete-link a.delete:hover, +a#remove-post-thumbnail:hover, +.privacy_requests .remove-personal-data .remove-personal-data-handle:hover { + color: #b32d2e; + border: none; +} + +/*------------------------------------------------------------------------------ + 3.0 - Actions +------------------------------------------------------------------------------*/ + +#major-publishing-actions { + padding: 10px; + clear: both; + border-top: 1px solid #dcdcde; + background: #f6f7f7; +} + +#delete-action { + float: right; + line-height: 2.30769231; /* 30px */ +} + +#delete-link { + line-height: 2.30769231; /* 30px */ + vertical-align: middle; + text-align: right; + margin-right: 8px; +} + +#delete-link a { + text-decoration: none; +} + +#publishing-action { + text-align: left; + float: left; + line-height: 1.9; +} + +#publishing-action .spinner { + float: none; + margin-top: 5px; +} + +#misc-publishing-actions { + padding: 6px 0 0; +} + +.misc-pub-section { + padding: 6px 10px 8px; +} + +.misc-pub-filename { + word-wrap: break-word; +} + +#minor-publishing-actions { + padding: 10px 10px 0; + text-align: left; +} + +#save-post { + float: right; +} + +.preview { + float: left; +} + +#sticky-span { + margin-right: 18px; +} + +.approve, +.unapproved .unapprove { + display: none; +} + +.unapproved .approve, +.spam .approve, +.trash .approve { + display: inline; +} + +td.action-links, +th.action-links { + text-align: left; +} + +#misc-publishing-actions .notice { + margin-right: 10px; + margin-left: 10px; +} + +/* Filter bar */ +.wp-filter { + display: inline-block; + position: relative; + box-sizing: border-box; + margin: 12px 0 25px; + padding: 0 10px; + width: 100%; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + border: 1px solid #c3c4c7; + background: #fff; + color: #50575e; + font-size: 13px; +} + +.wp-filter a { + text-decoration: none; +} + +.filter-count { + display: inline-block; + vertical-align: middle; + min-width: 4em; +} + +.title-count, +.filter-count .count { + display: inline-block; + position: relative; + top: -1px; + padding: 4px 10px; + border-radius: 30px; + background: #646970; + color: #fff; + font-size: 14px; + font-weight: 600; +} + +/* not a part of filter bar, but derived from it, so here for now */ +.title-count { + display: inline; + top: -3px; + margin-right: 5px; + margin-left: 20px; +} + +.filter-items { + float: right; +} + +.filter-links { + display: inline-block; + margin: 0; +} + +.filter-links li { + display: inline-block; + margin: 0; +} + +.filter-links li > a { + display: inline-block; + margin: 0 10px; + padding: 15px 0; + border-bottom: 4px solid #fff; + color: #646970; + cursor: pointer; +} + +.filter-links .current { + box-shadow: none; + border-bottom: 4px solid #646970; + color: #1d2327; +} + +.filter-links li > a:hover, +.filter-links li > a:focus, +.show-filters .filter-links a.current:hover, +.show-filters .filter-links a.current:focus { + color: #135e96; +} + +.wp-filter .search-form { + float: left; + margin: 10px 0; +} + +.wp-filter .search-form input[type="search"] { + margin: 1px 0; + width: 280px; + max-width: 100%; +} + +.wp-filter .search-form select { + margin: 0; +} + +/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */ +.plugin-install-php .wp-filter { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} + +.wp-filter .search-form.search-plugins { + /* This element is a flex item: the inherited float won't have any effect. */ + margin-top: 0; +} + +.wp-filter .search-form.search-plugins select, +.wp-filter .search-form.search-plugins .wp-filter-search { + display: inline-block; + margin-top: 10px; + vertical-align: top; +} + +.wp-filter .button.drawer-toggle { + margin: 10px 9px 0; + padding: 0 6px 0 10px; + border-color: transparent; + background-color: transparent; + color: #646970; + vertical-align: baseline; + box-shadow: none; +} + +.wp-filter .drawer-toggle:before { + content: "\f111"; + margin: 0 0 0 5px; + color: #646970; + font: normal 16px/1 dashicons; + vertical-align: text-bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wp-filter .button.drawer-toggle:hover, +.wp-filter .drawer-toggle:hover:before, +.wp-filter .button.drawer-toggle:focus, +.wp-filter .drawer-toggle:focus:before { + background-color: transparent; + color: #135e96; +} + +.wp-filter .button.drawer-toggle:hover, +.wp-filter .button.drawer-toggle:focus:active { + border-color: transparent; +} + +.wp-filter .button.drawer-toggle:focus { + border-color: #4f94d4; +} + +.wp-filter .button.drawer-toggle:active { + background: transparent; + box-shadow: none; + transform: none; +} + +.wp-filter .drawer-toggle.current:before { + color: #fff; +} + +.filter-drawer, +.wp-filter .favorites-form { + display: none; + margin: 0 -20px 0 -10px; + padding: 20px; + border-top: 1px solid #f0f0f1; + background: #f6f7f7; + overflow: hidden; +} + +.show-filters .filter-drawer, +.show-favorites-form .favorites-form { + display: block; +} + +.show-filters .filter-links a.current { + border-bottom: none; +} + +.show-filters .wp-filter .button.drawer-toggle { + border-radius: 2px; + background: #646970; + color: #fff; +} + +.show-filters .wp-filter .drawer-toggle:hover, +.show-filters .wp-filter .drawer-toggle:focus { + background: #2271b1; +} + +.show-filters .wp-filter .drawer-toggle:before { + color: #fff; +} + +.filter-group { + box-sizing: border-box; + position: relative; + float: right; + margin: 0 0 0 1%; + padding: 20px 10px 10px; + width: 24%; + background: #fff; + border: 1px solid #dcdcde; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +.filter-group legend { + position: absolute; + top: 10px; + display: block; + margin: 0; + padding: 0; + font-size: 1em; + font-weight: 600; +} + +.filter-drawer .filter-group-feature { + margin: 28px 0 0; + list-style-type: none; + font-size: 12px; +} + +.filter-drawer .filter-group-feature input, +.filter-drawer .filter-group-feature label { + line-height: 1.4; +} + +.filter-drawer .filter-group-feature input { + position: absolute; + margin: 0; +} + +.filter-group .filter-group-feature label { + display: block; + margin: 14px 23px 14px 0; +} + +.filter-drawer .buttons { + clear: both; + margin-bottom: 20px; +} + +.filter-drawer .filter-group + .buttons { + margin-bottom: 0; + padding-top: 20px; +} + +.filter-drawer .buttons .button span { + display: inline-block; + opacity: 0.8; + font-size: 12px; + text-indent: 10px; +} + +.wp-filter .button.clear-filters { + display: none; + margin-right: 10px; +} + +.wp-filter .button-link.edit-filters { + padding: 0 5px; + line-height: 2.2; +} + +.filtered-by { + display: none; + margin: 0; +} + +.filtered-by > span { + font-weight: 600; +} + +.filtered-by a { + margin-right: 10px; +} + +.filtered-by .tags { + display: inline; +} + +.filtered-by .tag { + margin: 0 5px; + padding: 4px 8px; + border: 1px solid #dcdcde; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; + font-size: 11px; +} + +.filters-applied .filter-group, +.filters-applied .filter-drawer .buttons, +.filters-applied .filter-drawer br { + display: none; +} + +.filters-applied .filtered-by { + display: block; +} + +.filters-applied .filter-drawer { + padding: 20px; +} + +.show-filters .favorites-form, +.show-filters .content-filterable, +.show-filters.filters-applied.loading-content .content-filterable, +.loading-content .content-filterable, +.error .content-filterable { + display: none; +} + +.show-filters.filters-applied .content-filterable { + display: block; +} + +.loading-content .spinner { + display: block; + margin: 40px auto 0; + float: none; +} + +@media only screen and (max-width: 1120px) { + .filter-drawer { + border-bottom: 1px solid #f0f0f1; + } + + .filter-group { + margin-bottom: 0; + margin-top: 5px; + width: 100%; + } + + .filter-group li { + margin: 10px 0; + } +} + +@media only screen and (max-width: 1000px) { + .filter-items { + float: none; + } + + .wp-filter .media-toolbar-primary, + .wp-filter .media-toolbar-secondary, + .wp-filter .search-form { + float: none; /* Remove float from media-views.css */ + position: relative; + max-width: 100%; + } +} + +@media only screen and (max-width: 782px) { + .filter-group li { + padding: 0; + width: 50%; + } +} + +@media only screen and (max-width: 320px) { + .filter-count { + display: none; + } + + .wp-filter .drawer-toggle { + margin: 10px 0; + } + + .filter-group li, + .wp-filter .search-form input[type="search"] { + width: 100%; + } +} + +/*------------------------------------------------------------------------------ + 4.0 - Notifications +------------------------------------------------------------------------------*/ + +.notice, +div.updated, +div.error { + background: #fff; + border: 1px solid #c3c4c7; + border-right-width: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + margin: 5px 15px 2px; + padding: 1px 12px; +} + +div[class="update-message"] { /* back-compat for pre-4.6 */ + padding: 0.5em 0 0.5em 12px; +} + +.notice p, +.notice-title, +div.updated p, +div.error p, +.form-table td .notice p { + margin: 0.5em 0; + padding: 2px; +} + +.error a { + text-decoration: underline; +} + +.updated a { + padding-bottom: 2px; +} + +.notice-alt { + box-shadow: none; +} + +.notice-large { + padding: 10px 20px; +} + +.notice-title { + display: inline-block; + color: #1d2327; + font-size: 18px; +} + +.wp-core-ui .notice.is-dismissible { + padding-left: 38px; + position: relative; +} + +.notice-dismiss { + position: absolute; + top: 0; + left: 1px; + border: none; + margin: 0; + padding: 9px; + background: none; + color: #787c82; + cursor: pointer; +} + +.notice-dismiss:hover:before, +.notice-dismiss:active:before, +.notice-dismiss:focus:before { + color: #d63638; +} + +.notice-dismiss:focus { + outline: none; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.notice-success, +div.updated { + border-right-color: #00a32a; +} + +.notice-success.notice-alt { + background-color: #edfaef; +} + +.notice-warning { + border-right-color: #dba617; +} + +.notice-warning.notice-alt { + background-color: #fcf9e8; +} + +.notice-error, +div.error { + border-right-color: #d63638; +} + +.notice-error.notice-alt { + background-color: #fcf0f1; +} + +.notice-info { + border-right-color: #72aee6; +} + +.notice-info.notice-alt { + background-color: #f0f6fc; +} + +.update-message p:before, +.updating-message p:before, +.updated-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + display: inline-block; + font: normal 20px/1 'dashicons'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.wrap .notice, +.wrap div.updated, +.wrap div.error, +.media-upload-form .notice, +.media-upload-form div.error { + margin: 5px 0 15px; +} + +.wrap #templateside .notice { + display: block; + margin: 0; + padding: 5px 8px; + font-weight: 600; + text-decoration: none; +} + +.wrap #templateside span.notice { + margin-right: -12px; +} + +#templateside li.notice a { + padding: 0; +} + +/* Update icon. */ +.update-message p:before, +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before { + color: #d63638; + content: "\f463"; +} + +/* Spins the update icon. */ +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before, +.plugins .column-auto-updates .dashicons-update.spin, +.theme-overlay .theme-autoupdate .dashicons-update.spin { + animation: rotation 2s infinite linear; +} + +@media (prefers-reduced-motion: reduce) { + .updating-message p:before, + .import-php .updating-message:before, + .button.updating-message:before, + .button.installing:before, + .plugins .column-auto-updates .dashicons-update.spin, + .theme-overlay .theme-autoupdate .dashicons-update.spin { + animation: none; + } +} + +.theme-overlay .theme-autoupdate .dashicons-update.spin { + margin-left: 3px; +} + +/* Updated icon (check mark). */ +.updated-message p:before, +.installed p:before, +.button.updated-message:before { + color: #68de7c; + content: "\f147"; +} + +/* Error icon. */ +.update-message.notice-error p:before { + color: #d63638; + content: "\f534"; +} + +.wrap .notice p:before, +.import-php .updating-message:before { + margin-left: 6px; + vertical-align: bottom; +} + +#update-nag, +.update-nag { + display: inline-block; + line-height: 1.4; + padding: 11px 15px; + font-size: 14px; + margin: 25px 2px 0 20px; +} + +ul#dismissed-updates { + display: none; +} + +#dismissed-updates li > p { + margin-top: 0; +} + +#dismiss, +#undismiss { + margin-right: 0.5em; +} + +form.upgrade { + margin-top: 8px; +} + +form.upgrade .hint { + font-style: italic; + font-size: 85%; + margin: -0.5em 0 2em; +} + +.update-php .spinner { + float: none; + margin: -4px 0; +} + +h2.wp-current-version { + margin-bottom: .3em; +} + +p.update-last-checked { + margin-top: 0; +} + +p.auto-update-status { + margin-top: 2em; + line-height: 1.8; +} + +#ajax-loading, +.ajax-loading, +.ajax-feedback, +.imgedit-wait-spin, +.list-ajax-loading { /* deprecated */ + visibility: hidden; +} + +#ajax-response.alignleft { + margin-right: 2em; +} + +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + margin: 3px -2px 0 5px; +} + +.button-primary.updating-message:before { + color: #fff; +} + +.button-primary.updated-message:before { + color: #9ec2e6; +} + +.button.updated-message { + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +@media aural { + .wrap .notice p:before, + .button.installing:before, + .button.installed:before, + .update-message p:before { + speak: never; + } +} + + +/* @todo: this does not need its own section anymore */ +/*------------------------------------------------------------------------------ + 6.0 - Admin Header +------------------------------------------------------------------------------*/ +#adminmenu a, +#taglist a, +#catlist a { + text-decoration: none; +} + +/*------------------------------------------------------------------------------ + 6.1 - Screen Options Tabs +------------------------------------------------------------------------------*/ + +#screen-options-wrap, +#contextual-help-wrap { + margin: 0; + padding: 8px 20px 12px; + position: relative; +} + +#contextual-help-wrap { + overflow: auto; + margin-right: 0; +} + +#screen-meta-links { + float: left; + margin: 0 0 0 20px; +} + +/* screen options and help tabs revert */ +#screen-meta { + display: none; + margin: 0 0 -1px 20px; + position: relative; + background-color: #fff; + border: 1px solid #c3c4c7; + border-top: none; + box-shadow: 0 0 0 transparent; +} + +#screen-options-link-wrap, +#contextual-help-link-wrap { + float: right; + margin: 0 6px 0 0; +} + +#screen-meta-links .screen-meta-toggle { + position: relative; + top: 0; +} + +#screen-meta-links .show-settings { + border: 1px solid #c3c4c7; + border-top: none; + height: auto; + margin-bottom: 0; + padding: 3px 16px 3px 6px; + background: #fff; + border-radius: 0 0 4px 4px; + color: #646970; + line-height: 1.7; + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; +} + +#screen-meta-links .show-settings:hover, +#screen-meta-links .show-settings:active, +#screen-meta-links .show-settings:focus { + color: #2c3338; +} + +#screen-meta-links .show-settings:focus { + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); +} + +#screen-meta-links .show-settings:active { + transform: none; +} + +#screen-meta-links .show-settings:after { + left: 0; + content: "\f140"; + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + padding: 0 0 0 5px; + bottom: 2px; + position: relative; + vertical-align: bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none; +} + +#screen-meta-links .screen-meta-active:after { + content: "\f142"; +} + +/* end screen options and help tabs */ + +.toggle-arrow { + background-repeat: no-repeat; + background-position: top right; + background-color: transparent; + height: 22px; + line-height: 22px; + display: block; +} + +.toggle-arrow-active { + background-position: bottom right; +} + +#screen-options-wrap h5, /* Back-compat for old plugins */ +#screen-options-wrap legend, +#contextual-help-wrap h5 { + margin: 0; + padding: 8px 0; + font-size: 13px; + font-weight: 600; +} + +.metabox-prefs label { + display: inline-block; + padding-left: 15px; + line-height: 2.35; +} + +#number-of-columns { + display: inline-block; + vertical-align: middle; + line-height: 30px; +} + +.metabox-prefs input[type=checkbox] { + margin-top: 0; + margin-left: 6px; +} + +.metabox-prefs label input, +.metabox-prefs label input[type=checkbox] { + margin: -4px 0 0 5px; +} + +.metabox-prefs .columns-prefs label input { + margin: -1px 0 0 2px; +} + +.metabox-prefs label a { + display: none; +} + +.metabox-prefs .screen-options input, +.metabox-prefs .screen-options label { + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.metabox-prefs .screen-options .screen-per-page { + margin-left: 15px; + padding-left: 0; +} + +.metabox-prefs .screen-options label { + line-height: 2.2; + padding-left: 0; +} + +.screen-options + .screen-options { + margin-top: 10px; +} + +.metabox-prefs .submit { + margin-top: 1em; + padding: 0; +} + +/*------------------------------------------------------------------------------ + 6.2 - Help Menu +------------------------------------------------------------------------------*/ + +#contextual-help-wrap { + padding: 0; +} + +#contextual-help-columns { + position: relative; +} + +#contextual-help-back { + position: absolute; + top: 0; + bottom: 0; + right: 150px; + left: 170px; + border: 1px solid #c3c4c7; + border-top: none; + border-bottom: none; + background: #f0f6fc; +} + +#contextual-help-wrap.no-sidebar #contextual-help-back { + left: 0; + border-left-width: 0; + border-bottom-left-radius: 2px; +} + +.contextual-help-tabs { + float: right; + width: 150px; + margin: 0; +} + +.contextual-help-tabs ul { + margin: 1em 0; +} + +.contextual-help-tabs li { + margin-bottom: 0; + list-style-type: none; + border-style: solid; + border-width: 0 2px 0 0; + border-color: transparent; +} + +.contextual-help-tabs a { + display: block; + padding: 5px 12px 5px 5px; + line-height: 1.4; + text-decoration: none; + border: 1px solid transparent; + border-left: none; + border-right: none; +} + +.contextual-help-tabs a:hover { + color: #2c3338; +} + +.contextual-help-tabs .active { + padding: 0; + margin: 0 0 0 -1px; + border-right: 2px solid #72aee6; + background: #f0f6fc; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02); +} + +.contextual-help-tabs .active a { + border-color: #c3c4c7; + color: #2c3338; +} + +.contextual-help-tabs-wrap { + padding: 0 20px; + overflow: auto; +} + +.help-tab-content { + display: none; + margin: 0 0 12px 22px; + line-height: 1.6; +} + +.help-tab-content.active { + display: block; +} + +.help-tab-content ul li { + list-style-type: disc; + margin-right: 18px; +} + +.contextual-help-sidebar { + width: 150px; + float: left; + padding: 0 12px 0 8px; + overflow: auto; +} + +/*------------------------------------------------------------------------------ + 8.0 - Layout Blocks +------------------------------------------------------------------------------*/ + +html.wp-toolbar { + padding-top: 32px; + box-sizing: border-box; + -ms-overflow-style: scrollbar; /* See ticket #48545 */ +} + +.widefat th, +.widefat td { + color: #50575e; +} + +.widefat th, +.widefat thead td, +.widefat tfoot td { + font-weight: 400; +} + +.widefat thead tr th, +.widefat thead tr td, +.widefat tfoot tr th, +.widefat tfoot tr td { + color: #2c3338; +} + +.widefat td p { + margin: 2px 0 0.8em; +} + +.widefat p, +.widefat ol, +.widefat ul { + color: #2c3338; +} + +.widefat .column-comment p { + margin: 0.6em 0; +} + +.widefat .column-comment ul { + list-style: initial; + margin-right: 2em; +} + +/* Screens with postboxes */ +.postbox-container { + float: right; +} + +.postbox-container .meta-box-sortables { + box-sizing: border-box; +} + +#wpbody-content .metabox-holder { + padding-top: 10px; +} + +.metabox-holder .postbox-container .meta-box-sortables { + /* The jQuery UI Sortables need some initial height to work properly. */ + min-height: 1px; + position: relative; +} + +#post-body-content { + width: 100%; + min-width: 463px; + float: right; +} + +#post-body.columns-2 #postbox-container-1 { + float: left; + margin-left: -300px; + width: 280px; +} + +#post-body.columns-2 #side-sortables { + min-height: 250px; +} + +/* one column on the dash */ +@media only screen and (max-width: 799px) { + #wpbody-content .metabox-holder .postbox-container .empty-container { + outline: none; + height: 0; + min-height: 0; + } +} + +.js .widget .widget-top, +.js .postbox .hndle { + cursor: move; +} + +.js .widget .widget-top.is-non-sortable, +.js .postbox .hndle.is-non-sortable { + cursor: auto; +} + +/* Configurable dashboard widgets "Configure" edit-box link. */ +.hndle a { + font-size: 12px; + font-weight: 400; +} + +.postbox-header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #c3c4c7; +} + +.postbox-header .hndle { + flex-grow: 1; + /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */ + display: flex; + justify-content: space-between; + align-items: center; +} + +.postbox-header .handle-actions { + flex-shrink: 0; +} + +/* Post box order and toggle buttons. */ +.postbox .handle-order-higher, +.postbox .handle-order-lower, +.postbox .handlediv { + width: 36px; + height: 36px; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; +} + +.postbox .handle-order-higher, +.postbox .handle-order-lower { + color: #787c82; + width: 1.62rem; +} + +/* Post box order buttons in the block editor meta boxes area. */ +.edit-post-meta-boxes-area .postbox .handle-order-higher, +.edit-post-meta-boxes-area .postbox .handle-order-lower { + width: 44px; + height: 44px; + color: #1d2327 +} + +.postbox .handle-order-higher[aria-disabled="true"], +.postbox .handle-order-lower[aria-disabled="true"] { + cursor: default; + color: #a7aaad; +} + +.sortable-placeholder { + border: 1px dashed #c3c4c7; + margin-bottom: 20px; +} + +.postbox, +.stuffbox { + margin-bottom: 20px; + padding: 0; + line-height: 1; +} + +.postbox.closed { + border-bottom: 0; +} + +/* user-select is not a part of the CSS standard - may change behavior in the future */ +.postbox .hndle, +.stuffbox .hndle { + -webkit-user-select: none; + user-select: none; +} + +.postbox .inside { + padding: 0 12px 12px; + line-height: 1.4; + font-size: 13px; +} + +.stuffbox .inside { + padding: 0; + line-height: 1.4; + font-size: 13px; + margin-top: 0; +} + +.postbox .inside { + margin: 11px 0; + position: relative; +} + +.postbox .inside > p:last-child, +.rss-widget ul li:last-child { + margin-bottom: 1px !important; +} + +.postbox.closed h3 { + border: none; + box-shadow: none; +} + +.postbox table.form-table { + margin-bottom: 0; +} + +.postbox table.widefat { + box-shadow: none; +} + +.temp-border { + border: 1px dotted #c3c4c7; +} + +.columns-prefs label { + padding: 0 0 0 10px; +} + +/* @todo: what is this doing here */ +#dashboard_right_now .versions .b, +#post-status-display, +#post-visibility-display, +#adminmenu .wp-submenu li.current, +#adminmenu .wp-submenu li.current a, +#adminmenu .wp-submenu li.current a:hover, +.media-item .percent, +.plugins .name, +#pass-strength-result.strong, +#pass-strength-result.short, +#ed_reply_toolbar #ed_reply_strong, +.item-controls .item-order a, +.feature-filter .feature-name, +#comment-status-display { + font-weight: 600; +} + +/*------------------------------------------------------------------------------ + 21.0 - Admin Footer +------------------------------------------------------------------------------*/ + +#wpfooter { + position: absolute; + bottom: 0; + right: 0; + left: 0; + padding: 10px 20px; + color: #50575e; +} + +#wpfooter p { + font-size: 13px; + margin: 0; + line-height: 1.55; +} + +#footer-thankyou { + font-style: italic; +} + +/*------------------------------------------------------------------------------ + 25.0 - Tabbed Admin Screen Interface (Experimental) +------------------------------------------------------------------------------*/ + +.nav-tab { + float: right; + border: 1px solid #c3c4c7; + border-bottom: none; + margin-right: 0.5em; /* half the font size so set the font size properly */ + padding: 5px 10px; + font-size: 14px; + line-height: 1.71428571; + font-weight: 600; + background: #dcdcde; + color: #50575e; + text-decoration: none; + white-space: nowrap; +} + +h3 .nav-tab, /* Back-compat for pre-4.4 */ +.nav-tab-small .nav-tab { + padding: 5px 14px; + font-size: 12px; + line-height: 1.33; +} + +.nav-tab:hover, +.nav-tab:focus { + background-color: #fff; + color: #3c434a; +} + +.nav-tab-active, +.nav-tab:focus:active { + box-shadow: none; +} + +.nav-tab-active { + margin-bottom: -1px; + color: #3c434a; +} + +.nav-tab-active, +.nav-tab-active:hover, +.nav-tab-active:focus, +.nav-tab-active:focus:active { + border-bottom: 1px solid #f0f0f1; + background: #f0f0f1; + color: #000; +} + +h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ +.wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */ +.nav-tab-wrapper { + border-bottom: 1px solid #c3c4c7; + margin: 0; + padding-top: 9px; + padding-bottom: 0; + line-height: inherit; +} + +/* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */ +.nav-tab-wrapper:not(.wp-clearfix):after { + content: ""; + display: table; + clear: both; +} + +/*------------------------------------------------------------------------------ + 26.0 - Misc +------------------------------------------------------------------------------*/ + +.spinner { + background: url(../images/spinner.gif) no-repeat; + background-size: 20px 20px; + display: inline-block; + visibility: hidden; + float: left; + vertical-align: middle; + opacity: 0.7; + filter: alpha(opacity=70); + width: 20px; + height: 20px; + margin: 4px 10px 0; +} + +.spinner.is-active, +.loading-content .spinner { + visibility: visible; +} + +#template > div { + margin-left: 16em; +} +#template .notice { + margin-top: 1em; + margin-left: 3%; +} +#template .notice p { + width: auto; +} +#template .submit .spinner { + float: none; +} + +.metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */ +.metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */ +.metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ +.metabox-holder h2.hndle { + font-size: 14px; + padding: 8px 12px; + margin: 0; + line-height: 1.4; +} + +/* Back-compat for nav-menus screen */ +.nav-menus-php .metabox-holder h3 { + padding: 10px 14px 11px 10px; + line-height: 1.5; +} + +#templateside ul li a { + text-decoration: none; +} + +.plugin-install #description, +.plugin-install-network #description { + width: 60%; +} + +table .vers, +table .column-visible, +table .column-rating { + text-align: right; +} + +.attention, +.error-message { + color: #d63638; + font-weight: 600; +} + +/* Scrollbar fix for bulk upgrade iframe */ +body.iframe { + height: 98%; +} + +/* Upgrader styles, Specific to Language Packs */ +.lp-show-latest p { + display: none; +} +.lp-show-latest p:last-child, +.lp-show-latest .lp-error p { + display: block; +} + +/* - Only used once or twice in all of WP - deprecate for global style +------------------------------------------------------------------------------*/ +.media-icon { + width: 62px; /* icon + border */ + text-align: center; +} + +.media-icon img { + border: 1px solid #dcdcde; + border: 1px solid rgba(0, 0, 0, 0.07); +} + +#howto { + font-size: 11px; + margin: 0 5px; + display: block; +} + +.importers { + font-size: 16px; + width: auto; +} + +.importers td { + padding-left: 14px; + line-height: 1.4; +} + +.importers .import-system { + max-width: 250px; +} + +.importers td.desc { + max-width: 500px; +} + +.importer-title, +.importer-desc, +.importer-action { + display: block; +} + +.importer-title { + color: #000; + font-size: 14px; + font-weight: 400; + margin-bottom: .2em; +} + +.importer-action { + line-height: 1.55; /* Same as with .updating-message */ + color: #50575e; + margin-bottom: 1em; +} + +#post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */ +#post-body #post-body-content #namediv h2 { + margin-top: 0; +} + +.edit-comment-author { + color: #1d2327; + border-bottom: 1px solid #f0f0f1; +} + +#namediv h3 label, /* Back-compat for pre-4.4 */ +#namediv h2 label { + vertical-align: baseline; +} + +#namediv table { + width: 100%; +} + +#namediv td.first { + width: 10px; + white-space: nowrap; +} + +#namediv input { + width: 100%; +} + +#namediv p { + margin: 10px 0; +} + +/* - Used - but could/should be deprecated with a CSS reset +------------------------------------------------------------------------------*/ +.zerosize { + height: 0; + width: 0; + margin: 0; + border: 0; + padding: 0; + overflow: hidden; + position: absolute; +} + +br.clear { + height: 2px; + line-height: 0.15; +} + +.checkbox { + border: none; + margin: 0; + padding: 0; +} + +fieldset { + border: 0; + padding: 0; + margin: 0; +} + +.post-categories { + display: inline; + margin: 0; + padding: 0; +} + +.post-categories li { + display: inline; +} + +/* Star Ratings - Back-compat for pre-3.8 */ +div.star-holder { + position: relative; + height: 17px; + width: 100px; + background: url(../images/stars.png?ver=20121108) repeat-x bottom right; +} + +div.star-holder .star-rating { + background: url(../images/stars.png?ver=20121108) repeat-x top right; + height: 17px; + float: right; +} + +/* Star Ratings */ +.star-rating { + white-space: nowrap; +} +.star-rating .star { + display: inline-block; + width: 20px; + height: 20px; + -webkit-font-smoothing: antialiased; + font-size: 20px; + line-height: 1; + font-family: dashicons; + text-decoration: inherit; + font-weight: 400; + font-style: normal; + vertical-align: top; + transition: color .1s ease-in; + text-align: center; + color: #dba617; +} + +.star-rating .star-full:before { + content: "\f155"; +} + +.star-rating .star-half:before { + content: "\f459"; +} + +.rtl .star-rating .star-half { + transform: rotateY(-180deg); +} + +.star-rating .star-empty:before { + content: "\f154"; +} + +div.action-links { + font-weight: 400; + margin: 6px 0 0; +} + +/* Plugin install thickbox */ +#plugin-information { + background: #fff; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + height: 100%; + padding: 0; +} + +#plugin-information-scrollable { + overflow: auto; + -webkit-overflow-scrolling: touch; + height: 100%; +} + +#plugin-information-title { + padding: 0 26px; + background: #f6f7f7; + font-size: 22px; + font-weight: 600; + line-height: 2.4; + position: relative; + height: 56px; +} + +#plugin-information-title.with-banner { + margin-left: 0; + height: 250px; + background-size: cover; +} + +#plugin-information-title h2 { + font-size: 1em; + font-weight: 600; + padding: 0; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#plugin-information-title.with-banner h2 { + position: relative; + font-family: "Helvetica Neue", sans-serif; + display: inline-block; + font-size: 30px; + line-height: 1.68; + box-sizing: border-box; + max-width: 100%; + padding: 0 15px; + margin-top: 174px; + color: #fff; + background: rgba(29, 35, 39, 0.9); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); + border-radius: 8px; +} + +#plugin-information-title div.vignette { + display: none; +} + +#plugin-information-title.with-banner div.vignette { + position: absolute; + display: block; + top: 0; + right: 0; + height: 250px; + width: 100%; + background: transparent; + box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +#plugin-information-tabs { + padding: 0 16px; + position: relative; + left: 0; + right: 0; + min-height: 36px; + font-size: 0; + z-index: 1; + border-bottom: 1px solid #dcdcde; + background: #f6f7f7; +} + +#plugin-information-tabs a { + position: relative; + display: inline-block; + padding: 9px 10px; + margin: 0; + height: 18px; + line-height: 1.3; + font-size: 14px; + text-decoration: none; + transition: none; +} + +#plugin-information-tabs a.current { + margin: 0 -1px -1px; + background: #fff; + border: 1px solid #dcdcde; + border-bottom-color: #fff; + padding-top: 8px; + color: #2c3338; +} + +#plugin-information-tabs.with-banner a.current { + border-top: none; + padding-top: 9px; +} + +#plugin-information-tabs a:active, +#plugin-information-tabs a:focus { + outline: none; +} + +#plugin-information-content { + overflow: hidden; /* equal height column trick */ + background: #fff; + position: relative; + top: 0; + left: 0; + right: 0; + min-height: 100%; + /* Height of title + tabs + install now */ + min-height: calc( 100% - 152px ); +} + +#plugin-information-content.with-banner { + /* Height of banner + tabs + install now */ + min-height: calc( 100% - 346px ); +} + +#section-holder { + position: relative; + top: 0; + left: 250px; + bottom: 0; + right: 0; + margin-top: 10px; + margin-left: 250px; /* FYI box */ + padding: 10px 26px 99999px; /* equal height column trick */ + margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */ +} + +#section-holder .notice { + margin: 5px 0 15px; +} + +#section-holder .updated { + margin: 16px 0; +} + +#plugin-information .fyi { + float: left; + position: relative; + top: 0; + left: 0; + padding: 16px 16px 99999px; /* equal height column trick */ + margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */ + width: 217px; + border-right: 1px solid #dcdcde; + background: #f6f7f7; + color: #646970; +} + +#plugin-information .fyi strong { + color: #3c434a; +} + +#plugin-information .fyi h3 { + font-weight: 600; + text-transform: uppercase; + font-size: 12px; + color: #646970; + margin: 24px 0 8px; +} + +#plugin-information .fyi h2 { + font-size: 0.9em; + margin-bottom: 0; + margin-left: 0; +} + +#plugin-information .fyi ul { + padding: 0; + margin: 0; + list-style: none; +} + +#plugin-information .fyi li { + margin: 0 0 10px; +} + +#plugin-information .fyi-description { + margin-top: 0; +} + +#plugin-information .counter-container { + margin: 3px 0; +} + +#plugin-information .counter-label { + float: right; + margin-left: 5px; + min-width: 55px; +} + +#plugin-information .counter-back { + height: 17px; + width: 92px; + background-color: #dcdcde; + float: right; +} + +#plugin-information .counter-bar { + height: 17px; + background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */ + float: right; +} + +#plugin-information .counter-count { + margin-right: 5px; +} + +#plugin-information .fyi ul.contributors { + margin-top: 10px; +} + +#plugin-information .fyi ul.contributors li { + display: inline-block; + margin-left: 8px; + vertical-align: middle; +} + +#plugin-information .fyi ul.contributors li { + display: inline-block; + margin-left: 8px; + vertical-align: middle; +} + +#plugin-information .fyi ul.contributors li img { + vertical-align: middle; + margin-left: 4px; +} + +#plugin-information-footer { + padding: 13px 16px; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 40px; /* actual height: 40+13+13+1=67 */ + border-top: 1px solid #dcdcde; + background: #f6f7f7; +} + +/* rtl:ignore */ +#plugin-information .section { + direction: ltr; +} + +/* rtl:ignore */ +#plugin-information .section ul, +#plugin-information .section ol { + list-style-type: disc; + margin-left: 24px; +} + +#plugin-information .section, +#plugin-information .section p { + font-size: 14px; + line-height: 1.7; +} + +#plugin-information #section-screenshots ol { + list-style: none; + margin: 0; +} + +#plugin-information #section-screenshots li img { + vertical-align: text-top; + margin-top: 16px; + max-width: 100%; + width: auto; + height: auto; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +/* rtl:ignore */ +#plugin-information #section-screenshots li p { + font-style: italic; + padding-left: 20px; +} + +#plugin-information pre { + padding: 7px; + overflow: auto; + border: 1px solid #c3c4c7; +} + +#plugin-information blockquote { + border-right: 2px solid #dcdcde; + color: #646970; + font-style: italic; + margin: 1em 0; + padding: 0 1em 0 0; +} + +/* rtl:ignore */ +#plugin-information .review { + overflow: hidden; /* clearfix */ + width: 100%; + margin-bottom: 20px; + border-bottom: 1px solid #dcdcde; +} + +#plugin-information .review-title-section { + overflow: hidden; /* clearfix */ +} + +/* rtl:ignore */ +#plugin-information .review-title-section h4 { + display: inline-block; + float: left; + margin: 0 6px 0 0; +} + +#plugin-information .reviewer-info p { + clear: both; + margin: 0; + padding-top: 2px; +} + +/* rtl:ignore */ +#plugin-information .reviewer-info .avatar { + float: left; + margin: 4px 6px 0 0; +} + +/* rtl:ignore */ +#plugin-information .reviewer-info .star-rating { + float: left; +} + +/* rtl:ignore */ +#plugin-information .review-meta { + float: left; + margin-left: 0.75em; +} + +/* rtl:ignore */ +#plugin-information .review-body { + float: left; + width: 100%; +} + +.plugin-version-author-uri { + font-size: 13px; +} + +/* For non-js plugin installation screen ticket #36430. */ +.update-php .button.button-primary { + margin-left: 1em; +} + +@media screen and (max-width: 771px) { + #plugin-information-title.with-banner { + height: 100px; + } + + #plugin-information-title.with-banner h2 { + margin-top: 30px; + font-size: 20px; + line-height: 2; + max-width: 85%; + } + + #plugin-information-title.with-banner div.vignette { + height: 100px; + } + + #plugin-information-tabs { + overflow: hidden; /* clearfix */ + padding: 0; + height: auto; /* let tabs wrap */ + } + + #plugin-information-tabs a.current { + margin-bottom: 0; + border-bottom: none; + } + + #plugin-information .fyi { + float: none; + border: 1px solid #dcdcde; + position: static; + width: auto; + margin: 26px 26px 0; + padding-bottom: 0; /* reset from the two column height fix */ + } + + #section-holder { + position: static; + margin: 0; + padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */ + } + + #plugin-information .fyi h3, + #plugin-information .fyi small { + display: none; + } + + #plugin-information-footer { + padding: 12px 16px 0; + height: 46px; + } +} + +/* Thickbox for the Plugin details modal. */ +#TB_window.plugin-details-modal { + background: #fff; +} + +#TB_window.plugin-details-modal.thickbox-loading:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + right: 50%; + top: 50%; + z-index: -1; + margin: -10px -10px 0 0; + background: #fff url(../images/spinner.gif) no-repeat center; + background-size: 20px 20px; + transform: translateZ(0); +} + +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + + #TB_window.plugin-details-modal.thickbox-loading:before { + background-image: url(../images/spinner-2x.gif); + } +} + +.plugin-details-modal #TB_title { + float: right; + height: 1px; +} + +.plugin-details-modal #TB_ajaxWindowTitle { + display: none; +} + +.plugin-details-modal #TB_closeWindowButton { + right: auto; + left: -30px; + color: #f0f0f1; +} + +.plugin-details-modal #TB_closeWindowButton:hover, +.plugin-details-modal #TB_closeWindowButton:focus { + color: #135e96; + outline: none; + box-shadow: none; +} + +.plugin-details-modal .tb-close-icon { + display: none; +} + +.plugin-details-modal #TB_closeWindowButton:after { + content: "\f335"; + font: normal 32px/29px 'dashicons'; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* move plugin install close icon to top on narrow screens */ +@media screen and (max-width: 830px) { + .plugin-details-modal #TB_closeWindowButton { + left: 0; + top: -30px; + } +} + +/* @todo: move this. */ +img { + border: none; +} + +/* Metabox collapse arrow indicators */ +.sidebar-name .toggle-indicator::before, +.meta-box-sortables .postbox .toggle-indicator::before, +.meta-box-sortables .postbox .order-higher-indicator::before, +.meta-box-sortables .postbox .order-lower-indicator::before, +.bulk-action-notice .toggle-indicator::before, +.privacy-text-box .toggle-indicator::before { + content: "\f142"; + display: inline-block; + font: normal 20px/1 dashicons; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none; +} + +.js .widgets-holder-wrap.closed .toggle-indicator::before, +.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before, +.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before, +.privacy-text-box.closed .toggle-indicator::before { + content: "\f140"; +} + +.postbox .handle-order-higher .order-higher-indicator::before { + content: "\f343"; + color: inherit; +} + +.postbox .handle-order-lower .order-lower-indicator::before { + content: "\f347"; + color: inherit; +} + +.postbox .handle-order-higher .order-higher-indicator::before, +.postbox .handle-order-lower .order-lower-indicator::before { + position: relative; + top: 0.11rem; + width: 20px; + height: 20px; +} + +.postbox .handlediv .toggle-indicator::before { + width: 20px; + border-radius: 50%; +} + +.postbox .handlediv .toggle-indicator::before { + position: relative; + top: 0.05rem; + text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */ +} + +.rtl .postbox .handlediv .toggle-indicator::before { + text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */ +} + +.bulk-action-notice .toggle-indicator::before { + line-height: 16px; + vertical-align: top; + color: #787c82; +} + +.postbox .handle-order-higher:focus, +.postbox .handle-order-lower:focus, +.postbox .handlediv:focus { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.postbox .handle-order-higher:focus .order-higher-indicator::before, +.postbox .handle-order-lower:focus .order-lower-indicator::before, +.postbox .handlediv:focus .toggle-indicator::before { + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +/* @todo: appears to be Press This only and overridden */ +#photo-add-url-div input[type="text"] { + width: 300px; +} + +/* Theme/Plugin file editor */ +.alignleft h2 { + margin: 0; +} + +#template textarea { + font-family: Consolas, Monaco, monospace; + font-size: 13px; + background: #f6f7f7; + -o-tab-size: 4; + tab-size: 4; +} + +#template textarea, +#template .CodeMirror { + width: 100%; + min-height: 60vh; + height: calc( 100vh - 295px ); + border: 1px solid #dcdcde; + box-sizing: border-box; +} + +#templateside > h2 { + padding-top: 6px; + padding-bottom: 7px; + margin: 0; +} + +#templateside ol, +#templateside ul { + margin: 0; + padding: 0; +} +#templateside > ul { + box-sizing: border-box; + margin-top: 0; + overflow: auto; + padding: 0; + min-height: 60vh; + height: calc(100vh - 295px); + background-color: #f6f7f7; + border: 1px solid #dcdcde; + border-right: none; +} +#templateside ul ul { + padding-right: 12px; +} +#templateside > ul > li > ul[role=group] { + padding-right: 0; +} + +/* + * Styles for Theme and Plugin file editors. + */ + +/* Hide collapsed items. */ +[role="treeitem"][aria-expanded="false"] > ul { + display: none; +} + +/* Use arrow dashicons for folder states, but hide from screen readers. */ +[role="treeitem"] span[aria-hidden] { + display: inline; + font-family: dashicons; + font-size: 20px; + position: absolute; + pointer-events: none; +} +[role="treeitem"][aria-expanded="false"] > .folder-label .icon:after { + content: "\f141"; +} +[role="treeitem"][aria-expanded="true"] > .folder-label .icon:after { + content: "\f140"; +} +[role="treeitem"] .folder-label { + display: block; + padding: 3px 12px 3px 3px; + cursor: pointer; +} + +/* Remove outline, and create our own focus and hover styles */ +[role="treeitem"] { + outline: 0; +} +[role="treeitem"] .folder-label.focus { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} +[role="treeitem"].hover, +[role="treeitem"] .folder-label.hover { + background-color: #f0f0f1; +} + +.tree-folder { + margin: 0; + position: relative; +} +[role="treeitem"] li { + position: relative; +} + +/* Styles for folder indicators/depth */ +.tree-folder .tree-folder::after { + content: ""; + display: block; + position: absolute; + right: 2px; + border-right: 1px solid #c3c4c7; + top: -13px; + bottom: 10px; +} +.tree-folder > li::before { + content: ""; + position: absolute; + display: block; + border-right: 1px solid #c3c4c7; + right: 2px; + top: -5px; + height: 18px; + width: 7px; + border-bottom: 1px solid #c3c4c7; +} +.tree-folder > li::after { + content: ""; + position: absolute; + display: block; + border-right: 1px solid #c3c4c7; + right: 2px; + bottom: -7px; + top: 0; +} + +/* current-file needs to adjustment for .notice styles */ +#templateside .current-file { + margin: -4px 0 -2px; +} +.tree-folder > .current-file::before { + right: 4px; + height: 15px; + width: 0; + border-right: none; + top: 3px; +} +.tree-folder > .current-file::after { + bottom: -4px; + height: 7px; + right: 2px; + top: auto; +} + +/* Lines shouldn't continue on last item */ +.tree-folder > li:last-child::after, +.tree-folder li:last-child > .tree-folder::after { + display: none; +} + +#theme-plugin-editor-selector, +#theme-plugin-editor-label, +#documentation label { + font-weight: 600; +} + +#theme-plugin-editor-label { + display: inline-block; + margin-bottom: 1em; +} + +/* rtl:ignore */ +#template textarea, +#docs-list { + direction: ltr; +} + +.fileedit-sub #theme, +.fileedit-sub #plugin { + max-width: 40%; +} +.fileedit-sub .alignright { + text-align: left; +} + +#template p { + width: 97%; +} + +#file-editor-linting-error { + margin-top: 1em; + margin-bottom: 1em; +} +#file-editor-linting-error > .notice { + margin: 0; + display: inline-block; +} +#file-editor-linting-error > .notice > p { + width: auto; +} +#template .submit { + margin-top: 1em; + padding: 0; +} + +#template .submit input[type=submit][disabled] { + cursor: not-allowed; +} +#templateside { + float: left; + width: 16em; + word-wrap: break-word; +} + +#postcustomstuff p.submit { + margin: 0; +} + +#templateside h4 { + margin: 1em 0 0; +} + +#templateside li { + margin: 4px 0; +} + +#templateside li:not(.howto) a, +.theme-editor-php .highlight { + display: block; + padding: 3px 12px 3px 0; + text-decoration: none; +} + +#templateside li:not(.howto) > a:first-of-type { + padding-top: 0; +} + +#templateside li.howto { + padding: 6px 12px 12px; +} + +.theme-editor-php .highlight { + margin: -3px -12px -3px 3px; +} + +#templateside .highlight { + border: none; + font-weight: 600; +} + +.nonessential { + color: #646970; + font-size: 11px; + font-style: italic; + padding-right: 12px; +} + +#documentation { + margin-top: 10px; +} + +#documentation label { + line-height: 1.8; + vertical-align: baseline; +} + +.fileedit-sub { + padding: 10px 0 8px; + line-height: 180%; +} + +#file-editor-warning .file-editor-warning-content { + margin: 25px; +} + +/* @todo: can we use a common class for these? */ +.nav-menus-php .item-edit:before, +.widget-top .widget-action .toggle-indicator:before, +.control-section .accordion-section-title:after, +.accordion-section-title:after { + content: "\f140"; + font: normal 20px/1 dashicons; + speak: never; + display: block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none; +} + +.widget-top .widget-action .toggle-indicator:before { + padding: 1px 0 1px 2px; + border-radius: 50%; +} + +.handlediv, +.postbox .handlediv.button-link, +.item-edit, +.toggle-indicator, +.accordion-section-title:after { + color: #787c82; +} + +.widget-action { + color: #50575e; /* #fafafa background in the Widgets screen */ +} + +.widget-top:hover .widget-action, +.widget-action:focus, +.handlediv:hover, +.handlediv:focus, +.postbox .handlediv.button-link:hover, +.postbox .handlediv.button-link:focus, +.item-edit:hover, +.item-edit:focus, +.sidebar-name:hover .toggle-indicator, +.accordion-section-title:hover:after { + color: #1d2327; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.widget-top .widget-action:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.control-section .accordion-section-title:after, +.accordion-section-title:after { + float: left; + left: 20px; + top: -2px; +} + +.control-section.open .accordion-section-title:after, +#customize-info.open .accordion-section-title:after, +.nav-menus-php .menu-item-edit-active .item-edit:before, +.widget.open .widget-top .widget-action .toggle-indicator:before, +.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before { + content: "\f142"; +} + +/*! + * jQuery UI Draggable/Sortable 1.11.4 + * http://jqueryui.com + * + * Copyright jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ +.ui-draggable-handle, +.ui-sortable-handle { + touch-action: none; +} + +/* Accordion */ +.accordion-section { + border-bottom: 1px solid #dcdcde; + margin: 0; +} + +.accordion-section.open .accordion-section-content, +.no-js .accordion-section .accordion-section-content { + display: block; +} + +.accordion-section.open:hover { + border-bottom-color: #dcdcde; +} + +.accordion-section-content { + display: none; + padding: 10px 20px 15px; + overflow: hidden; + background: #fff; +} + +.accordion-section-title { + margin: 0; + padding: 12px 15px 15px; + position: relative; + border-right: 1px solid #dcdcde; + border-left: 1px solid #dcdcde; + -webkit-user-select: none; + user-select: none; +} + +.js .accordion-section-title { + cursor: pointer; +} + +.js .accordion-section-title:after { + position: absolute; + top: 12px; + left: 10px; + z-index: 1; +} + +.accordion-section-title:focus { + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.accordion-section-title:hover:after, +.accordion-section-title:focus:after { + border-color: #a7aaad transparent; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.cannot-expand .accordion-section-title { + cursor: auto; +} + +.cannot-expand .accordion-section-title:after { + display: none; +} + +.control-section .accordion-section-title, +.customize-pane-child .accordion-section-title { + border-right: none; + border-left: none; + padding: 10px 14px 11px 10px; + line-height: 1.55; + background: #fff; +} + +.control-section .accordion-section-title:after, +.customize-pane-child .accordion-section-title:after { + top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */ +} + +.js .control-section:hover .accordion-section-title, +.js .control-section .accordion-section-title:hover, +.js .control-section.open .accordion-section-title, +.js .control-section .accordion-section-title:focus { + color: #1d2327; + background: #f6f7f7; +} + +.control-section.open .accordion-section-title { + /* When expanded */ + border-bottom: 1px solid #dcdcde; +} + +/* Edit Site */ +.network-admin .edit-site-actions { + margin-top: 0; +} + +/* My Sites */ +.my-sites { + display: block; + overflow: auto; + zoom: 1; +} + +.my-sites li { + display: block; + padding: 8px 3%; + min-height: 130px; + margin: 0; +} + +@media only screen and (max-width: 599px) { + .my-sites li { + min-height: 0; + } +} + +@media only screen and (min-width: 600px) { + .my-sites.striped li { + background-color: #fff; + position: relative; + } + .my-sites.striped li:after { + content: ""; + width: 1px; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: #c3c4c7; + } + +} +@media only screen and (min-width: 600px) and (max-width: 699px) { + .my-sites li{ + float: right; + width: 44%; + } + .my-sites.striped li { + background-color: #fff; + } + .my-sites.striped li:nth-of-type(2n+1) { + clear: right; + } + .my-sites.striped li:nth-of-type(2n+2):after { + content: none; + } + .my-sites li:nth-of-type(4n+1), + .my-sites li:nth-of-type(4n+2) { + background-color: #f6f7f7; + } + +} + +@media only screen and (min-width: 700px) and (max-width: 1199px) { + .my-sites li { + float: right; + width: 27.333333%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(3n+3):after { + content: none; + } + .my-sites li:nth-of-type(6n+1), + .my-sites li:nth-of-type(6n+2), + .my-sites li:nth-of-type(6n+3) { + background-color: #f6f7f7; + } +} + +@media only screen and (min-width: 1200px) and (max-width: 1399px) { + .my-sites li { + float: right; + width: 21%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(4n+1) { + clear: right; + } + .my-sites.striped li:nth-of-type(4n+4):after { + content: none; + } + .my-sites li:nth-of-type(8n+1), + .my-sites li:nth-of-type(8n+2), + .my-sites li:nth-of-type(8n+3), + .my-sites li:nth-of-type(8n+4) { + background-color: #f6f7f7; + } +} + +@media only screen and (min-width: 1400px) and (max-width: 1599px) { + .my-sites li { + float: right; + width: 16%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(5n+1) { + clear: right; + } + .my-sites.striped li:nth-of-type(5n+5):after { + content: none; + } + .my-sites li:nth-of-type(10n+1), + .my-sites li:nth-of-type(10n+2), + .my-sites li:nth-of-type(10n+3), + .my-sites li:nth-of-type(10n+4), + .my-sites li:nth-of-type(10n+5) { + background-color: #f6f7f7; + } +} + +@media only screen and (min-width: 1600px) { + .my-sites li { + float: right; + width: 12.666666%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(6n+1) { + clear: right; + } + .my-sites.striped li:nth-of-type(6n+6):after { + content: none; + } + .my-sites li:nth-of-type(12n+1), + .my-sites li:nth-of-type(12n+2), + .my-sites li:nth-of-type(12n+3), + .my-sites li:nth-of-type(12n+4), + .my-sites li:nth-of-type(12n+5), + .my-sites li:nth-of-type(12n+6) { + background-color: #f6f7f7; + } +} + +.my-sites li a { + text-decoration: none; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + /* Back-compat for pre-3.8 */ + div.star-holder, + div.star-holder .star-rating { + background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom right; + background-size: 21px 37px; + } + + .spinner { + background-image: url(../images/spinner-2x.gif); + } + +} + +@media screen and (max-width: 782px) { + html.wp-toolbar { + padding-top: 46px; + } + + .screen-reader-shortcut:focus { + top: -39px; + } + + body { + min-width: 240px; + overflow-x: hidden; + } + + body * { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; + } + + #wpcontent { + position: relative; + margin-right: 0; + padding-right: 10px; + } + + #wpbody-content { + padding-bottom: 100px; + } + + .wrap { + clear: both; + margin-left: 12px; + margin-right: 0; + } + + /* categories */ + #col-left, + #col-right { + float: none; + width: auto; + } + + #col-left .col-wrap, + #col-right .col-wrap { + padding: 0; + } + + /* Hidden Elements */ + #collapse-menu, + .post-format-select { + display: none !important; + } + + .wrap h1.wp-heading-inline { + margin-bottom: 0.5em; + } + + .wrap .add-new-h2, /* deprecated */ + .wrap .add-new-h2:active, /* deprecated */ + .wrap .page-title-action, + .wrap .page-title-action:active { + padding: 10px 15px; + font-size: 14px; + white-space: nowrap; + } + + /* Feedback Messages */ + .notice, + .wrap div.updated, + .wrap div.error, + .media-upload-form div.error { + margin: 20px 0 10px; + padding: 5px 10px; + font-size: 14px; + line-height: 175%; + } + + .wp-core-ui .notice.is-dismissible { + padding-left: 46px; + } + + .notice-dismiss { + padding: 13px; + } + + .wrap .icon32 + h2 { + margin-top: -2px; + } + + .wp-responsive-open #wpbody { + left: -16em; + } + + code { + word-wrap: break-word; + word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */ + word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */ + } + + /* General Metabox */ + .postbox { + font-size: 14px; + } + + .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ + .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */ + .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */ + .metabox-holder h2 { + padding: 12px; + } + + .postbox .handlediv { + margin-top: 3px; + } + + /* Subsubsub Nav */ + .subsubsub { + font-size: 16px; + text-align: center; + margin-bottom: 15px; + } + + /* Theme/Plugin File Editor */ + + #template textarea, + #template .CodeMirror { + box-sizing: border-box; + } + + #templateside { + float: none; + width: auto; + } + + #templateside > ul { + border-right: 1px solid #dcdcde; + } + + #templateside li { + margin: 0; + } + + #templateside li:not(.howto) a { + display: block; + padding: 5px; + } + #templateside li.howto { + padding: 12px; + } + + #templateside .highlight { + padding: 5px; + margin-right: -5px; + margin-top: -5px; + } + + #template > div, + #template .notice { + float: none; + margin: 1em 0; + width: auto; + } + + #template .CodeMirror, + #template textarea { + width: 100%; + } + + #templateside ul ul { + padding-right: 1.5em; + } + [role="treeitem"] .folder-label { + display: block; + padding: 5px; + } + .tree-folder > li::before, + .tree-folder > li::after, + .tree-folder .tree-folder::after { + right: -8px; + } + .tree-folder > li::before { + top: 0; + height: 13px; + } + .tree-folder > .current-file::before { + right: -5px; + top: 7px; + width: 4px; + } + .tree-folder > .current-file::after { + height: 9px; + right: -8px; + } + .wrap #templateside span.notice { + margin-right: -5px; + width: 100%; + } + + .fileedit-sub .alignright { + float: right; + margin-top: 15px; + width: 100%; + text-align: right; + } + + .fileedit-sub .alignright label { + display: block; + } + + .fileedit-sub #theme, + .fileedit-sub #plugin { + margin-right: 0; + max-width: 70%; + } + + .fileedit-sub input[type="submit"] { + margin-bottom: 0; + } + + #documentation label[for="docs-list"] { + display: block; + } + + #documentation select[name="docs-list"] { + margin-right: 0; + max-width: 60%; + } + + #documentation input[type="button"] { + margin-bottom: 0; + } + + #wpfooter { + display: none; + } + + #comments-form .checkforspam { + display: none; + } + + .edit-comment-author { + margin: 2px 0 0; + } + + .filter-drawer .filter-group-feature input, + .filter-drawer .filter-group-feature label { + line-height: 2.1; + } + + .filter-drawer .filter-group-feature label { + margin-right: 32px; + } + + .wp-filter .button.drawer-toggle { + font-size: 13px; + line-height: 2; + height: 28px; + } + + /* Fix help tab columns for smaller screens */ + #screen-meta #contextual-help-wrap { + overflow: visible; + } + + #screen-meta #contextual-help-back, + #screen-meta .contextual-help-sidebar { + display: none; + } + + #screen-meta .contextual-help-tabs { + clear: both; + width: 100%; + float: none; + } + + #screen-meta .contextual-help-tabs ul { + margin: 0 0 1em; + padding: 1em 0 0; + } + + #screen-meta .contextual-help-tabs .active { + margin: 0; + } + + #screen-meta .contextual-help-tabs-wrap { + clear: both; + max-width: 100%; + float: none; + } + + #screen-meta, + #screen-meta-links { + margin-left: 10px; + } + + #screen-meta-links { + margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */ + } + + .wp-filter .search-form input[type="search"] { + font-size: 1rem; + } + + .wp-filter .search-form.search-plugins { + /* This element is a flex item. */ + min-width: 100%; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Disable horizontal scroll when responsive menu is open + since we push the main content off to the right. */ + #wpwrap.wp-responsive-open { + overflow-x: hidden; + } + + html.wp-toolbar { + padding-top: 0; + } + + .screen-reader-shortcut:focus { + top: 7px; + } + + #wpbody { + padding-top: 46px; + } + + /* Keep full-width boxes on Edit Post page from causing horizontal scroll */ + div#post-body.metabox-holder.columns-1 { + overflow-x: hidden; + } + + h1.nav-tab-wrapper, + .wrap h2.nav-tab-wrapper, + .nav-tab-wrapper { + border-bottom: 0; + } + + h1 .nav-tab, + h2 .nav-tab, + h3 .nav-tab, + nav .nav-tab { + margin: 10px 0 0 10px; + border-bottom: 1px solid #c3c4c7; + } + + .nav-tab-active:hover, + .nav-tab-active:focus, + .nav-tab-active:focus:active { + border-bottom: 1px solid #c3c4c7; + } + + .wp-filter .search-form input[type="search"] { + width: 100%; + } +} + +@media screen and (max-width: 320px) { + /* Prevent default center alignment and larger font for the Right Now widget when + the network dashboard is viewed on a small mobile device. */ + #network_dashboard_right_now .subsubsub { + font-size: 14px; + text-align: right; + } +} diff --git a/tools/storybook/wordpress/css/common-rtl.min.css b/tools/storybook/wordpress/css/common-rtl.min.css new file mode 100644 index 00000000000..26e4422ffe4 --- /dev/null +++ b/tools/storybook/wordpress/css/common-rtl.min.css @@ -0,0 +1,9 @@ +/*! This file is auto-generated */ +#wpwrap{height:auto;min-height:100%;width:100%;position:relative;-webkit-font-smoothing:subpixel-antialiased}#wpcontent{height:100%;padding-right:20px}#wpcontent,#wpfooter{margin-right:160px}.folded #wpcontent,.folded #wpfooter{margin-right:36px}#wpbody-content{padding-bottom:65px;float:right;width:100%;overflow:visible}.inner-sidebar{float:left;clear:left;display:none;width:281px;position:relative}.columns-2 .inner-sidebar{margin-left:auto;width:286px;display:block}.columns-2 .inner-sidebar #side-sortables,.inner-sidebar #side-sortables{min-height:300px;width:280px;padding:0}.has-right-sidebar .inner-sidebar{display:block}.has-right-sidebar #post-body{float:right;clear:right;width:100%;margin-left:-2000px}.has-right-sidebar #post-body-content{margin-left:300px;float:none;width:auto}#col-left{float:right;width:35%}#col-right{float:left;width:65%}#col-left .col-wrap{padding:0 0 0 6px}#col-right .col-wrap{padding:0 6px 0 0}.alignleft{float:right}.alignright{float:left}.textleft{text-align:right}.textright{text-align:left}.clear{clear:both}.wp-clearfix:after{content:"";display:table;clear:both}.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.button .screen-reader-text{height:auto}.screen-reader-shortcut{position:absolute;top:-1000em}.screen-reader-shortcut:focus{right:6px;top:-25px;height:auto;width:auto;display:block;font-size:14px;font-weight:600;padding:15px 23px 14px;background:#f0f0f1;color:#2271b1;z-index:100000;line-height:normal;box-shadow:0 0 2px 2px rgba(0,0,0,.6);text-decoration:none;outline:2px solid transparent;outline-offset:-2px}.hidden,.js .closed .inside,.js .hide-if-js,.js .wp-core-ui .hide-if-js,.js.wp-core-ui .hide-if-js,.no-js .hide-if-no-js,.no-js .wp-core-ui .hide-if-no-js,.no-js.wp-core-ui .hide-if-no-js{display:none}#menu-management .menu-edit,#menu-settings-column .accordion-container,.comment-ays,.feature-filter,.imgedit-group,.manage-menus,.menu-item-handle,.popular-tags,.stuffbox,.widget-inside,.widget-top,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04)}.comment-ays,.feature-filter,.imgedit-group,.popular-tags,.stuffbox,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{background:#fff}body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4em;min-width:600px}body.iframe{min-width:0;padding-top:1px}body.modal-open{overflow:hidden}body.mobile.modal-open #wpwrap{overflow:hidden;position:fixed;height:100%}iframe,img{border:0}td{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a,div{outline:0}a:active,a:hover{color:#135e96}.wp-person a:focus .gravatar,a:focus,a:focus .media-icon img,a:focus .plugin-icon{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);outline:1px solid transparent}#adminmenu a:focus{box-shadow:none;outline:1px solid transparent;outline-offset:-1px}.screen-reader-text:focus{box-shadow:none;outline:0}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}.wp-die-message,p{font-size:13px;line-height:1.5;margin:1em 0}blockquote{margin:1em}dd,li{margin-bottom:6px}h1,h2,h3,h4,h5,h6{display:block;font-weight:600}h1{color:#1d2327;font-size:2em;margin:.67em 0}h2,h3{color:#1d2327;font-size:1.3em;margin:1em 0}.update-core-php h2{margin-top:4em}.update-messages h2,.update-php h2,h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}ol,ul{padding:0}ul{list-style:none}ol{list-style-type:decimal;margin-right:2em}ul.ul-disc{list-style:disc outside}ul.ul-square{list-style:square outside}ol.ol-decimal{list-style:decimal outside}ol.ol-decimal,ul.ul-disc,ul.ul-square{margin-right:1.8em}ol.ol-decimal>li,ul.ul-disc>li,ul.ul-square>li{margin:0 0 .5em}.ltr{direction:ltr}.code,code{font-family:Consolas,Monaco,monospace;direction:ltr;unicode-bidi:embed}code,kbd{padding:3px 5px 2px;margin:0 1px;background:#f0f0f1;background:rgba(0,0,0,.07);font-size:13px}.subsubsub{list-style:none;margin:8px 0 0;padding:0;font-size:13px;float:right;color:#646970}.subsubsub a{line-height:2;padding:.2em;text-decoration:none}.subsubsub a .count,.subsubsub a.current .count{color:#50575e;font-weight:400}.subsubsub a.current{font-weight:600;border:none}.subsubsub li{display:inline-block;margin:0;padding:0;white-space:nowrap}.widefat{border-spacing:0;width:100%;clear:both;margin:0}.widefat *{word-wrap:break-word}.widefat a,.widefat button.button-link{text-decoration:none}.widefat td,.widefat th{padding:8px 10px}.widefat thead td,.widefat thead th{border-bottom:1px solid #c3c4c7}.widefat tfoot td,.widefat tfoot th{border-top:1px solid #c3c4c7;border-bottom:none}.widefat .no-items td{border-bottom-width:0}.widefat td{vertical-align:top}.widefat td,.widefat td ol,.widefat td p,.widefat td ul{font-size:13px;line-height:1.5em}.widefat tfoot td,.widefat th,.widefat thead td{text-align:right;line-height:1.3em;font-size:14px}.updates-table td input,.widefat tfoot td input,.widefat th input,.widefat thead td input{margin:0 8px 0 0;padding:0;vertical-align:text-top}.widefat .check-column{width:2.2em;padding:6px 0 25px;vertical-align:top}.widefat tbody th.check-column{padding:9px 0 22px}.updates-table tbody td.check-column,.widefat tbody th.check-column,.widefat tfoot td.check-column,.widefat thead td.check-column{padding:11px 3px 0 0}.widefat tfoot td.check-column,.widefat thead td.check-column{padding-top:4px;vertical-align:middle}.update-php div.error,.update-php div.updated{margin-right:0}.no-js .widefat tfoot .check-column input,.no-js .widefat thead .check-column input{display:none}.column-comments,.column-links,.column-posts,.widefat .num{text-align:center}.widefat th#comments{vertical-align:middle}.wrap{margin:10px 2px 0 20px}.wrap.block-editor-no-js{padding-right:20px}.postbox .inside h2,.wrap [class$=icon32]+h2,.wrap h1,.wrap>h2:first-child{font-size:23px;font-weight:400;margin:0;padding:9px 0 4px;line-height:1.3}.wrap h1.wp-heading-inline{display:inline-block;margin-left:5px}.wp-header-end{visibility:hidden;margin:-2px 0 0}.subtitle{margin:0;padding-right:25px;color:#50575e;font-size:14px;font-weight:400;line-height:1}.subtitle strong{word-break:break-all}.wrap .add-new-h2,.wrap .add-new-h2:active,.wrap .page-title-action,.wrap .page-title-action:active{margin-right:4px;padding:4px 8px;position:relative;top:-3px;text-decoration:none;border:1px solid #2271b1;border-radius:2px;text-shadow:none;font-weight:600;font-size:13px;line-height:normal;color:#2271b1;background:#f6f7f7;cursor:pointer}.wrap .wp-heading-inline+.page-title-action{margin-right:0}.wrap .add-new-h2:hover,.wrap .page-title-action:hover{background:#f0f0f1;border-color:#0a4b78;color:#0a4b78}.page-title-action:focus{color:#0a4b78}.form-table th label[for=WPLANG] .dashicons,.form-table th label[for=locale] .dashicons{margin-right:5px}.wrap .page-title-action:focus{border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.wrap h1.long-header{padding-left:0}.wp-dialog{background-color:#fff}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#8c8f94;box-shadow:0 1px 2px rgba(0,0,0,.1)}.sorthelper{background-color:#c5d9ed}.ac_match,.subsubsub a.current{color:#000}.alternate,.striped>tbody>:nth-child(odd),ul.striped>:nth-child(odd){background-color:#f6f7f7}.bar{background-color:#f0f0f1;border-left-color:#4f94d4}.highlight{background-color:#f0f6fc;color:#3c434a}.wp-ui-primary{color:#fff;background-color:#2c3338}.wp-ui-text-primary{color:#2c3338}.wp-ui-highlight{color:#fff;background-color:#2271b1}.wp-ui-text-highlight{color:#2271b1}.wp-ui-notification{color:#fff;background-color:#d63638}.wp-ui-text-notification{color:#d63638}.wp-ui-text-icon{color:#8c8f94}img.emoji{display:inline!important;border:none!important;height:1em!important;width:1em!important;margin:0 .07em!important;vertical-align:-.1em!important;background:0 0!important;padding:0!important;box-shadow:none!important}#nav-menu-footer,#nav-menu-header,#your-profile #rich_editing,.checkbox,.control-section .accordion-section-title,.menu-item-handle,.postbox .hndle,.side-info,.sidebar-name,.stuffbox .hndle,.widefat tfoot td,.widefat tfoot th,.widefat thead td,.widefat thead th,.widget .widget-top{line-height:1.4em}.menu-item-handle,.widget .widget-top{background:#f6f7f7;color:#1d2327}.stuffbox .hndle{border-bottom:1px solid #c3c4c7}.quicktags{background-color:#c3c4c7;color:#000;font-size:12px}.icon32{display:none}#bulk-titles .ntdelbutton:before,.notice-dismiss:before,.tagchecklist .ntdelbutton .remove-tag-icon:before,.welcome-panel .welcome-panel-close:before{background:0 0;color:#787c82;content:"\f153";display:block;font:normal 16px/20px dashicons;speak:never;height:20px;text-align:center;width:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.welcome-panel .welcome-panel-close:before{margin:0}.tagchecklist .ntdelbutton .remove-tag-icon:before{margin-right:2px;border-radius:50%;color:#2271b1;line-height:1.28}.tagchecklist .ntdelbutton:focus{outline:0}#bulk-titles .ntdelbutton:focus:before,#bulk-titles .ntdelbutton:hover:before,.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,.tagchecklist .ntdelbutton:hover .remove-tag-icon:before{color:#d63638}.tagchecklist .ntdelbutton:focus .remove-tag-icon:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.key-labels label{line-height:24px}b,strong{font-weight:600}.pre{white-space:pre-wrap;word-wrap:break-word}.howto{color:#646970;display:block}p.install-help{margin:8px 0;font-style:italic}.no-break{white-space:nowrap}hr{border:0;border-top:1px solid #dcdcde;border-bottom:1px solid #f6f7f7}#all-plugins-table .plugins a.delete,#delete-link a.delete,#media-items a.delete,#media-items a.delete-permanently,#nav-menu-footer .menu-delete,#search-plugins-table .plugins a.delete,.plugins a.delete,.privacy_requests .remove-personal-data .remove-personal-data-handle,.row-actions span.delete a,.row-actions span.spam a,.row-actions span.trash a,.submitbox .submitdelete,a#remove-post-thumbnail{color:#b32d2e}#all-plugins-table .plugins a.delete:hover,#delete-link a.delete:hover,#media-items a.delete-permanently:hover,#media-items a.delete:hover,#nav-menu-footer .menu-delete:hover,#search-plugins-table .plugins a.delete:hover,.file-error,.plugins a.delete:hover,.privacy_requests .remove-personal-data .remove-personal-data-handle:hover,.row-actions .delete a:hover,.row-actions .spam a:hover,.row-actions .trash a:hover,.submitbox .submitdelete:hover,a#remove-post-thumbnail:hover,abbr.required,span.required{color:#b32d2e;border:none}#major-publishing-actions{padding:10px;clear:both;border-top:1px solid #dcdcde;background:#f6f7f7}#delete-action{float:right;line-height:2.30769231}#delete-link{line-height:2.30769231;vertical-align:middle;text-align:right;margin-right:8px}#delete-link a{text-decoration:none}#publishing-action{text-align:left;float:left;line-height:1.9}#publishing-action .spinner{float:none;margin-top:5px}#misc-publishing-actions{padding:6px 0 0}.misc-pub-section{padding:6px 10px 8px}.misc-pub-filename{word-wrap:break-word}#minor-publishing-actions{padding:10px 10px 0;text-align:left}#save-post{float:right}.preview{float:left}#sticky-span{margin-right:18px}.approve,.unapproved .unapprove{display:none}.spam .approve,.trash .approve,.unapproved .approve{display:inline}td.action-links,th.action-links{text-align:left}#misc-publishing-actions .notice{margin-right:10px;margin-left:10px}.wp-filter{display:inline-block;position:relative;box-sizing:border-box;margin:12px 0 25px;padding:0 10px;width:100%;box-shadow:0 1px 1px rgba(0,0,0,.04);border:1px solid #c3c4c7;background:#fff;color:#50575e;font-size:13px}.wp-filter a{text-decoration:none}.filter-count{display:inline-block;vertical-align:middle;min-width:4em}.filter-count .count,.title-count{display:inline-block;position:relative;top:-1px;padding:4px 10px;border-radius:30px;background:#646970;color:#fff;font-size:14px;font-weight:600}.title-count{display:inline;top:-3px;margin-right:5px;margin-left:20px}.filter-items{float:right}.filter-links{display:inline-block;margin:0}.filter-links li{display:inline-block;margin:0}.filter-links li>a{display:inline-block;margin:0 10px;padding:15px 0;border-bottom:4px solid #fff;color:#646970;cursor:pointer}.filter-links .current{box-shadow:none;border-bottom:4px solid #646970;color:#1d2327}.filter-links li>a:focus,.filter-links li>a:hover,.show-filters .filter-links a.current:focus,.show-filters .filter-links a.current:hover{color:#135e96}.wp-filter .search-form{float:left;margin:10px 0}.wp-filter .search-form input[type=search]{margin:1px 0;width:280px;max-width:100%}.wp-filter .search-form select{margin:0}.plugin-install-php .wp-filter{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.wp-filter .search-form.search-plugins{margin-top:0}.wp-filter .search-form.search-plugins .wp-filter-search,.wp-filter .search-form.search-plugins select{display:inline-block;margin-top:10px;vertical-align:top}.wp-filter .button.drawer-toggle{margin:10px 9px 0;padding:0 6px 0 10px;border-color:transparent;background-color:transparent;color:#646970;vertical-align:baseline;box-shadow:none}.wp-filter .drawer-toggle:before{content:"\f111";margin:0 0 0 5px;color:#646970;font:normal 16px/1 dashicons;vertical-align:text-bottom;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-filter .button.drawer-toggle:focus,.wp-filter .button.drawer-toggle:hover,.wp-filter .drawer-toggle:focus:before,.wp-filter .drawer-toggle:hover:before{background-color:transparent;color:#135e96}.wp-filter .button.drawer-toggle:focus:active,.wp-filter .button.drawer-toggle:hover{border-color:transparent}.wp-filter .button.drawer-toggle:focus{border-color:#4f94d4}.wp-filter .button.drawer-toggle:active{background:0 0;box-shadow:none;transform:none}.wp-filter .drawer-toggle.current:before{color:#fff}.filter-drawer,.wp-filter .favorites-form{display:none;margin:0 -20px 0 -10px;padding:20px;border-top:1px solid #f0f0f1;background:#f6f7f7;overflow:hidden}.show-favorites-form .favorites-form,.show-filters .filter-drawer{display:block}.show-filters .filter-links a.current{border-bottom:none}.show-filters .wp-filter .button.drawer-toggle{border-radius:2px;background:#646970;color:#fff}.show-filters .wp-filter .drawer-toggle:focus,.show-filters .wp-filter .drawer-toggle:hover{background:#2271b1}.show-filters .wp-filter .drawer-toggle:before{color:#fff}.filter-group{box-sizing:border-box;position:relative;float:right;margin:0 0 0 1%;padding:20px 10px 10px;width:24%;background:#fff;border:1px solid #dcdcde;box-shadow:0 1px 1px rgba(0,0,0,.04)}.filter-group legend{position:absolute;top:10px;display:block;margin:0;padding:0;font-size:1em;font-weight:600}.filter-drawer .filter-group-feature{margin:28px 0 0;list-style-type:none;font-size:12px}.filter-drawer .filter-group-feature input,.filter-drawer .filter-group-feature label{line-height:1.4}.filter-drawer .filter-group-feature input{position:absolute;margin:0}.filter-group .filter-group-feature label{display:block;margin:14px 23px 14px 0}.filter-drawer .buttons{clear:both;margin-bottom:20px}.filter-drawer .filter-group+.buttons{margin-bottom:0;padding-top:20px}.filter-drawer .buttons .button span{display:inline-block;opacity:.8;font-size:12px;text-indent:10px}.wp-filter .button.clear-filters{display:none;margin-right:10px}.wp-filter .button-link.edit-filters{padding:0 5px;line-height:2.2}.filtered-by{display:none;margin:0}.filtered-by>span{font-weight:600}.filtered-by a{margin-right:10px}.filtered-by .tags{display:inline}.filtered-by .tag{margin:0 5px;padding:4px 8px;border:1px solid #dcdcde;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;font-size:11px}.filters-applied .filter-drawer .buttons,.filters-applied .filter-drawer br,.filters-applied .filter-group{display:none}.filters-applied .filtered-by{display:block}.filters-applied .filter-drawer{padding:20px}.error .content-filterable,.loading-content .content-filterable,.show-filters .content-filterable,.show-filters .favorites-form,.show-filters.filters-applied.loading-content .content-filterable{display:none}.show-filters.filters-applied .content-filterable{display:block}.loading-content .spinner{display:block;margin:40px auto 0;float:none}@media only screen and (max-width:1120px){.filter-drawer{border-bottom:1px solid #f0f0f1}.filter-group{margin-bottom:0;margin-top:5px;width:100%}.filter-group li{margin:10px 0}}@media only screen and (max-width:1000px){.filter-items{float:none}.wp-filter .media-toolbar-primary,.wp-filter .media-toolbar-secondary,.wp-filter .search-form{float:none;position:relative;max-width:100%}}@media only screen and (max-width:782px){.filter-group li{padding:0;width:50%}}@media only screen and (max-width:320px){.filter-count{display:none}.wp-filter .drawer-toggle{margin:10px 0}.filter-group li,.wp-filter .search-form input[type=search]{width:100%}}.notice,div.error,div.updated{background:#fff;border:1px solid #c3c4c7;border-right-width:4px;box-shadow:0 1px 1px rgba(0,0,0,.04);margin:5px 15px 2px;padding:1px 12px}div[class=update-message]{padding:.5em 0 .5em 12px}.form-table td .notice p,.notice p,.notice-title,div.error p,div.updated p{margin:.5em 0;padding:2px}.error a{text-decoration:underline}.updated a{padding-bottom:2px}.notice-alt{box-shadow:none}.notice-large{padding:10px 20px}.notice-title{display:inline-block;color:#1d2327;font-size:18px}.wp-core-ui .notice.is-dismissible{padding-left:38px;position:relative}.notice-dismiss{position:absolute;top:0;left:1px;border:none;margin:0;padding:9px;background:0 0;color:#787c82;cursor:pointer}.notice-dismiss:active:before,.notice-dismiss:focus:before,.notice-dismiss:hover:before{color:#d63638}.notice-dismiss:focus{outline:0;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.notice-success,div.updated{border-right-color:#00a32a}.notice-success.notice-alt{background-color:#edfaef}.notice-warning{border-right-color:#dba617}.notice-warning.notice-alt{background-color:#fcf9e8}.notice-error,div.error{border-right-color:#d63638}.notice-error.notice-alt{background-color:#fcf0f1}.notice-info{border-right-color:#72aee6}.notice-info.notice-alt{background-color:#f0f6fc}.button.installed:before,.button.installing:before,.button.updated-message:before,.button.updating-message:before,.import-php .updating-message:before,.update-message p:before,.updated-message p:before,.updating-message p:before{display:inline-block;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.media-upload-form .notice,.media-upload-form div.error,.wrap .notice,.wrap div.error,.wrap div.updated{margin:5px 0 15px}.wrap #templateside .notice{display:block;margin:0;padding:5px 8px;font-weight:600;text-decoration:none}.wrap #templateside span.notice{margin-right:-12px}#templateside li.notice a{padding:0}.button.installing:before,.button.updating-message:before,.import-php .updating-message:before,.update-message p:before,.updating-message p:before{color:#d63638;content:"\f463"}.button.installing:before,.button.updating-message:before,.import-php .updating-message:before,.plugins .column-auto-updates .dashicons-update.spin,.theme-overlay .theme-autoupdate .dashicons-update.spin,.updating-message p:before{animation:rotation 2s infinite linear}@media (prefers-reduced-motion:reduce){.button.installing:before,.button.updating-message:before,.import-php .updating-message:before,.plugins .column-auto-updates .dashicons-update.spin,.theme-overlay .theme-autoupdate .dashicons-update.spin,.updating-message p:before{animation:none}}.theme-overlay .theme-autoupdate .dashicons-update.spin{margin-left:3px}.button.updated-message:before,.installed p:before,.updated-message p:before{color:#68de7c;content:"\f147"}.update-message.notice-error p:before{color:#d63638;content:"\f534"}.import-php .updating-message:before,.wrap .notice p:before{margin-left:6px;vertical-align:bottom}#update-nag,.update-nag{display:inline-block;line-height:1.4;padding:11px 15px;font-size:14px;margin:25px 2px 0 20px}ul#dismissed-updates{display:none}#dismissed-updates li>p{margin-top:0}#dismiss,#undismiss{margin-right:.5em}form.upgrade{margin-top:8px}form.upgrade .hint{font-style:italic;font-size:85%;margin:-.5em 0 2em}.update-php .spinner{float:none;margin:-4px 0}h2.wp-current-version{margin-bottom:.3em}p.update-last-checked{margin-top:0}p.auto-update-status{margin-top:2em;line-height:1.8}#ajax-loading,.ajax-feedback,.ajax-loading,.imgedit-wait-spin,.list-ajax-loading{visibility:hidden}#ajax-response.alignleft{margin-right:2em}.button.installed:before,.button.installing:before,.button.updated-message:before,.button.updating-message:before{margin:3px -2px 0 5px}.button-primary.updating-message:before{color:#fff}.button-primary.updated-message:before{color:#9ec2e6}.button.updated-message{transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}@media aural{.button.installed:before,.button.installing:before,.update-message p:before,.wrap .notice p:before{speak:never}}#adminmenu a,#catlist a,#taglist a{text-decoration:none}#contextual-help-wrap,#screen-options-wrap{margin:0;padding:8px 20px 12px;position:relative}#contextual-help-wrap{overflow:auto;margin-right:0}#screen-meta-links{float:left;margin:0 0 0 20px}#screen-meta{display:none;margin:0 0 -1px 20px;position:relative;background-color:#fff;border:1px solid #c3c4c7;border-top:none;box-shadow:0 0 0 transparent}#contextual-help-link-wrap,#screen-options-link-wrap{float:right;margin:0 6px 0 0}#screen-meta-links .screen-meta-toggle{position:relative;top:0}#screen-meta-links .show-settings{border:1px solid #c3c4c7;border-top:none;height:auto;margin-bottom:0;padding:3px 16px 3px 6px;background:#fff;border-radius:0 0 4px 4px;color:#646970;line-height:1.7;box-shadow:0 0 0 transparent;transition:box-shadow .1s linear}#screen-meta-links .show-settings:active,#screen-meta-links .show-settings:focus,#screen-meta-links .show-settings:hover{color:#2c3338}#screen-meta-links .show-settings:focus{border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8)}#screen-meta-links .show-settings:active{transform:none}#screen-meta-links .show-settings:after{left:0;content:"\f140";font:normal 20px/1 dashicons;speak:never;display:inline-block;padding:0 0 0 5px;bottom:2px;position:relative;vertical-align:bottom;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none}#screen-meta-links .screen-meta-active:after{content:"\f142"}.toggle-arrow{background-repeat:no-repeat;background-position:top right;background-color:transparent;height:22px;line-height:22px;display:block}.toggle-arrow-active{background-position:bottom right}#contextual-help-wrap h5,#screen-options-wrap h5,#screen-options-wrap legend{margin:0;padding:8px 0;font-size:13px;font-weight:600}.metabox-prefs label{display:inline-block;padding-left:15px;line-height:2.35}#number-of-columns{display:inline-block;vertical-align:middle;line-height:30px}.metabox-prefs input[type=checkbox]{margin-top:0;margin-left:6px}.metabox-prefs label input,.metabox-prefs label input[type=checkbox]{margin:-4px 0 0 5px}.metabox-prefs .columns-prefs label input{margin:-1px 0 0 2px}.metabox-prefs label a{display:none}.metabox-prefs .screen-options input,.metabox-prefs .screen-options label{margin-top:0;margin-bottom:0;vertical-align:middle}.metabox-prefs .screen-options .screen-per-page{margin-left:15px;padding-left:0}.metabox-prefs .screen-options label{line-height:2.2;padding-left:0}.screen-options+.screen-options{margin-top:10px}.metabox-prefs .submit{margin-top:1em;padding:0}#contextual-help-wrap{padding:0}#contextual-help-columns{position:relative}#contextual-help-back{position:absolute;top:0;bottom:0;right:150px;left:170px;border:1px solid #c3c4c7;border-top:none;border-bottom:none;background:#f0f6fc}#contextual-help-wrap.no-sidebar #contextual-help-back{left:0;border-left-width:0;border-bottom-left-radius:2px}.contextual-help-tabs{float:right;width:150px;margin:0}.contextual-help-tabs ul{margin:1em 0}.contextual-help-tabs li{margin-bottom:0;list-style-type:none;border-style:solid;border-width:0 2px 0 0;border-color:transparent}.contextual-help-tabs a{display:block;padding:5px 12px 5px 5px;line-height:1.4;text-decoration:none;border:1px solid transparent;border-left:none;border-right:none}.contextual-help-tabs a:hover{color:#2c3338}.contextual-help-tabs .active{padding:0;margin:0 0 0 -1px;border-right:2px solid #72aee6;background:#f0f6fc;box-shadow:0 2px 0 rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.02)}.contextual-help-tabs .active a{border-color:#c3c4c7;color:#2c3338}.contextual-help-tabs-wrap{padding:0 20px;overflow:auto}.help-tab-content{display:none;margin:0 0 12px 22px;line-height:1.6}.help-tab-content.active{display:block}.help-tab-content ul li{list-style-type:disc;margin-right:18px}.contextual-help-sidebar{width:150px;float:left;padding:0 12px 0 8px;overflow:auto}html.wp-toolbar{padding-top:32px;box-sizing:border-box;-ms-overflow-style:scrollbar}.widefat td,.widefat th{color:#50575e}.widefat tfoot td,.widefat th,.widefat thead td{font-weight:400}.widefat tfoot tr td,.widefat tfoot tr th,.widefat thead tr td,.widefat thead tr th{color:#2c3338}.widefat td p{margin:2px 0 .8em}.widefat ol,.widefat p,.widefat ul{color:#2c3338}.widefat .column-comment p{margin:.6em 0}.widefat .column-comment ul{list-style:initial;margin-right:2em}.postbox-container{float:right}.postbox-container .meta-box-sortables{box-sizing:border-box}#wpbody-content .metabox-holder{padding-top:10px}.metabox-holder .postbox-container .meta-box-sortables{min-height:1px;position:relative}#post-body-content{width:100%;min-width:463px;float:right}#post-body.columns-2 #postbox-container-1{float:left;margin-left:-300px;width:280px}#post-body.columns-2 #side-sortables{min-height:250px}@media only screen and (max-width:799px){#wpbody-content .metabox-holder .postbox-container .empty-container{outline:0;height:0;min-height:0}}.js .postbox .hndle,.js .widget .widget-top{cursor:move}.js .postbox .hndle.is-non-sortable,.js .widget .widget-top.is-non-sortable{cursor:auto}.hndle a{font-size:12px;font-weight:400}.postbox-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c3c4c7}.postbox-header .hndle{flex-grow:1;display:flex;justify-content:space-between;align-items:center}.postbox-header .handle-actions{flex-shrink:0}.postbox .handle-order-higher,.postbox .handle-order-lower,.postbox .handlediv{width:36px;height:36px;margin:0;padding:0;border:0;background:0 0;cursor:pointer}.postbox .handle-order-higher,.postbox .handle-order-lower{color:#787c82;width:1.62rem}.edit-post-meta-boxes-area .postbox .handle-order-higher,.edit-post-meta-boxes-area .postbox .handle-order-lower{width:44px;height:44px;color:#1d2327}.postbox .handle-order-higher[aria-disabled=true],.postbox .handle-order-lower[aria-disabled=true]{cursor:default;color:#a7aaad}.sortable-placeholder{border:1px dashed #c3c4c7;margin-bottom:20px}.postbox,.stuffbox{margin-bottom:20px;padding:0;line-height:1}.postbox.closed{border-bottom:0}.postbox .hndle,.stuffbox .hndle{-webkit-user-select:none;user-select:none}.postbox .inside{padding:0 12px 12px;line-height:1.4;font-size:13px}.stuffbox .inside{padding:0;line-height:1.4;font-size:13px;margin-top:0}.postbox .inside{margin:11px 0;position:relative}.postbox .inside>p:last-child,.rss-widget ul li:last-child{margin-bottom:1px!important}.postbox.closed h3{border:none;box-shadow:none}.postbox table.form-table{margin-bottom:0}.postbox table.widefat{box-shadow:none}.temp-border{border:1px dotted #c3c4c7}.columns-prefs label{padding:0 0 0 10px}#adminmenu .wp-submenu li.current,#adminmenu .wp-submenu li.current a,#adminmenu .wp-submenu li.current a:hover,#comment-status-display,#dashboard_right_now .versions .b,#ed_reply_toolbar #ed_reply_strong,#pass-strength-result.short,#pass-strength-result.strong,#post-status-display,#post-visibility-display,.feature-filter .feature-name,.item-controls .item-order a,.media-item .percent,.plugins .name{font-weight:600}#wpfooter{position:absolute;bottom:0;right:0;left:0;padding:10px 20px;color:#50575e}#wpfooter p{font-size:13px;margin:0;line-height:1.55}#footer-thankyou{font-style:italic}.nav-tab{float:right;border:1px solid #c3c4c7;border-bottom:none;margin-right:.5em;padding:5px 10px;font-size:14px;line-height:1.71428571;font-weight:600;background:#dcdcde;color:#50575e;text-decoration:none;white-space:nowrap}.nav-tab-small .nav-tab,h3 .nav-tab{padding:5px 14px;font-size:12px;line-height:1.33}.nav-tab:focus,.nav-tab:hover{background-color:#fff;color:#3c434a}.nav-tab-active,.nav-tab:focus:active{box-shadow:none}.nav-tab-active{margin-bottom:-1px;color:#3c434a}.nav-tab-active,.nav-tab-active:focus,.nav-tab-active:focus:active,.nav-tab-active:hover{border-bottom:1px solid #f0f0f1;background:#f0f0f1;color:#000}.nav-tab-wrapper,.wrap h2.nav-tab-wrapper,h1.nav-tab-wrapper{border-bottom:1px solid #c3c4c7;margin:0;padding-top:9px;padding-bottom:0;line-height:inherit}.nav-tab-wrapper:not(.wp-clearfix):after{content:"";display:table;clear:both}.spinner{background:url(../images/spinner.gif) no-repeat;background-size:20px 20px;display:inline-block;visibility:hidden;float:left;vertical-align:middle;opacity:.7;width:20px;height:20px;margin:4px 10px 0}.loading-content .spinner,.spinner.is-active{visibility:visible}#template>div{margin-left:16em}#template .notice{margin-top:1em;margin-left:3%}#template .notice p{width:auto}#template .submit .spinner{float:none}.metabox-holder .postbox>h3,.metabox-holder .stuffbox>h3,.metabox-holder h2.hndle,.metabox-holder h3.hndle{font-size:14px;padding:8px 12px;margin:0;line-height:1.4}.nav-menus-php .metabox-holder h3{padding:10px 14px 11px 10px;line-height:1.5}#templateside ul li a{text-decoration:none}.plugin-install #description,.plugin-install-network #description{width:60%}table .column-rating,table .column-visible,table .vers{text-align:right}.attention,.error-message{color:#d63638;font-weight:600}body.iframe{height:98%}.lp-show-latest p{display:none}.lp-show-latest .lp-error p,.lp-show-latest p:last-child{display:block}.media-icon{width:62px;text-align:center}.media-icon img{border:1px solid #dcdcde;border:1px solid rgba(0,0,0,.07)}#howto{font-size:11px;margin:0 5px;display:block}.importers{font-size:16px;width:auto}.importers td{padding-left:14px;line-height:1.4}.importers .import-system{max-width:250px}.importers td.desc{max-width:500px}.importer-action,.importer-desc,.importer-title{display:block}.importer-title{color:#000;font-size:14px;font-weight:400;margin-bottom:.2em}.importer-action{line-height:1.55;color:#50575e;margin-bottom:1em}#post-body #post-body-content #namediv h2,#post-body #post-body-content #namediv h3{margin-top:0}.edit-comment-author{color:#1d2327;border-bottom:1px solid #f0f0f1}#namediv h2 label,#namediv h3 label{vertical-align:baseline}#namediv table{width:100%}#namediv td.first{width:10px;white-space:nowrap}#namediv input{width:100%}#namediv p{margin:10px 0}.zerosize{height:0;width:0;margin:0;border:0;padding:0;overflow:hidden;position:absolute}br.clear{height:2px;line-height:.15}.checkbox{border:none;margin:0;padding:0}fieldset{border:0;padding:0;margin:0}.post-categories{display:inline;margin:0;padding:0}.post-categories li{display:inline}div.star-holder{position:relative;height:17px;width:100px;background:url(../images/stars.png?ver=20121108) repeat-x bottom right}div.star-holder .star-rating{background:url(../images/stars.png?ver=20121108) repeat-x top right;height:17px;float:right}.star-rating{white-space:nowrap}.star-rating .star{display:inline-block;width:20px;height:20px;-webkit-font-smoothing:antialiased;font-size:20px;line-height:1;font-family:dashicons;text-decoration:inherit;font-weight:400;font-style:normal;vertical-align:top;transition:color .1s ease-in;text-align:center;color:#dba617}.star-rating .star-full:before{content:"\f155"}.star-rating .star-half:before{content:"\f459"}.rtl .star-rating .star-half{transform:rotateY(-180deg)}.star-rating .star-empty:before{content:"\f154"}div.action-links{font-weight:400;margin:6px 0 0}#plugin-information{background:#fff;position:fixed;top:0;left:0;bottom:0;right:0;height:100%;padding:0}#plugin-information-scrollable{overflow:auto;-webkit-overflow-scrolling:touch;height:100%}#plugin-information-title{padding:0 26px;background:#f6f7f7;font-size:22px;font-weight:600;line-height:2.4;position:relative;height:56px}#plugin-information-title.with-banner{margin-left:0;height:250px;background-size:cover}#plugin-information-title h2{font-size:1em;font-weight:600;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#plugin-information-title.with-banner h2{position:relative;font-family:"Helvetica Neue",sans-serif;display:inline-block;font-size:30px;line-height:1.68;box-sizing:border-box;max-width:100%;padding:0 15px;margin-top:174px;color:#fff;background:rgba(29,35,39,.9);text-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 0 30px rgba(255,255,255,.1);border-radius:8px}#plugin-information-title div.vignette{display:none}#plugin-information-title.with-banner div.vignette{position:absolute;display:block;top:0;right:0;height:250px;width:100%;background:0 0;box-shadow:inset 0 0 50px 4px rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.1)}#plugin-information-tabs{padding:0 16px;position:relative;left:0;right:0;min-height:36px;font-size:0;z-index:1;border-bottom:1px solid #dcdcde;background:#f6f7f7}#plugin-information-tabs a{position:relative;display:inline-block;padding:9px 10px;margin:0;height:18px;line-height:1.3;font-size:14px;text-decoration:none;transition:none}#plugin-information-tabs a.current{margin:0 -1px -1px;background:#fff;border:1px solid #dcdcde;border-bottom-color:#fff;padding-top:8px;color:#2c3338}#plugin-information-tabs.with-banner a.current{border-top:none;padding-top:9px}#plugin-information-tabs a:active,#plugin-information-tabs a:focus{outline:0}#plugin-information-content{overflow:hidden;background:#fff;position:relative;top:0;left:0;right:0;min-height:100%;min-height:calc(100% - 152px)}#plugin-information-content.with-banner{min-height:calc(100% - 346px)}#section-holder{position:relative;top:0;left:250px;bottom:0;right:0;margin-top:10px;margin-left:250px;padding:10px 26px 99999px;margin-bottom:-99932px}#section-holder .notice{margin:5px 0 15px}#section-holder .updated{margin:16px 0}#plugin-information .fyi{float:left;position:relative;top:0;left:0;padding:16px 16px 99999px;margin-bottom:-99932px;width:217px;border-right:1px solid #dcdcde;background:#f6f7f7;color:#646970}#plugin-information .fyi strong{color:#3c434a}#plugin-information .fyi h3{font-weight:600;text-transform:uppercase;font-size:12px;color:#646970;margin:24px 0 8px}#plugin-information .fyi h2{font-size:.9em;margin-bottom:0;margin-left:0}#plugin-information .fyi ul{padding:0;margin:0;list-style:none}#plugin-information .fyi li{margin:0 0 10px}#plugin-information .fyi-description{margin-top:0}#plugin-information .counter-container{margin:3px 0}#plugin-information .counter-label{float:right;margin-left:5px;min-width:55px}#plugin-information .counter-back{height:17px;width:92px;background-color:#dcdcde;float:right}#plugin-information .counter-bar{height:17px;background-color:#f0c33c;float:right}#plugin-information .counter-count{margin-right:5px}#plugin-information .fyi ul.contributors{margin-top:10px}#plugin-information .fyi ul.contributors li{display:inline-block;margin-left:8px;vertical-align:middle}#plugin-information .fyi ul.contributors li{display:inline-block;margin-left:8px;vertical-align:middle}#plugin-information .fyi ul.contributors li img{vertical-align:middle;margin-left:4px}#plugin-information-footer{padding:13px 16px;position:absolute;left:0;bottom:0;right:0;height:40px;border-top:1px solid #dcdcde;background:#f6f7f7}#plugin-information .section{direction:ltr}#plugin-information .section ol,#plugin-information .section ul{list-style-type:disc;margin-left:24px}#plugin-information .section,#plugin-information .section p{font-size:14px;line-height:1.7}#plugin-information #section-screenshots ol{list-style:none;margin:0}#plugin-information #section-screenshots li img{vertical-align:text-top;margin-top:16px;max-width:100%;width:auto;height:auto;box-shadow:0 1px 2px rgba(0,0,0,.3)}#plugin-information #section-screenshots li p{font-style:italic;padding-left:20px}#plugin-information pre{padding:7px;overflow:auto;border:1px solid #c3c4c7}#plugin-information blockquote{border-right:2px solid #dcdcde;color:#646970;font-style:italic;margin:1em 0;padding:0 1em 0 0}#plugin-information .review{overflow:hidden;width:100%;margin-bottom:20px;border-bottom:1px solid #dcdcde}#plugin-information .review-title-section{overflow:hidden}#plugin-information .review-title-section h4{display:inline-block;float:left;margin:0 6px 0 0}#plugin-information .reviewer-info p{clear:both;margin:0;padding-top:2px}#plugin-information .reviewer-info .avatar{float:left;margin:4px 6px 0 0}#plugin-information .reviewer-info .star-rating{float:left}#plugin-information .review-meta{float:left;margin-left:.75em}#plugin-information .review-body{float:left;width:100%}.plugin-version-author-uri{font-size:13px}.update-php .button.button-primary{margin-left:1em}@media screen and (max-width:771px){#plugin-information-title.with-banner{height:100px}#plugin-information-title.with-banner h2{margin-top:30px;font-size:20px;line-height:2;max-width:85%}#plugin-information-title.with-banner div.vignette{height:100px}#plugin-information-tabs{overflow:hidden;padding:0;height:auto}#plugin-information-tabs a.current{margin-bottom:0;border-bottom:none}#plugin-information .fyi{float:none;border:1px solid #dcdcde;position:static;width:auto;margin:26px 26px 0;padding-bottom:0}#section-holder{position:static;margin:0;padding-bottom:70px}#plugin-information .fyi h3,#plugin-information .fyi small{display:none}#plugin-information-footer{padding:12px 16px 0;height:46px}}#TB_window.plugin-details-modal{background:#fff}#TB_window.plugin-details-modal.thickbox-loading:before{content:"";display:block;width:20px;height:20px;position:absolute;right:50%;top:50%;z-index:-1;margin:-10px -10px 0 0;background:#fff url(../images/spinner.gif) no-repeat center;background-size:20px 20px;transform:translateZ(0)}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){#TB_window.plugin-details-modal.thickbox-loading:before{background-image:url(../images/spinner-2x.gif)}}.plugin-details-modal #TB_title{float:right;height:1px}.plugin-details-modal #TB_ajaxWindowTitle{display:none}.plugin-details-modal #TB_closeWindowButton{right:auto;left:-30px;color:#f0f0f1}.plugin-details-modal #TB_closeWindowButton:focus,.plugin-details-modal #TB_closeWindowButton:hover{color:#135e96;outline:0;box-shadow:none}.plugin-details-modal .tb-close-icon{display:none}.plugin-details-modal #TB_closeWindowButton:after{content:"\f335";font:normal 32px/29px dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (max-width:830px){.plugin-details-modal #TB_closeWindowButton{left:0;top:-30px}}img{border:none}.bulk-action-notice .toggle-indicator::before,.meta-box-sortables .postbox .order-higher-indicator::before,.meta-box-sortables .postbox .order-lower-indicator::before,.meta-box-sortables .postbox .toggle-indicator::before,.privacy-text-box .toggle-indicator::before,.sidebar-name .toggle-indicator::before{content:"\f142";display:inline-block;font:normal 20px/1 dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none}.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,.js .widgets-holder-wrap.closed .toggle-indicator::before,.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,.privacy-text-box.closed .toggle-indicator::before{content:"\f140"}.postbox .handle-order-higher .order-higher-indicator::before{content:"\f343";color:inherit}.postbox .handle-order-lower .order-lower-indicator::before{content:"\f347";color:inherit}.postbox .handle-order-higher .order-higher-indicator::before,.postbox .handle-order-lower .order-lower-indicator::before{position:relative;top:.11rem;width:20px;height:20px}.postbox .handlediv .toggle-indicator::before{width:20px;border-radius:50%}.postbox .handlediv .toggle-indicator::before{position:relative;top:.05rem;text-indent:-1px}.rtl .postbox .handlediv .toggle-indicator::before{text-indent:1px}.bulk-action-notice .toggle-indicator::before{line-height:16px;vertical-align:top;color:#787c82}.postbox .handle-order-higher:focus,.postbox .handle-order-lower:focus,.postbox .handlediv:focus{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);outline:1px solid transparent}.postbox .handle-order-higher:focus .order-higher-indicator::before,.postbox .handle-order-lower:focus .order-lower-indicator::before,.postbox .handlediv:focus .toggle-indicator::before{box-shadow:none;outline:1px solid transparent}#photo-add-url-div input[type=text]{width:300px}.alignleft h2{margin:0}#template textarea{font-family:Consolas,Monaco,monospace;font-size:13px;background:#f6f7f7;-o-tab-size:4;tab-size:4}#template .CodeMirror,#template textarea{width:100%;min-height:60vh;height:calc(100vh - 295px);border:1px solid #dcdcde;box-sizing:border-box}#templateside>h2{padding-top:6px;padding-bottom:7px;margin:0}#templateside ol,#templateside ul{margin:0;padding:0}#templateside>ul{box-sizing:border-box;margin-top:0;overflow:auto;padding:0;min-height:60vh;height:calc(100vh - 295px);background-color:#f6f7f7;border:1px solid #dcdcde;border-right:none}#templateside ul ul{padding-right:12px}#templateside>ul>li>ul[role=group]{padding-right:0}[role=treeitem][aria-expanded=false]>ul{display:none}[role=treeitem] span[aria-hidden]{display:inline;font-family:dashicons;font-size:20px;position:absolute;pointer-events:none}[role=treeitem][aria-expanded=false]>.folder-label .icon:after{content:"\f141"}[role=treeitem][aria-expanded=true]>.folder-label .icon:after{content:"\f140"}[role=treeitem] .folder-label{display:block;padding:3px 12px 3px 3px;cursor:pointer}[role=treeitem]{outline:0}[role=treeitem] .folder-label.focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}[role=treeitem] .folder-label.hover,[role=treeitem].hover{background-color:#f0f0f1}.tree-folder{margin:0;position:relative}[role=treeitem] li{position:relative}.tree-folder .tree-folder::after{content:"";display:block;position:absolute;right:2px;border-right:1px solid #c3c4c7;top:-13px;bottom:10px}.tree-folder>li::before{content:"";position:absolute;display:block;border-right:1px solid #c3c4c7;right:2px;top:-5px;height:18px;width:7px;border-bottom:1px solid #c3c4c7}.tree-folder>li::after{content:"";position:absolute;display:block;border-right:1px solid #c3c4c7;right:2px;bottom:-7px;top:0}#templateside .current-file{margin:-4px 0 -2px}.tree-folder>.current-file::before{right:4px;height:15px;width:0;border-right:none;top:3px}.tree-folder>.current-file::after{bottom:-4px;height:7px;right:2px;top:auto}.tree-folder li:last-child>.tree-folder::after,.tree-folder>li:last-child::after{display:none}#documentation label,#theme-plugin-editor-label,#theme-plugin-editor-selector{font-weight:600}#theme-plugin-editor-label{display:inline-block;margin-bottom:1em}#docs-list,#template textarea{direction:ltr}.fileedit-sub #plugin,.fileedit-sub #theme{max-width:40%}.fileedit-sub .alignright{text-align:left}#template p{width:97%}#file-editor-linting-error{margin-top:1em;margin-bottom:1em}#file-editor-linting-error>.notice{margin:0;display:inline-block}#file-editor-linting-error>.notice>p{width:auto}#template .submit{margin-top:1em;padding:0}#template .submit input[type=submit][disabled]{cursor:not-allowed}#templateside{float:left;width:16em;word-wrap:break-word}#postcustomstuff p.submit{margin:0}#templateside h4{margin:1em 0 0}#templateside li{margin:4px 0}#templateside li:not(.howto) a,.theme-editor-php .highlight{display:block;padding:3px 12px 3px 0;text-decoration:none}#templateside li:not(.howto)>a:first-of-type{padding-top:0}#templateside li.howto{padding:6px 12px 12px}.theme-editor-php .highlight{margin:-3px -12px -3px 3px}#templateside .highlight{border:none;font-weight:600}.nonessential{color:#646970;font-size:11px;font-style:italic;padding-right:12px}#documentation{margin-top:10px}#documentation label{line-height:1.8;vertical-align:baseline}.fileedit-sub{padding:10px 0 8px;line-height:180%}#file-editor-warning .file-editor-warning-content{margin:25px}.accordion-section-title:after,.control-section .accordion-section-title:after,.nav-menus-php .item-edit:before,.widget-top .widget-action .toggle-indicator:before{content:"\f140";font:normal 20px/1 dashicons;speak:never;display:block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none}.widget-top .widget-action .toggle-indicator:before{padding:1px 0 1px 2px;border-radius:50%}.accordion-section-title:after,.handlediv,.item-edit,.postbox .handlediv.button-link,.toggle-indicator{color:#787c82}.widget-action{color:#50575e}.accordion-section-title:hover:after,.handlediv:focus,.handlediv:hover,.item-edit:focus,.item-edit:hover,.postbox .handlediv.button-link:focus,.postbox .handlediv.button-link:hover,.sidebar-name:hover .toggle-indicator,.widget-action:focus,.widget-top:hover .widget-action{color:#1d2327;outline:1px solid transparent}.widget-top .widget-action:focus .toggle-indicator:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.accordion-section-title:after,.control-section .accordion-section-title:after{float:left;left:20px;top:-2px}#customize-info.open .accordion-section-title:after,.control-section.open .accordion-section-title:after,.nav-menus-php .menu-item-edit-active .item-edit:before,.widget.open .widget-top .widget-action .toggle-indicator:before,.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before{content:"\f142"}/*! + * jQuery UI Draggable/Sortable 1.11.4 + * http://jqueryui.com + * + * Copyright jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */.ui-draggable-handle,.ui-sortable-handle{touch-action:none}.accordion-section{border-bottom:1px solid #dcdcde;margin:0}.accordion-section.open .accordion-section-content,.no-js .accordion-section .accordion-section-content{display:block}.accordion-section.open:hover{border-bottom-color:#dcdcde}.accordion-section-content{display:none;padding:10px 20px 15px;overflow:hidden;background:#fff}.accordion-section-title{margin:0;padding:12px 15px 15px;position:relative;border-right:1px solid #dcdcde;border-left:1px solid #dcdcde;-webkit-user-select:none;user-select:none}.js .accordion-section-title{cursor:pointer}.js .accordion-section-title:after{position:absolute;top:12px;left:10px;z-index:1}.accordion-section-title:focus{outline:1px solid transparent}.accordion-section-title:focus:after,.accordion-section-title:hover:after{border-color:#a7aaad transparent;outline:1px solid transparent}.cannot-expand .accordion-section-title{cursor:auto}.cannot-expand .accordion-section-title:after{display:none}.control-section .accordion-section-title,.customize-pane-child .accordion-section-title{border-right:none;border-left:none;padding:10px 14px 11px 10px;line-height:1.55;background:#fff}.control-section .accordion-section-title:after,.customize-pane-child .accordion-section-title:after{top:calc(50% - 10px)}.js .control-section .accordion-section-title:focus,.js .control-section .accordion-section-title:hover,.js .control-section.open .accordion-section-title,.js .control-section:hover .accordion-section-title{color:#1d2327;background:#f6f7f7}.control-section.open .accordion-section-title{border-bottom:1px solid #dcdcde}.network-admin .edit-site-actions{margin-top:0}.my-sites{display:block;overflow:auto;zoom:1}.my-sites li{display:block;padding:8px 3%;min-height:130px;margin:0}@media only screen and (max-width:599px){.my-sites li{min-height:0}}@media only screen and (min-width:600px){.my-sites.striped li{background-color:#fff;position:relative}.my-sites.striped li:after{content:"";width:1px;height:100%;position:absolute;top:0;left:0;background:#c3c4c7}}@media only screen and (min-width:600px) and (max-width:699px){.my-sites li{float:right;width:44%}.my-sites.striped li{background-color:#fff}.my-sites.striped li:nth-of-type(2n+1){clear:right}.my-sites.striped li:nth-of-type(2n+2):after{content:none}.my-sites li:nth-of-type(4n+1),.my-sites li:nth-of-type(4n+2){background-color:#f6f7f7}}@media only screen and (min-width:700px) and (max-width:1199px){.my-sites li{float:right;width:27.333333%;background-color:#fff}.my-sites.striped li:nth-of-type(3n+3):after{content:none}.my-sites li:nth-of-type(6n+1),.my-sites li:nth-of-type(6n+2),.my-sites li:nth-of-type(6n+3){background-color:#f6f7f7}}@media only screen and (min-width:1200px) and (max-width:1399px){.my-sites li{float:right;width:21%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(4n+1){clear:right}.my-sites.striped li:nth-of-type(4n+4):after{content:none}.my-sites li:nth-of-type(8n+1),.my-sites li:nth-of-type(8n+2),.my-sites li:nth-of-type(8n+3),.my-sites li:nth-of-type(8n+4){background-color:#f6f7f7}}@media only screen and (min-width:1400px) and (max-width:1599px){.my-sites li{float:right;width:16%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(5n+1){clear:right}.my-sites.striped li:nth-of-type(5n+5):after{content:none}.my-sites li:nth-of-type(10n+1),.my-sites li:nth-of-type(10n+2),.my-sites li:nth-of-type(10n+3),.my-sites li:nth-of-type(10n+4),.my-sites li:nth-of-type(10n+5){background-color:#f6f7f7}}@media only screen and (min-width:1600px){.my-sites li{float:right;width:12.666666%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(6n+1){clear:right}.my-sites.striped li:nth-of-type(6n+6):after{content:none}.my-sites li:nth-of-type(12n+1),.my-sites li:nth-of-type(12n+2),.my-sites li:nth-of-type(12n+3),.my-sites li:nth-of-type(12n+4),.my-sites li:nth-of-type(12n+5),.my-sites li:nth-of-type(12n+6){background-color:#f6f7f7}}.my-sites li a{text-decoration:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){div.star-holder,div.star-holder .star-rating{background:url(../images/stars-2x.png?ver=20121108) repeat-x bottom right;background-size:21px 37px}.spinner{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){html.wp-toolbar{padding-top:46px}.screen-reader-shortcut:focus{top:-39px}body{min-width:240px;overflow-x:hidden}body *{-webkit-tap-highlight-color:transparent!important}#wpcontent{position:relative;margin-right:0;padding-right:10px}#wpbody-content{padding-bottom:100px}.wrap{clear:both;margin-left:12px;margin-right:0}#col-left,#col-right{float:none;width:auto}#col-left .col-wrap,#col-right .col-wrap{padding:0}#collapse-menu,.post-format-select{display:none!important}.wrap h1.wp-heading-inline{margin-bottom:.5em}.wrap .add-new-h2,.wrap .add-new-h2:active,.wrap .page-title-action,.wrap .page-title-action:active{padding:10px 15px;font-size:14px;white-space:nowrap}.media-upload-form div.error,.notice,.wrap div.error,.wrap div.updated{margin:20px 0 10px;padding:5px 10px;font-size:14px;line-height:175%}.wp-core-ui .notice.is-dismissible{padding-left:46px}.notice-dismiss{padding:13px}.wrap .icon32+h2{margin-top:-2px}.wp-responsive-open #wpbody{left:-16em}code{word-wrap:break-word;word-wrap:anywhere;word-break:break-word}.postbox{font-size:14px}.metabox-holder .postbox>h3,.metabox-holder .stuffbox>h3,.metabox-holder h2,.metabox-holder h3.hndle{padding:12px}.postbox .handlediv{margin-top:3px}.subsubsub{font-size:16px;text-align:center;margin-bottom:15px}#template .CodeMirror,#template textarea{box-sizing:border-box}#templateside{float:none;width:auto}#templateside>ul{border-right:1px solid #dcdcde}#templateside li{margin:0}#templateside li:not(.howto) a{display:block;padding:5px}#templateside li.howto{padding:12px}#templateside .highlight{padding:5px;margin-right:-5px;margin-top:-5px}#template .notice,#template>div{float:none;margin:1em 0;width:auto}#template .CodeMirror,#template textarea{width:100%}#templateside ul ul{padding-right:1.5em}[role=treeitem] .folder-label{display:block;padding:5px}.tree-folder .tree-folder::after,.tree-folder>li::after,.tree-folder>li::before{right:-8px}.tree-folder>li::before{top:0;height:13px}.tree-folder>.current-file::before{right:-5px;top:7px;width:4px}.tree-folder>.current-file::after{height:9px;right:-8px}.wrap #templateside span.notice{margin-right:-5px;width:100%}.fileedit-sub .alignright{float:right;margin-top:15px;width:100%;text-align:right}.fileedit-sub .alignright label{display:block}.fileedit-sub #plugin,.fileedit-sub #theme{margin-right:0;max-width:70%}.fileedit-sub input[type=submit]{margin-bottom:0}#documentation label[for=docs-list]{display:block}#documentation select[name=docs-list]{margin-right:0;max-width:60%}#documentation input[type=button]{margin-bottom:0}#wpfooter{display:none}#comments-form .checkforspam{display:none}.edit-comment-author{margin:2px 0 0}.filter-drawer .filter-group-feature input,.filter-drawer .filter-group-feature label{line-height:2.1}.filter-drawer .filter-group-feature label{margin-right:32px}.wp-filter .button.drawer-toggle{font-size:13px;line-height:2;height:28px}#screen-meta #contextual-help-wrap{overflow:visible}#screen-meta #contextual-help-back,#screen-meta .contextual-help-sidebar{display:none}#screen-meta .contextual-help-tabs{clear:both;width:100%;float:none}#screen-meta .contextual-help-tabs ul{margin:0 0 1em;padding:1em 0 0}#screen-meta .contextual-help-tabs .active{margin:0}#screen-meta .contextual-help-tabs-wrap{clear:both;max-width:100%;float:none}#screen-meta,#screen-meta-links{margin-left:10px}#screen-meta-links{margin-bottom:20px}.wp-filter .search-form input[type=search]{font-size:1rem}.wp-filter .search-form.search-plugins{min-width:100%}}@media screen and (max-width:600px){#wpwrap.wp-responsive-open{overflow-x:hidden}html.wp-toolbar{padding-top:0}.screen-reader-shortcut:focus{top:7px}#wpbody{padding-top:46px}div#post-body.metabox-holder.columns-1{overflow-x:hidden}.nav-tab-wrapper,.wrap h2.nav-tab-wrapper,h1.nav-tab-wrapper{border-bottom:0}h1 .nav-tab,h2 .nav-tab,h3 .nav-tab,nav .nav-tab{margin:10px 0 0 10px;border-bottom:1px solid #c3c4c7}.nav-tab-active:focus,.nav-tab-active:focus:active,.nav-tab-active:hover{border-bottom:1px solid #c3c4c7}.wp-filter .search-form input[type=search]{width:100%}}@media screen and (max-width:320px){#network_dashboard_right_now .subsubsub{font-size:14px;text-align:right}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/common.css b/tools/storybook/wordpress/css/common.css new file mode 100644 index 00000000000..32c10cbe2a2 --- /dev/null +++ b/tools/storybook/wordpress/css/common.css @@ -0,0 +1,4122 @@ +/* 2 column liquid layout */ +#wpwrap { + height: auto; + min-height: 100%; + width: 100%; + position: relative; + -webkit-font-smoothing: subpixel-antialiased; +} + +#wpcontent { + height: 100%; + padding-left: 20px; +} + +#wpcontent, +#wpfooter { + margin-left: 160px; +} + +.folded #wpcontent, +.folded #wpfooter { + margin-left: 36px; +} + +#wpbody-content { + padding-bottom: 65px; + float: left; + width: 100%; + overflow: visible; +} + +/* inner 2 column liquid layout */ + +.inner-sidebar { + float: right; + clear: right; + display: none; + width: 281px; + position: relative; +} + +.columns-2 .inner-sidebar { + margin-right: auto; + width: 286px; + display: block; +} + +.inner-sidebar #side-sortables, +.columns-2 .inner-sidebar #side-sortables { + min-height: 300px; + width: 280px; + padding: 0; +} + +.has-right-sidebar .inner-sidebar { + display: block; +} + +.has-right-sidebar #post-body { + float: left; + clear: left; + width: 100%; + margin-right: -2000px; +} + +.has-right-sidebar #post-body-content { + margin-right: 300px; + float: none; + width: auto; +} + +/* 2 columns main area */ + +#col-left { + float: left; + width: 35%; +} + +#col-right { + float: right; + width: 65%; +} + +#col-left .col-wrap { + padding: 0 6px 0 0; +} + +#col-right .col-wrap { + padding: 0 0 0 6px; +} + +/* utility classes */ +.alignleft { + float: left; +} + +.alignright { + float: right; +} + +.textleft { + text-align: left; +} + +.textright { + text-align: right; +} + +.clear { + clear: both; +} + +/* modern clearfix */ +.wp-clearfix:after { + content: ""; + display: table; + clear: both; +} + +/* Hide visually but not from screen readers */ +.screen-reader-text, +.screen-reader-text span, +.ui-helper-hidden-accessible { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ +} + +.button .screen-reader-text { + height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */ +} + +.screen-reader-shortcut { + position: absolute; + top: -1000em; +} + +.screen-reader-shortcut:focus { + left: 6px; + top: -25px; + height: auto; + width: auto; + display: block; + font-size: 14px; + font-weight: 600; + padding: 15px 23px 14px; + background: #f0f0f1; + color: #2271b1; + z-index: 100000; + line-height: normal; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + text-decoration: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.hidden, +.js .closed .inside, +.js .hide-if-js, +.no-js .hide-if-no-js, +.js.wp-core-ui .hide-if-js, +.js .wp-core-ui .hide-if-js, +.no-js.wp-core-ui .hide-if-no-js, +.no-js .wp-core-ui .hide-if-no-js { + display: none; +} + +/* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */ +.widget-top, +.menu-item-handle, +.widget-inside, +#menu-settings-column .accordion-container, +#menu-management .menu-edit, +.manage-menus, +table.widefat, +.stuffbox, +p.popular-tags, +.widgets-holder-wrap, +.wp-editor-container, +.popular-tags, +.feature-filter, +.imgedit-group, +.comment-ays { + border: 1px solid #c3c4c7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +table.widefat, +.wp-editor-container, +.stuffbox, +p.popular-tags, +.widgets-holder-wrap, +.popular-tags, +.feature-filter, +.imgedit-group, +.comment-ays { + background: #fff; +} + +/* general */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + background: #f0f0f1; + color: #3c434a; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + line-height: 1.4em; + min-width: 600px; +} + +body.iframe { + min-width: 0; + padding-top: 1px; +} + +body.modal-open { + overflow: hidden; +} + +body.mobile.modal-open #wpwrap { + overflow: hidden; + position: fixed; + height: 100%; +} + +iframe, +img { + border: 0; +} + +td { + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +/* Any change to the default link style must be applied to button-link too. */ +a { + color: #2271b1; + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +a, +div { + outline: 0; +} + +a:hover, +a:active { + color: #135e96; +} + +a:focus, +a:focus .media-icon img, +a:focus .plugin-icon, +.wp-person a:focus .gravatar { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +#adminmenu a:focus { + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: -1px; +} + +.screen-reader-text:focus { + box-shadow: none; + outline: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +p, +.wp-die-message { + font-size: 13px; + line-height: 1.5; + margin: 1em 0; +} + +blockquote { + margin: 1em; +} + +li, +dd { + margin-bottom: 6px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + display: block; + font-weight: 600; +} + +h1 { + color: #1d2327; + font-size: 2em; + margin: .67em 0; +} + +h2, +h3 { + color: #1d2327; + font-size: 1.3em; + margin: 1em 0; +} + +.update-core-php h2 { + margin-top: 4em; +} + +.update-php h2, +.update-messages h2, +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +ul, +ol { + padding: 0; +} + +ul { + list-style: none; +} + +ol { + list-style-type: decimal; + margin-left: 2em; +} + +ul.ul-disc { + list-style: disc outside; +} + +ul.ul-square { + list-style: square outside; +} + +ol.ol-decimal { + list-style: decimal outside; +} + +ul.ul-disc, +ul.ul-square, +ol.ol-decimal { + margin-left: 1.8em; +} + +ul.ul-disc > li, +ul.ul-square > li, +ol.ol-decimal > li { + margin: 0 0 0.5em; +} + +/* rtl:ignore */ +.ltr { + direction: ltr; +} + +/* rtl:ignore */ +.code, +code { + font-family: Consolas, Monaco, monospace; + direction: ltr; + unicode-bidi: embed; +} + +kbd, +code { + padding: 3px 5px 2px; + margin: 0 1px; + background: #f0f0f1; + background: rgba(0, 0, 0, 0.07); + font-size: 13px; +} + +.subsubsub { + list-style: none; + margin: 8px 0 0; + padding: 0; + font-size: 13px; + float: left; + color: #646970; +} + +.subsubsub a { + line-height: 2; + padding: .2em; + text-decoration: none; +} + +.subsubsub a .count, +.subsubsub a.current .count { + color: #50575e; /* #f1f1f1 background */ + font-weight: 400; +} + +.subsubsub a.current { + font-weight: 600; + border: none; +} + +.subsubsub li { + display: inline-block; + margin: 0; + padding: 0; + white-space: nowrap; +} + +/* .widefat - main style for tables */ +.widefat { + border-spacing: 0; + width: 100%; + clear: both; + margin: 0; +} + +.widefat * { + word-wrap: break-word; +} + +.widefat a, +.widefat button.button-link { + text-decoration: none; +} + +.widefat td, +.widefat th { + padding: 8px 10px; +} + +.widefat thead th, +.widefat thead td { + border-bottom: 1px solid #c3c4c7; +} + +.widefat tfoot th, +.widefat tfoot td { + border-top: 1px solid #c3c4c7; + border-bottom: none; +} + +.widefat .no-items td { + border-bottom-width: 0; +} + +.widefat td { + vertical-align: top; +} + +.widefat td, +.widefat td p, +.widefat td ol, +.widefat td ul { + font-size: 13px; + line-height: 1.5em; +} + +.widefat th, +.widefat thead td, +.widefat tfoot td { + text-align: left; + line-height: 1.3em; + font-size: 14px; +} + +.widefat th input, +.updates-table td input, +.widefat thead td input, +.widefat tfoot td input { + margin: 0 0 0 8px; + padding: 0; + vertical-align: text-top; +} + +.widefat .check-column { + width: 2.2em; + padding: 6px 0 25px; + vertical-align: top; +} + +.widefat tbody th.check-column { + padding: 9px 0 22px; +} + +.widefat thead td.check-column, +.widefat tbody th.check-column, +.updates-table tbody td.check-column, +.widefat tfoot td.check-column { + padding: 11px 0 0 3px; +} + +.widefat thead td.check-column, +.widefat tfoot td.check-column { + padding-top: 4px; + vertical-align: middle; +} + +.update-php div.updated, +.update-php div.error { + margin-left: 0; +} + +.no-js .widefat thead .check-column input, +.no-js .widefat tfoot .check-column input { + display: none; +} + +.widefat .num, +.column-comments, +.column-links, +.column-posts { + text-align: center; +} + +.widefat th#comments { + vertical-align: middle; +} + +.wrap { + margin: 10px 20px 0 2px; +} + +.wrap.block-editor-no-js { + padding-left: 20px; +} + +.wrap > h2:first-child, /* Back-compat for pre-4.4 */ +.wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */ +.postbox .inside h2, /* Back-compat for pre-4.4 */ +.wrap h1 { + font-size: 23px; + font-weight: 400; + margin: 0; + padding: 9px 0 4px; + line-height: 1.3; +} + +.wrap h1.wp-heading-inline { + display: inline-block; + margin-right: 5px; +} + +.wp-header-end { + visibility: hidden; + margin: -2px 0 0; +} + +.subtitle { + margin: 0; + padding-left: 25px; + color: #50575e; + font-size: 14px; + font-weight: 400; + line-height: 1; +} + +.subtitle strong { + word-break: break-all; +} + +.wrap .add-new-h2, /* deprecated */ +.wrap .add-new-h2:active, /* deprecated */ +.wrap .page-title-action, +.wrap .page-title-action:active { + margin-left: 4px; + padding: 4px 8px; + position: relative; + top: -3px; + text-decoration: none; + border: 1px solid #2271b1; + border-radius: 2px; + text-shadow: none; + font-weight: 600; + font-size: 13px; + line-height: normal; /* IE8-IE11 need this for buttons */ + color: #2271b1; /* use the standard color used for buttons */ + background: #f6f7f7; + cursor: pointer; +} + +.wrap .wp-heading-inline + .page-title-action { + margin-left: 0; +} + +.wrap .add-new-h2:hover, /* deprecated */ +.wrap .page-title-action:hover { + background: #f0f0f1; + border-color: #0a4b78; + color: #0a4b78; +} + +/* lower specificity: color needs to be overridden by :hover and :active */ +.page-title-action:focus { + color: #0a4b78; +} + +/* Dashicon for language options on General Settings and Profile screens */ +.form-table th label[for="locale"] .dashicons, +.form-table th label[for="WPLANG"] .dashicons { + margin-left: 5px; +} + +.wrap .page-title-action:focus { + border-color: #3582c4; + box-shadow: 0 0 0 1px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.wrap h1.long-header { + padding-right: 0; +} + +.wp-dialog { + background-color: #fff; +} + +.widgets-chooser ul, +#widgets-left .widget-in-question .widget-top, +#available-widgets .widget-top:hover, +div#widgets-right .widget-top:hover, +#widgets-left .widget-top:hover { + border-color: #8c8f94; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.sorthelper { + background-color: #c5d9ed; +} + +.ac_match, +.subsubsub a.current { + color: #000; +} + +.striped > tbody > :nth-child(odd), +ul.striped > :nth-child(odd), +.alternate { + background-color: #f6f7f7; +} + +.bar { + background-color: #f0f0f1; + border-right-color: #4f94d4; +} + +/* Helper classes for plugins to leverage the active WordPress color scheme */ + +.highlight { + background-color: #f0f6fc; + color: #3c434a; +} + +.wp-ui-primary { + color: #fff; + background-color: #2c3338; +} +.wp-ui-text-primary { + color: #2c3338; +} + +.wp-ui-highlight { + color: #fff; + background-color: #2271b1; +} +.wp-ui-text-highlight { + color: #2271b1; +} + +.wp-ui-notification { + color: #fff; + background-color: #d63638; +} +.wp-ui-text-notification { + color: #d63638; +} + +.wp-ui-text-icon { + color: #8c8f94; /* same as new icons */ +} + +/* For emoji replacement images */ +img.emoji { + display: inline !important; + border: none !important; + height: 1em !important; + width: 1em !important; + margin: 0 .07em !important; + vertical-align: -0.1em !important; + background: none !important; + padding: 0 !important; + box-shadow: none !important; +} + +/*------------------------------------------------------------------------------ + 1.0 - Text Styles +------------------------------------------------------------------------------*/ + +.widget .widget-top, +.postbox .hndle, +.stuffbox .hndle, +.control-section .accordion-section-title, +.sidebar-name, +#nav-menu-header, +#nav-menu-footer, +.menu-item-handle, +.checkbox, +.side-info, +#your-profile #rich_editing, +.widefat thead th, +.widefat thead td, +.widefat tfoot th, +.widefat tfoot td { + line-height: 1.4em; +} + +.widget .widget-top, +.menu-item-handle { + background: #f6f7f7; + color: #1d2327; +} + +.stuffbox .hndle { + border-bottom: 1px solid #c3c4c7; +} + +.quicktags { + background-color: #c3c4c7; + color: #000; + font-size: 12px; +} + +.icon32 { + display: none; +} + +/* @todo can we combine these into a class or use an existing dashicon one? */ +.welcome-panel .welcome-panel-close:before, +.tagchecklist .ntdelbutton .remove-tag-icon:before, +#bulk-titles .ntdelbutton:before, +.notice-dismiss:before { + background: none; + color: #787c82; + content: "\f153"; + display: block; + font: normal 16px/20px dashicons; + speak: never; + height: 20px; + text-align: center; + width: 20px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.welcome-panel .welcome-panel-close:before { + margin: 0; +} + +.tagchecklist .ntdelbutton .remove-tag-icon:before { + margin-left: 2px; + border-radius: 50%; + color: #2271b1; + /* vertically center the icon cross browsers */ + line-height: 1.28; +} + +.tagchecklist .ntdelbutton:focus { + outline: 0; +} + +.tagchecklist .ntdelbutton:hover .remove-tag-icon:before, +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before, +#bulk-titles .ntdelbutton:hover:before, +#bulk-titles .ntdelbutton:focus:before { + color: #d63638; +} + +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.key-labels label { + line-height: 24px; +} + +strong, b { + font-weight: 600; +} + +.pre { + /* https://developer.mozilla.org/en-US/docs/CSS/white-space */ + white-space: pre-wrap; /* css-3 */ + word-wrap: break-word; /* IE 5.5 - 7 */ +} + +.howto { + color: #646970; + display: block; +} + +p.install-help { + margin: 8px 0; + font-style: italic; +} + +.no-break { + white-space: nowrap; +} + +hr { + border: 0; + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #f6f7f7; +} + +.row-actions span.delete a, +.row-actions span.trash a, +.row-actions span.spam a, +.plugins a.delete, +#all-plugins-table .plugins a.delete, +#search-plugins-table .plugins a.delete, +.submitbox .submitdelete, +#media-items a.delete, +#media-items a.delete-permanently, +#nav-menu-footer .menu-delete, +#delete-link a.delete, +a#remove-post-thumbnail, +.privacy_requests .remove-personal-data .remove-personal-data-handle { + color: #b32d2e; +} + +abbr.required, +span.required, +.file-error, +.row-actions .delete a:hover, +.row-actions .trash a:hover, +.row-actions .spam a:hover, +.plugins a.delete:hover, +#all-plugins-table .plugins a.delete:hover, +#search-plugins-table .plugins a.delete:hover, +.submitbox .submitdelete:hover, +#media-items a.delete:hover, +#media-items a.delete-permanently:hover, +#nav-menu-footer .menu-delete:hover, +#delete-link a.delete:hover, +a#remove-post-thumbnail:hover, +.privacy_requests .remove-personal-data .remove-personal-data-handle:hover { + color: #b32d2e; + border: none; +} + +/*------------------------------------------------------------------------------ + 3.0 - Actions +------------------------------------------------------------------------------*/ + +#major-publishing-actions { + padding: 10px; + clear: both; + border-top: 1px solid #dcdcde; + background: #f6f7f7; +} + +#delete-action { + float: left; + line-height: 2.30769231; /* 30px */ +} + +#delete-link { + line-height: 2.30769231; /* 30px */ + vertical-align: middle; + text-align: left; + margin-left: 8px; +} + +#delete-link a { + text-decoration: none; +} + +#publishing-action { + text-align: right; + float: right; + line-height: 1.9; +} + +#publishing-action .spinner { + float: none; + margin-top: 5px; +} + +#misc-publishing-actions { + padding: 6px 0 0; +} + +.misc-pub-section { + padding: 6px 10px 8px; +} + +.misc-pub-filename { + word-wrap: break-word; +} + +#minor-publishing-actions { + padding: 10px 10px 0; + text-align: right; +} + +#save-post { + float: left; +} + +.preview { + float: right; +} + +#sticky-span { + margin-left: 18px; +} + +.approve, +.unapproved .unapprove { + display: none; +} + +.unapproved .approve, +.spam .approve, +.trash .approve { + display: inline; +} + +td.action-links, +th.action-links { + text-align: right; +} + +#misc-publishing-actions .notice { + margin-left: 10px; + margin-right: 10px; +} + +/* Filter bar */ +.wp-filter { + display: inline-block; + position: relative; + box-sizing: border-box; + margin: 12px 0 25px; + padding: 0 10px; + width: 100%; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + border: 1px solid #c3c4c7; + background: #fff; + color: #50575e; + font-size: 13px; +} + +.wp-filter a { + text-decoration: none; +} + +.filter-count { + display: inline-block; + vertical-align: middle; + min-width: 4em; +} + +.title-count, +.filter-count .count { + display: inline-block; + position: relative; + top: -1px; + padding: 4px 10px; + border-radius: 30px; + background: #646970; + color: #fff; + font-size: 14px; + font-weight: 600; +} + +/* not a part of filter bar, but derived from it, so here for now */ +.title-count { + display: inline; + top: -3px; + margin-left: 5px; + margin-right: 20px; +} + +.filter-items { + float: left; +} + +.filter-links { + display: inline-block; + margin: 0; +} + +.filter-links li { + display: inline-block; + margin: 0; +} + +.filter-links li > a { + display: inline-block; + margin: 0 10px; + padding: 15px 0; + border-bottom: 4px solid #fff; + color: #646970; + cursor: pointer; +} + +.filter-links .current { + box-shadow: none; + border-bottom: 4px solid #646970; + color: #1d2327; +} + +.filter-links li > a:hover, +.filter-links li > a:focus, +.show-filters .filter-links a.current:hover, +.show-filters .filter-links a.current:focus { + color: #135e96; +} + +.wp-filter .search-form { + float: right; + margin: 10px 0; +} + +.wp-filter .search-form input[type="search"] { + margin: 1px 0; + width: 280px; + max-width: 100%; +} + +.wp-filter .search-form select { + margin: 0; +} + +/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */ +.plugin-install-php .wp-filter { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} + +.wp-filter .search-form.search-plugins { + /* This element is a flex item: the inherited float won't have any effect. */ + margin-top: 0; +} + +.wp-filter .search-form.search-plugins select, +.wp-filter .search-form.search-plugins .wp-filter-search { + display: inline-block; + margin-top: 10px; + vertical-align: top; +} + +.wp-filter .button.drawer-toggle { + margin: 10px 9px 0; + padding: 0 10px 0 6px; + border-color: transparent; + background-color: transparent; + color: #646970; + vertical-align: baseline; + box-shadow: none; +} + +.wp-filter .drawer-toggle:before { + content: "\f111"; + margin: 0 5px 0 0; + color: #646970; + font: normal 16px/1 dashicons; + vertical-align: text-bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wp-filter .button.drawer-toggle:hover, +.wp-filter .drawer-toggle:hover:before, +.wp-filter .button.drawer-toggle:focus, +.wp-filter .drawer-toggle:focus:before { + background-color: transparent; + color: #135e96; +} + +.wp-filter .button.drawer-toggle:hover, +.wp-filter .button.drawer-toggle:focus:active { + border-color: transparent; +} + +.wp-filter .button.drawer-toggle:focus { + border-color: #4f94d4; +} + +.wp-filter .button.drawer-toggle:active { + background: transparent; + box-shadow: none; + transform: none; +} + +.wp-filter .drawer-toggle.current:before { + color: #fff; +} + +.filter-drawer, +.wp-filter .favorites-form { + display: none; + margin: 0 -10px 0 -20px; + padding: 20px; + border-top: 1px solid #f0f0f1; + background: #f6f7f7; + overflow: hidden; +} + +.show-filters .filter-drawer, +.show-favorites-form .favorites-form { + display: block; +} + +.show-filters .filter-links a.current { + border-bottom: none; +} + +.show-filters .wp-filter .button.drawer-toggle { + border-radius: 2px; + background: #646970; + color: #fff; +} + +.show-filters .wp-filter .drawer-toggle:hover, +.show-filters .wp-filter .drawer-toggle:focus { + background: #2271b1; +} + +.show-filters .wp-filter .drawer-toggle:before { + color: #fff; +} + +.filter-group { + box-sizing: border-box; + position: relative; + float: left; + margin: 0 1% 0 0; + padding: 20px 10px 10px; + width: 24%; + background: #fff; + border: 1px solid #dcdcde; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +.filter-group legend { + position: absolute; + top: 10px; + display: block; + margin: 0; + padding: 0; + font-size: 1em; + font-weight: 600; +} + +.filter-drawer .filter-group-feature { + margin: 28px 0 0; + list-style-type: none; + font-size: 12px; +} + +.filter-drawer .filter-group-feature input, +.filter-drawer .filter-group-feature label { + line-height: 1.4; +} + +.filter-drawer .filter-group-feature input { + position: absolute; + margin: 0; +} + +.filter-group .filter-group-feature label { + display: block; + margin: 14px 0 14px 23px; +} + +.filter-drawer .buttons { + clear: both; + margin-bottom: 20px; +} + +.filter-drawer .filter-group + .buttons { + margin-bottom: 0; + padding-top: 20px; +} + +.filter-drawer .buttons .button span { + display: inline-block; + opacity: 0.8; + font-size: 12px; + text-indent: 10px; +} + +.wp-filter .button.clear-filters { + display: none; + margin-left: 10px; +} + +.wp-filter .button-link.edit-filters { + padding: 0 5px; + line-height: 2.2; +} + +.filtered-by { + display: none; + margin: 0; +} + +.filtered-by > span { + font-weight: 600; +} + +.filtered-by a { + margin-left: 10px; +} + +.filtered-by .tags { + display: inline; +} + +.filtered-by .tag { + margin: 0 5px; + padding: 4px 8px; + border: 1px solid #dcdcde; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; + font-size: 11px; +} + +.filters-applied .filter-group, +.filters-applied .filter-drawer .buttons, +.filters-applied .filter-drawer br { + display: none; +} + +.filters-applied .filtered-by { + display: block; +} + +.filters-applied .filter-drawer { + padding: 20px; +} + +.show-filters .favorites-form, +.show-filters .content-filterable, +.show-filters.filters-applied.loading-content .content-filterable, +.loading-content .content-filterable, +.error .content-filterable { + display: none; +} + +.show-filters.filters-applied .content-filterable { + display: block; +} + +.loading-content .spinner { + display: block; + margin: 40px auto 0; + float: none; +} + +@media only screen and (max-width: 1120px) { + .filter-drawer { + border-bottom: 1px solid #f0f0f1; + } + + .filter-group { + margin-bottom: 0; + margin-top: 5px; + width: 100%; + } + + .filter-group li { + margin: 10px 0; + } +} + +@media only screen and (max-width: 1000px) { + .filter-items { + float: none; + } + + .wp-filter .media-toolbar-primary, + .wp-filter .media-toolbar-secondary, + .wp-filter .search-form { + float: none; /* Remove float from media-views.css */ + position: relative; + max-width: 100%; + } +} + +@media only screen and (max-width: 782px) { + .filter-group li { + padding: 0; + width: 50%; + } +} + +@media only screen and (max-width: 320px) { + .filter-count { + display: none; + } + + .wp-filter .drawer-toggle { + margin: 10px 0; + } + + .filter-group li, + .wp-filter .search-form input[type="search"] { + width: 100%; + } +} + +/*------------------------------------------------------------------------------ + 4.0 - Notifications +------------------------------------------------------------------------------*/ + +.notice, +div.updated, +div.error { + background: #fff; + border: 1px solid #c3c4c7; + border-left-width: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + margin: 5px 15px 2px; + padding: 1px 12px; +} + +div[class="update-message"] { /* back-compat for pre-4.6 */ + padding: 0.5em 12px 0.5em 0; +} + +.notice p, +.notice-title, +div.updated p, +div.error p, +.form-table td .notice p { + margin: 0.5em 0; + padding: 2px; +} + +.error a { + text-decoration: underline; +} + +.updated a { + padding-bottom: 2px; +} + +.notice-alt { + box-shadow: none; +} + +.notice-large { + padding: 10px 20px; +} + +.notice-title { + display: inline-block; + color: #1d2327; + font-size: 18px; +} + +.wp-core-ui .notice.is-dismissible { + padding-right: 38px; + position: relative; +} + +.notice-dismiss { + position: absolute; + top: 0; + right: 1px; + border: none; + margin: 0; + padding: 9px; + background: none; + color: #787c82; + cursor: pointer; +} + +.notice-dismiss:hover:before, +.notice-dismiss:active:before, +.notice-dismiss:focus:before { + color: #d63638; +} + +.notice-dismiss:focus { + outline: none; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.notice-success, +div.updated { + border-left-color: #00a32a; +} + +.notice-success.notice-alt { + background-color: #edfaef; +} + +.notice-warning { + border-left-color: #dba617; +} + +.notice-warning.notice-alt { + background-color: #fcf9e8; +} + +.notice-error, +div.error { + border-left-color: #d63638; +} + +.notice-error.notice-alt { + background-color: #fcf0f1; +} + +.notice-info { + border-left-color: #72aee6; +} + +.notice-info.notice-alt { + background-color: #f0f6fc; +} + +.update-message p:before, +.updating-message p:before, +.updated-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + display: inline-block; + font: normal 20px/1 'dashicons'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.wrap .notice, +.wrap div.updated, +.wrap div.error, +.media-upload-form .notice, +.media-upload-form div.error { + margin: 5px 0 15px; +} + +.wrap #templateside .notice { + display: block; + margin: 0; + padding: 5px 8px; + font-weight: 600; + text-decoration: none; +} + +.wrap #templateside span.notice { + margin-left: -12px; +} + +#templateside li.notice a { + padding: 0; +} + +/* Update icon. */ +.update-message p:before, +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before { + color: #d63638; + content: "\f463"; +} + +/* Spins the update icon. */ +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before, +.plugins .column-auto-updates .dashicons-update.spin, +.theme-overlay .theme-autoupdate .dashicons-update.spin { + animation: rotation 2s infinite linear; +} + +@media (prefers-reduced-motion: reduce) { + .updating-message p:before, + .import-php .updating-message:before, + .button.updating-message:before, + .button.installing:before, + .plugins .column-auto-updates .dashicons-update.spin, + .theme-overlay .theme-autoupdate .dashicons-update.spin { + animation: none; + } +} + +.theme-overlay .theme-autoupdate .dashicons-update.spin { + margin-right: 3px; +} + +/* Updated icon (check mark). */ +.updated-message p:before, +.installed p:before, +.button.updated-message:before { + color: #68de7c; + content: "\f147"; +} + +/* Error icon. */ +.update-message.notice-error p:before { + color: #d63638; + content: "\f534"; +} + +.wrap .notice p:before, +.import-php .updating-message:before { + margin-right: 6px; + vertical-align: bottom; +} + +#update-nag, +.update-nag { + display: inline-block; + line-height: 1.4; + padding: 11px 15px; + font-size: 14px; + margin: 25px 20px 0 2px; +} + +ul#dismissed-updates { + display: none; +} + +#dismissed-updates li > p { + margin-top: 0; +} + +#dismiss, +#undismiss { + margin-left: 0.5em; +} + +form.upgrade { + margin-top: 8px; +} + +form.upgrade .hint { + font-style: italic; + font-size: 85%; + margin: -0.5em 0 2em; +} + +.update-php .spinner { + float: none; + margin: -4px 0; +} + +h2.wp-current-version { + margin-bottom: .3em; +} + +p.update-last-checked { + margin-top: 0; +} + +p.auto-update-status { + margin-top: 2em; + line-height: 1.8; +} + +#ajax-loading, +.ajax-loading, +.ajax-feedback, +.imgedit-wait-spin, +.list-ajax-loading { /* deprecated */ + visibility: hidden; +} + +#ajax-response.alignleft { + margin-left: 2em; +} + +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + margin: 3px 5px 0 -2px; +} + +.button-primary.updating-message:before { + color: #fff; +} + +.button-primary.updated-message:before { + color: #9ec2e6; +} + +.button.updated-message { + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +@media aural { + .wrap .notice p:before, + .button.installing:before, + .button.installed:before, + .update-message p:before { + speak: never; + } +} + + +/* @todo: this does not need its own section anymore */ +/*------------------------------------------------------------------------------ + 6.0 - Admin Header +------------------------------------------------------------------------------*/ +#adminmenu a, +#taglist a, +#catlist a { + text-decoration: none; +} + +/*------------------------------------------------------------------------------ + 6.1 - Screen Options Tabs +------------------------------------------------------------------------------*/ + +#screen-options-wrap, +#contextual-help-wrap { + margin: 0; + padding: 8px 20px 12px; + position: relative; +} + +#contextual-help-wrap { + overflow: auto; + margin-left: 0; +} + +#screen-meta-links { + float: right; + margin: 0 20px 0 0; +} + +/* screen options and help tabs revert */ +#screen-meta { + display: none; + margin: 0 20px -1px 0; + position: relative; + background-color: #fff; + border: 1px solid #c3c4c7; + border-top: none; + box-shadow: 0 0 0 transparent; +} + +#screen-options-link-wrap, +#contextual-help-link-wrap { + float: left; + margin: 0 0 0 6px; +} + +#screen-meta-links .screen-meta-toggle { + position: relative; + top: 0; +} + +#screen-meta-links .show-settings { + border: 1px solid #c3c4c7; + border-top: none; + height: auto; + margin-bottom: 0; + padding: 3px 6px 3px 16px; + background: #fff; + border-radius: 0 0 4px 4px; + color: #646970; + line-height: 1.7; + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; +} + +#screen-meta-links .show-settings:hover, +#screen-meta-links .show-settings:active, +#screen-meta-links .show-settings:focus { + color: #2c3338; +} + +#screen-meta-links .show-settings:focus { + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); +} + +#screen-meta-links .show-settings:active { + transform: none; +} + +#screen-meta-links .show-settings:after { + right: 0; + content: "\f140"; + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + padding: 0 5px 0 0; + bottom: 2px; + position: relative; + vertical-align: bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none; +} + +#screen-meta-links .screen-meta-active:after { + content: "\f142"; +} + +/* end screen options and help tabs */ + +.toggle-arrow { + background-repeat: no-repeat; + background-position: top left; + background-color: transparent; + height: 22px; + line-height: 22px; + display: block; +} + +.toggle-arrow-active { + background-position: bottom left; +} + +#screen-options-wrap h5, /* Back-compat for old plugins */ +#screen-options-wrap legend, +#contextual-help-wrap h5 { + margin: 0; + padding: 8px 0; + font-size: 13px; + font-weight: 600; +} + +.metabox-prefs label { + display: inline-block; + padding-right: 15px; + line-height: 2.35; +} + +#number-of-columns { + display: inline-block; + vertical-align: middle; + line-height: 30px; +} + +.metabox-prefs input[type=checkbox] { + margin-top: 0; + margin-right: 6px; +} + +.metabox-prefs label input, +.metabox-prefs label input[type=checkbox] { + margin: -4px 5px 0 0; +} + +.metabox-prefs .columns-prefs label input { + margin: -1px 2px 0 0; +} + +.metabox-prefs label a { + display: none; +} + +.metabox-prefs .screen-options input, +.metabox-prefs .screen-options label { + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.metabox-prefs .screen-options .screen-per-page { + margin-right: 15px; + padding-right: 0; +} + +.metabox-prefs .screen-options label { + line-height: 2.2; + padding-right: 0; +} + +.screen-options + .screen-options { + margin-top: 10px; +} + +.metabox-prefs .submit { + margin-top: 1em; + padding: 0; +} + +/*------------------------------------------------------------------------------ + 6.2 - Help Menu +------------------------------------------------------------------------------*/ + +#contextual-help-wrap { + padding: 0; +} + +#contextual-help-columns { + position: relative; +} + +#contextual-help-back { + position: absolute; + top: 0; + bottom: 0; + left: 150px; + right: 170px; + border: 1px solid #c3c4c7; + border-top: none; + border-bottom: none; + background: #f0f6fc; +} + +#contextual-help-wrap.no-sidebar #contextual-help-back { + right: 0; + border-right-width: 0; + border-bottom-right-radius: 2px; +} + +.contextual-help-tabs { + float: left; + width: 150px; + margin: 0; +} + +.contextual-help-tabs ul { + margin: 1em 0; +} + +.contextual-help-tabs li { + margin-bottom: 0; + list-style-type: none; + border-style: solid; + border-width: 0 0 0 2px; + border-color: transparent; +} + +.contextual-help-tabs a { + display: block; + padding: 5px 5px 5px 12px; + line-height: 1.4; + text-decoration: none; + border: 1px solid transparent; + border-right: none; + border-left: none; +} + +.contextual-help-tabs a:hover { + color: #2c3338; +} + +.contextual-help-tabs .active { + padding: 0; + margin: 0 -1px 0 0; + border-left: 2px solid #72aee6; + background: #f0f6fc; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02); +} + +.contextual-help-tabs .active a { + border-color: #c3c4c7; + color: #2c3338; +} + +.contextual-help-tabs-wrap { + padding: 0 20px; + overflow: auto; +} + +.help-tab-content { + display: none; + margin: 0 22px 12px 0; + line-height: 1.6; +} + +.help-tab-content.active { + display: block; +} + +.help-tab-content ul li { + list-style-type: disc; + margin-left: 18px; +} + +.contextual-help-sidebar { + width: 150px; + float: right; + padding: 0 8px 0 12px; + overflow: auto; +} + +/*------------------------------------------------------------------------------ + 8.0 - Layout Blocks +------------------------------------------------------------------------------*/ + +html.wp-toolbar { + padding-top: 32px; + box-sizing: border-box; + -ms-overflow-style: scrollbar; /* See ticket #48545 */ +} + +.widefat th, +.widefat td { + color: #50575e; +} + +.widefat th, +.widefat thead td, +.widefat tfoot td { + font-weight: 400; +} + +.widefat thead tr th, +.widefat thead tr td, +.widefat tfoot tr th, +.widefat tfoot tr td { + color: #2c3338; +} + +.widefat td p { + margin: 2px 0 0.8em; +} + +.widefat p, +.widefat ol, +.widefat ul { + color: #2c3338; +} + +.widefat .column-comment p { + margin: 0.6em 0; +} + +.widefat .column-comment ul { + list-style: initial; + margin-left: 2em; +} + +/* Screens with postboxes */ +.postbox-container { + float: left; +} + +.postbox-container .meta-box-sortables { + box-sizing: border-box; +} + +#wpbody-content .metabox-holder { + padding-top: 10px; +} + +.metabox-holder .postbox-container .meta-box-sortables { + /* The jQuery UI Sortables need some initial height to work properly. */ + min-height: 1px; + position: relative; +} + +#post-body-content { + width: 100%; + min-width: 463px; + float: left; +} + +#post-body.columns-2 #postbox-container-1 { + float: right; + margin-right: -300px; + width: 280px; +} + +#post-body.columns-2 #side-sortables { + min-height: 250px; +} + +/* one column on the dash */ +@media only screen and (max-width: 799px) { + #wpbody-content .metabox-holder .postbox-container .empty-container { + outline: none; + height: 0; + min-height: 0; + } +} + +.js .widget .widget-top, +.js .postbox .hndle { + cursor: move; +} + +.js .widget .widget-top.is-non-sortable, +.js .postbox .hndle.is-non-sortable { + cursor: auto; +} + +/* Configurable dashboard widgets "Configure" edit-box link. */ +.hndle a { + font-size: 12px; + font-weight: 400; +} + +.postbox-header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #c3c4c7; +} + +.postbox-header .hndle { + flex-grow: 1; + /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */ + display: flex; + justify-content: space-between; + align-items: center; +} + +.postbox-header .handle-actions { + flex-shrink: 0; +} + +/* Post box order and toggle buttons. */ +.postbox .handle-order-higher, +.postbox .handle-order-lower, +.postbox .handlediv { + width: 36px; + height: 36px; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; +} + +.postbox .handle-order-higher, +.postbox .handle-order-lower { + color: #787c82; + width: 1.62rem; +} + +/* Post box order buttons in the block editor meta boxes area. */ +.edit-post-meta-boxes-area .postbox .handle-order-higher, +.edit-post-meta-boxes-area .postbox .handle-order-lower { + width: 44px; + height: 44px; + color: #1d2327 +} + +.postbox .handle-order-higher[aria-disabled="true"], +.postbox .handle-order-lower[aria-disabled="true"] { + cursor: default; + color: #a7aaad; +} + +.sortable-placeholder { + border: 1px dashed #c3c4c7; + margin-bottom: 20px; +} + +.postbox, +.stuffbox { + margin-bottom: 20px; + padding: 0; + line-height: 1; +} + +.postbox.closed { + border-bottom: 0; +} + +/* user-select is not a part of the CSS standard - may change behavior in the future */ +.postbox .hndle, +.stuffbox .hndle { + -webkit-user-select: none; + user-select: none; +} + +.postbox .inside { + padding: 0 12px 12px; + line-height: 1.4; + font-size: 13px; +} + +.stuffbox .inside { + padding: 0; + line-height: 1.4; + font-size: 13px; + margin-top: 0; +} + +.postbox .inside { + margin: 11px 0; + position: relative; +} + +.postbox .inside > p:last-child, +.rss-widget ul li:last-child { + margin-bottom: 1px !important; +} + +.postbox.closed h3 { + border: none; + box-shadow: none; +} + +.postbox table.form-table { + margin-bottom: 0; +} + +.postbox table.widefat { + box-shadow: none; +} + +.temp-border { + border: 1px dotted #c3c4c7; +} + +.columns-prefs label { + padding: 0 10px 0 0; +} + +/* @todo: what is this doing here */ +#dashboard_right_now .versions .b, +#post-status-display, +#post-visibility-display, +#adminmenu .wp-submenu li.current, +#adminmenu .wp-submenu li.current a, +#adminmenu .wp-submenu li.current a:hover, +.media-item .percent, +.plugins .name, +#pass-strength-result.strong, +#pass-strength-result.short, +#ed_reply_toolbar #ed_reply_strong, +.item-controls .item-order a, +.feature-filter .feature-name, +#comment-status-display { + font-weight: 600; +} + +/*------------------------------------------------------------------------------ + 21.0 - Admin Footer +------------------------------------------------------------------------------*/ + +#wpfooter { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 10px 20px; + color: #50575e; +} + +#wpfooter p { + font-size: 13px; + margin: 0; + line-height: 1.55; +} + +#footer-thankyou { + font-style: italic; +} + +/*------------------------------------------------------------------------------ + 25.0 - Tabbed Admin Screen Interface (Experimental) +------------------------------------------------------------------------------*/ + +.nav-tab { + float: left; + border: 1px solid #c3c4c7; + border-bottom: none; + margin-left: 0.5em; /* half the font size so set the font size properly */ + padding: 5px 10px; + font-size: 14px; + line-height: 1.71428571; + font-weight: 600; + background: #dcdcde; + color: #50575e; + text-decoration: none; + white-space: nowrap; +} + +h3 .nav-tab, /* Back-compat for pre-4.4 */ +.nav-tab-small .nav-tab { + padding: 5px 14px; + font-size: 12px; + line-height: 1.33; +} + +.nav-tab:hover, +.nav-tab:focus { + background-color: #fff; + color: #3c434a; +} + +.nav-tab-active, +.nav-tab:focus:active { + box-shadow: none; +} + +.nav-tab-active { + margin-bottom: -1px; + color: #3c434a; +} + +.nav-tab-active, +.nav-tab-active:hover, +.nav-tab-active:focus, +.nav-tab-active:focus:active { + border-bottom: 1px solid #f0f0f1; + background: #f0f0f1; + color: #000; +} + +h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ +.wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */ +.nav-tab-wrapper { + border-bottom: 1px solid #c3c4c7; + margin: 0; + padding-top: 9px; + padding-bottom: 0; + line-height: inherit; +} + +/* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */ +.nav-tab-wrapper:not(.wp-clearfix):after { + content: ""; + display: table; + clear: both; +} + +/*------------------------------------------------------------------------------ + 26.0 - Misc +------------------------------------------------------------------------------*/ + +.spinner { + background: url(../images/spinner.gif) no-repeat; + background-size: 20px 20px; + display: inline-block; + visibility: hidden; + float: right; + vertical-align: middle; + opacity: 0.7; + filter: alpha(opacity=70); + width: 20px; + height: 20px; + margin: 4px 10px 0; +} + +.spinner.is-active, +.loading-content .spinner { + visibility: visible; +} + +#template > div { + margin-right: 16em; +} +#template .notice { + margin-top: 1em; + margin-right: 3%; +} +#template .notice p { + width: auto; +} +#template .submit .spinner { + float: none; +} + +.metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */ +.metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */ +.metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ +.metabox-holder h2.hndle { + font-size: 14px; + padding: 8px 12px; + margin: 0; + line-height: 1.4; +} + +/* Back-compat for nav-menus screen */ +.nav-menus-php .metabox-holder h3 { + padding: 10px 10px 11px 14px; + line-height: 1.5; +} + +#templateside ul li a { + text-decoration: none; +} + +.plugin-install #description, +.plugin-install-network #description { + width: 60%; +} + +table .vers, +table .column-visible, +table .column-rating { + text-align: left; +} + +.attention, +.error-message { + color: #d63638; + font-weight: 600; +} + +/* Scrollbar fix for bulk upgrade iframe */ +body.iframe { + height: 98%; +} + +/* Upgrader styles, Specific to Language Packs */ +.lp-show-latest p { + display: none; +} +.lp-show-latest p:last-child, +.lp-show-latest .lp-error p { + display: block; +} + +/* - Only used once or twice in all of WP - deprecate for global style +------------------------------------------------------------------------------*/ +.media-icon { + width: 62px; /* icon + border */ + text-align: center; +} + +.media-icon img { + border: 1px solid #dcdcde; + border: 1px solid rgba(0, 0, 0, 0.07); +} + +#howto { + font-size: 11px; + margin: 0 5px; + display: block; +} + +.importers { + font-size: 16px; + width: auto; +} + +.importers td { + padding-right: 14px; + line-height: 1.4; +} + +.importers .import-system { + max-width: 250px; +} + +.importers td.desc { + max-width: 500px; +} + +.importer-title, +.importer-desc, +.importer-action { + display: block; +} + +.importer-title { + color: #000; + font-size: 14px; + font-weight: 400; + margin-bottom: .2em; +} + +.importer-action { + line-height: 1.55; /* Same as with .updating-message */ + color: #50575e; + margin-bottom: 1em; +} + +#post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */ +#post-body #post-body-content #namediv h2 { + margin-top: 0; +} + +.edit-comment-author { + color: #1d2327; + border-bottom: 1px solid #f0f0f1; +} + +#namediv h3 label, /* Back-compat for pre-4.4 */ +#namediv h2 label { + vertical-align: baseline; +} + +#namediv table { + width: 100%; +} + +#namediv td.first { + width: 10px; + white-space: nowrap; +} + +#namediv input { + width: 100%; +} + +#namediv p { + margin: 10px 0; +} + +/* - Used - but could/should be deprecated with a CSS reset +------------------------------------------------------------------------------*/ +.zerosize { + height: 0; + width: 0; + margin: 0; + border: 0; + padding: 0; + overflow: hidden; + position: absolute; +} + +br.clear { + height: 2px; + line-height: 0.15; +} + +.checkbox { + border: none; + margin: 0; + padding: 0; +} + +fieldset { + border: 0; + padding: 0; + margin: 0; +} + +.post-categories { + display: inline; + margin: 0; + padding: 0; +} + +.post-categories li { + display: inline; +} + +/* Star Ratings - Back-compat for pre-3.8 */ +div.star-holder { + position: relative; + height: 17px; + width: 100px; + background: url(../images/stars.png?ver=20121108) repeat-x bottom left; +} + +div.star-holder .star-rating { + background: url(../images/stars.png?ver=20121108) repeat-x top left; + height: 17px; + float: left; +} + +/* Star Ratings */ +.star-rating { + white-space: nowrap; +} +.star-rating .star { + display: inline-block; + width: 20px; + height: 20px; + -webkit-font-smoothing: antialiased; + font-size: 20px; + line-height: 1; + font-family: dashicons; + text-decoration: inherit; + font-weight: 400; + font-style: normal; + vertical-align: top; + transition: color .1s ease-in; + text-align: center; + color: #dba617; +} + +.star-rating .star-full:before { + content: "\f155"; +} + +.star-rating .star-half:before { + content: "\f459"; +} + +.rtl .star-rating .star-half { + transform: rotateY(180deg); +} + +.star-rating .star-empty:before { + content: "\f154"; +} + +div.action-links { + font-weight: 400; + margin: 6px 0 0; +} + +/* Plugin install thickbox */ +#plugin-information { + background: #fff; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; + padding: 0; +} + +#plugin-information-scrollable { + overflow: auto; + -webkit-overflow-scrolling: touch; + height: 100%; +} + +#plugin-information-title { + padding: 0 26px; + background: #f6f7f7; + font-size: 22px; + font-weight: 600; + line-height: 2.4; + position: relative; + height: 56px; +} + +#plugin-information-title.with-banner { + margin-right: 0; + height: 250px; + background-size: cover; +} + +#plugin-information-title h2 { + font-size: 1em; + font-weight: 600; + padding: 0; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#plugin-information-title.with-banner h2 { + position: relative; + font-family: "Helvetica Neue", sans-serif; + display: inline-block; + font-size: 30px; + line-height: 1.68; + box-sizing: border-box; + max-width: 100%; + padding: 0 15px; + margin-top: 174px; + color: #fff; + background: rgba(29, 35, 39, 0.9); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); + border-radius: 8px; +} + +#plugin-information-title div.vignette { + display: none; +} + +#plugin-information-title.with-banner div.vignette { + position: absolute; + display: block; + top: 0; + left: 0; + height: 250px; + width: 100%; + background: transparent; + box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +#plugin-information-tabs { + padding: 0 16px; + position: relative; + right: 0; + left: 0; + min-height: 36px; + font-size: 0; + z-index: 1; + border-bottom: 1px solid #dcdcde; + background: #f6f7f7; +} + +#plugin-information-tabs a { + position: relative; + display: inline-block; + padding: 9px 10px; + margin: 0; + height: 18px; + line-height: 1.3; + font-size: 14px; + text-decoration: none; + transition: none; +} + +#plugin-information-tabs a.current { + margin: 0 -1px -1px; + background: #fff; + border: 1px solid #dcdcde; + border-bottom-color: #fff; + padding-top: 8px; + color: #2c3338; +} + +#plugin-information-tabs.with-banner a.current { + border-top: none; + padding-top: 9px; +} + +#plugin-information-tabs a:active, +#plugin-information-tabs a:focus { + outline: none; +} + +#plugin-information-content { + overflow: hidden; /* equal height column trick */ + background: #fff; + position: relative; + top: 0; + right: 0; + left: 0; + min-height: 100%; + /* Height of title + tabs + install now */ + min-height: calc( 100% - 152px ); +} + +#plugin-information-content.with-banner { + /* Height of banner + tabs + install now */ + min-height: calc( 100% - 346px ); +} + +#section-holder { + position: relative; + top: 0; + right: 250px; + bottom: 0; + left: 0; + margin-top: 10px; + margin-right: 250px; /* FYI box */ + padding: 10px 26px 99999px; /* equal height column trick */ + margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */ +} + +#section-holder .notice { + margin: 5px 0 15px; +} + +#section-holder .updated { + margin: 16px 0; +} + +#plugin-information .fyi { + float: right; + position: relative; + top: 0; + right: 0; + padding: 16px 16px 99999px; /* equal height column trick */ + margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */ + width: 217px; + border-left: 1px solid #dcdcde; + background: #f6f7f7; + color: #646970; +} + +#plugin-information .fyi strong { + color: #3c434a; +} + +#plugin-information .fyi h3 { + font-weight: 600; + text-transform: uppercase; + font-size: 12px; + color: #646970; + margin: 24px 0 8px; +} + +#plugin-information .fyi h2 { + font-size: 0.9em; + margin-bottom: 0; + margin-right: 0; +} + +#plugin-information .fyi ul { + padding: 0; + margin: 0; + list-style: none; +} + +#plugin-information .fyi li { + margin: 0 0 10px; +} + +#plugin-information .fyi-description { + margin-top: 0; +} + +#plugin-information .counter-container { + margin: 3px 0; +} + +#plugin-information .counter-label { + float: left; + margin-right: 5px; + min-width: 55px; +} + +#plugin-information .counter-back { + height: 17px; + width: 92px; + background-color: #dcdcde; + float: left; +} + +#plugin-information .counter-bar { + height: 17px; + background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */ + float: left; +} + +#plugin-information .counter-count { + margin-left: 5px; +} + +#plugin-information .fyi ul.contributors { + margin-top: 10px; +} + +#plugin-information .fyi ul.contributors li { + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} + +#plugin-information .fyi ul.contributors li { + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} + +#plugin-information .fyi ul.contributors li img { + vertical-align: middle; + margin-right: 4px; +} + +#plugin-information-footer { + padding: 13px 16px; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 40px; /* actual height: 40+13+13+1=67 */ + border-top: 1px solid #dcdcde; + background: #f6f7f7; +} + +/* rtl:ignore */ +#plugin-information .section { + direction: ltr; +} + +/* rtl:ignore */ +#plugin-information .section ul, +#plugin-information .section ol { + list-style-type: disc; + margin-left: 24px; +} + +#plugin-information .section, +#plugin-information .section p { + font-size: 14px; + line-height: 1.7; +} + +#plugin-information #section-screenshots ol { + list-style: none; + margin: 0; +} + +#plugin-information #section-screenshots li img { + vertical-align: text-top; + margin-top: 16px; + max-width: 100%; + width: auto; + height: auto; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +/* rtl:ignore */ +#plugin-information #section-screenshots li p { + font-style: italic; + padding-left: 20px; +} + +#plugin-information pre { + padding: 7px; + overflow: auto; + border: 1px solid #c3c4c7; +} + +#plugin-information blockquote { + border-left: 2px solid #dcdcde; + color: #646970; + font-style: italic; + margin: 1em 0; + padding: 0 0 0 1em; +} + +/* rtl:ignore */ +#plugin-information .review { + overflow: hidden; /* clearfix */ + width: 100%; + margin-bottom: 20px; + border-bottom: 1px solid #dcdcde; +} + +#plugin-information .review-title-section { + overflow: hidden; /* clearfix */ +} + +/* rtl:ignore */ +#plugin-information .review-title-section h4 { + display: inline-block; + float: left; + margin: 0 6px 0 0; +} + +#plugin-information .reviewer-info p { + clear: both; + margin: 0; + padding-top: 2px; +} + +/* rtl:ignore */ +#plugin-information .reviewer-info .avatar { + float: left; + margin: 4px 6px 0 0; +} + +/* rtl:ignore */ +#plugin-information .reviewer-info .star-rating { + float: left; +} + +/* rtl:ignore */ +#plugin-information .review-meta { + float: left; + margin-left: 0.75em; +} + +/* rtl:ignore */ +#plugin-information .review-body { + float: left; + width: 100%; +} + +.plugin-version-author-uri { + font-size: 13px; +} + +/* For non-js plugin installation screen ticket #36430. */ +.update-php .button.button-primary { + margin-right: 1em; +} + +@media screen and (max-width: 771px) { + #plugin-information-title.with-banner { + height: 100px; + } + + #plugin-information-title.with-banner h2 { + margin-top: 30px; + font-size: 20px; + line-height: 2; + max-width: 85%; + } + + #plugin-information-title.with-banner div.vignette { + height: 100px; + } + + #plugin-information-tabs { + overflow: hidden; /* clearfix */ + padding: 0; + height: auto; /* let tabs wrap */ + } + + #plugin-information-tabs a.current { + margin-bottom: 0; + border-bottom: none; + } + + #plugin-information .fyi { + float: none; + border: 1px solid #dcdcde; + position: static; + width: auto; + margin: 26px 26px 0; + padding-bottom: 0; /* reset from the two column height fix */ + } + + #section-holder { + position: static; + margin: 0; + padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */ + } + + #plugin-information .fyi h3, + #plugin-information .fyi small { + display: none; + } + + #plugin-information-footer { + padding: 12px 16px 0; + height: 46px; + } +} + +/* Thickbox for the Plugin details modal. */ +#TB_window.plugin-details-modal { + background: #fff; +} + +#TB_window.plugin-details-modal.thickbox-loading:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + left: 50%; + top: 50%; + z-index: -1; + margin: -10px 0 0 -10px; + background: #fff url(../images/spinner.gif) no-repeat center; + background-size: 20px 20px; + transform: translateZ(0); +} + +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + + #TB_window.plugin-details-modal.thickbox-loading:before { + background-image: url(../images/spinner-2x.gif); + } +} + +.plugin-details-modal #TB_title { + float: left; + height: 1px; +} + +.plugin-details-modal #TB_ajaxWindowTitle { + display: none; +} + +.plugin-details-modal #TB_closeWindowButton { + left: auto; + right: -30px; + color: #f0f0f1; +} + +.plugin-details-modal #TB_closeWindowButton:hover, +.plugin-details-modal #TB_closeWindowButton:focus { + color: #135e96; + outline: none; + box-shadow: none; +} + +.plugin-details-modal .tb-close-icon { + display: none; +} + +.plugin-details-modal #TB_closeWindowButton:after { + content: "\f335"; + font: normal 32px/29px 'dashicons'; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* move plugin install close icon to top on narrow screens */ +@media screen and (max-width: 830px) { + .plugin-details-modal #TB_closeWindowButton { + right: 0; + top: -30px; + } +} + +/* @todo: move this. */ +img { + border: none; +} + +/* Metabox collapse arrow indicators */ +.sidebar-name .toggle-indicator::before, +.meta-box-sortables .postbox .toggle-indicator::before, +.meta-box-sortables .postbox .order-higher-indicator::before, +.meta-box-sortables .postbox .order-lower-indicator::before, +.bulk-action-notice .toggle-indicator::before, +.privacy-text-box .toggle-indicator::before { + content: "\f142"; + display: inline-block; + font: normal 20px/1 dashicons; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none; +} + +.js .widgets-holder-wrap.closed .toggle-indicator::before, +.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before, +.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before, +.privacy-text-box.closed .toggle-indicator::before { + content: "\f140"; +} + +.postbox .handle-order-higher .order-higher-indicator::before { + content: "\f343"; + color: inherit; +} + +.postbox .handle-order-lower .order-lower-indicator::before { + content: "\f347"; + color: inherit; +} + +.postbox .handle-order-higher .order-higher-indicator::before, +.postbox .handle-order-lower .order-lower-indicator::before { + position: relative; + top: 0.11rem; + width: 20px; + height: 20px; +} + +.postbox .handlediv .toggle-indicator::before { + width: 20px; + border-radius: 50%; +} + +.postbox .handlediv .toggle-indicator::before { + position: relative; + top: 0.05rem; + text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */ +} + +.rtl .postbox .handlediv .toggle-indicator::before { + text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */ +} + +.bulk-action-notice .toggle-indicator::before { + line-height: 16px; + vertical-align: top; + color: #787c82; +} + +.postbox .handle-order-higher:focus, +.postbox .handle-order-lower:focus, +.postbox .handlediv:focus { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.postbox .handle-order-higher:focus .order-higher-indicator::before, +.postbox .handle-order-lower:focus .order-lower-indicator::before, +.postbox .handlediv:focus .toggle-indicator::before { + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +/* @todo: appears to be Press This only and overridden */ +#photo-add-url-div input[type="text"] { + width: 300px; +} + +/* Theme/Plugin file editor */ +.alignleft h2 { + margin: 0; +} + +#template textarea { + font-family: Consolas, Monaco, monospace; + font-size: 13px; + background: #f6f7f7; + -o-tab-size: 4; + tab-size: 4; +} + +#template textarea, +#template .CodeMirror { + width: 100%; + min-height: 60vh; + height: calc( 100vh - 295px ); + border: 1px solid #dcdcde; + box-sizing: border-box; +} + +#templateside > h2 { + padding-top: 6px; + padding-bottom: 7px; + margin: 0; +} + +#templateside ol, +#templateside ul { + margin: 0; + padding: 0; +} +#templateside > ul { + box-sizing: border-box; + margin-top: 0; + overflow: auto; + padding: 0; + min-height: 60vh; + height: calc(100vh - 295px); + background-color: #f6f7f7; + border: 1px solid #dcdcde; + border-left: none; +} +#templateside ul ul { + padding-left: 12px; +} +#templateside > ul > li > ul[role=group] { + padding-left: 0; +} + +/* + * Styles for Theme and Plugin file editors. + */ + +/* Hide collapsed items. */ +[role="treeitem"][aria-expanded="false"] > ul { + display: none; +} + +/* Use arrow dashicons for folder states, but hide from screen readers. */ +[role="treeitem"] span[aria-hidden] { + display: inline; + font-family: dashicons; + font-size: 20px; + position: absolute; + pointer-events: none; +} +[role="treeitem"][aria-expanded="false"] > .folder-label .icon:after { + content: "\f139"; +} +[role="treeitem"][aria-expanded="true"] > .folder-label .icon:after { + content: "\f140"; +} +[role="treeitem"] .folder-label { + display: block; + padding: 3px 3px 3px 12px; + cursor: pointer; +} + +/* Remove outline, and create our own focus and hover styles */ +[role="treeitem"] { + outline: 0; +} +[role="treeitem"] .folder-label.focus { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} +[role="treeitem"].hover, +[role="treeitem"] .folder-label.hover { + background-color: #f0f0f1; +} + +.tree-folder { + margin: 0; + position: relative; +} +[role="treeitem"] li { + position: relative; +} + +/* Styles for folder indicators/depth */ +.tree-folder .tree-folder::after { + content: ""; + display: block; + position: absolute; + left: 2px; + border-left: 1px solid #c3c4c7; + top: -13px; + bottom: 10px; +} +.tree-folder > li::before { + content: ""; + position: absolute; + display: block; + border-left: 1px solid #c3c4c7; + left: 2px; + top: -5px; + height: 18px; + width: 7px; + border-bottom: 1px solid #c3c4c7; +} +.tree-folder > li::after { + content: ""; + position: absolute; + display: block; + border-left: 1px solid #c3c4c7; + left: 2px; + bottom: -7px; + top: 0; +} + +/* current-file needs to adjustment for .notice styles */ +#templateside .current-file { + margin: -4px 0 -2px; +} +.tree-folder > .current-file::before { + left: 4px; + height: 15px; + width: 0; + border-left: none; + top: 3px; +} +.tree-folder > .current-file::after { + bottom: -4px; + height: 7px; + left: 2px; + top: auto; +} + +/* Lines shouldn't continue on last item */ +.tree-folder > li:last-child::after, +.tree-folder li:last-child > .tree-folder::after { + display: none; +} + +#theme-plugin-editor-selector, +#theme-plugin-editor-label, +#documentation label { + font-weight: 600; +} + +#theme-plugin-editor-label { + display: inline-block; + margin-bottom: 1em; +} + +/* rtl:ignore */ +#template textarea, +#docs-list { + direction: ltr; +} + +.fileedit-sub #theme, +.fileedit-sub #plugin { + max-width: 40%; +} +.fileedit-sub .alignright { + text-align: right; +} + +#template p { + width: 97%; +} + +#file-editor-linting-error { + margin-top: 1em; + margin-bottom: 1em; +} +#file-editor-linting-error > .notice { + margin: 0; + display: inline-block; +} +#file-editor-linting-error > .notice > p { + width: auto; +} +#template .submit { + margin-top: 1em; + padding: 0; +} + +#template .submit input[type=submit][disabled] { + cursor: not-allowed; +} +#templateside { + float: right; + width: 16em; + word-wrap: break-word; +} + +#postcustomstuff p.submit { + margin: 0; +} + +#templateside h4 { + margin: 1em 0 0; +} + +#templateside li { + margin: 4px 0; +} + +#templateside li:not(.howto) a, +.theme-editor-php .highlight { + display: block; + padding: 3px 0 3px 12px; + text-decoration: none; +} + +#templateside li:not(.howto) > a:first-of-type { + padding-top: 0; +} + +#templateside li.howto { + padding: 6px 12px 12px; +} + +.theme-editor-php .highlight { + margin: -3px 3px -3px -12px; +} + +#templateside .highlight { + border: none; + font-weight: 600; +} + +.nonessential { + color: #646970; + font-size: 11px; + font-style: italic; + padding-left: 12px; +} + +#documentation { + margin-top: 10px; +} + +#documentation label { + line-height: 1.8; + vertical-align: baseline; +} + +.fileedit-sub { + padding: 10px 0 8px; + line-height: 180%; +} + +#file-editor-warning .file-editor-warning-content { + margin: 25px; +} + +/* @todo: can we use a common class for these? */ +.nav-menus-php .item-edit:before, +.widget-top .widget-action .toggle-indicator:before, +.control-section .accordion-section-title:after, +.accordion-section-title:after { + content: "\f140"; + font: normal 20px/1 dashicons; + speak: never; + display: block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none; +} + +.widget-top .widget-action .toggle-indicator:before { + padding: 1px 2px 1px 0; + border-radius: 50%; +} + +.handlediv, +.postbox .handlediv.button-link, +.item-edit, +.toggle-indicator, +.accordion-section-title:after { + color: #787c82; +} + +.widget-action { + color: #50575e; /* #fafafa background in the Widgets screen */ +} + +.widget-top:hover .widget-action, +.widget-action:focus, +.handlediv:hover, +.handlediv:focus, +.postbox .handlediv.button-link:hover, +.postbox .handlediv.button-link:focus, +.item-edit:hover, +.item-edit:focus, +.sidebar-name:hover .toggle-indicator, +.accordion-section-title:hover:after { + color: #1d2327; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.widget-top .widget-action:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.control-section .accordion-section-title:after, +.accordion-section-title:after { + float: right; + right: 20px; + top: -2px; +} + +.control-section.open .accordion-section-title:after, +#customize-info.open .accordion-section-title:after, +.nav-menus-php .menu-item-edit-active .item-edit:before, +.widget.open .widget-top .widget-action .toggle-indicator:before, +.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before { + content: "\f142"; +} + +/*! + * jQuery UI Draggable/Sortable 1.11.4 + * http://jqueryui.com + * + * Copyright jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ +.ui-draggable-handle, +.ui-sortable-handle { + touch-action: none; +} + +/* Accordion */ +.accordion-section { + border-bottom: 1px solid #dcdcde; + margin: 0; +} + +.accordion-section.open .accordion-section-content, +.no-js .accordion-section .accordion-section-content { + display: block; +} + +.accordion-section.open:hover { + border-bottom-color: #dcdcde; +} + +.accordion-section-content { + display: none; + padding: 10px 20px 15px; + overflow: hidden; + background: #fff; +} + +.accordion-section-title { + margin: 0; + padding: 12px 15px 15px; + position: relative; + border-left: 1px solid #dcdcde; + border-right: 1px solid #dcdcde; + -webkit-user-select: none; + user-select: none; +} + +.js .accordion-section-title { + cursor: pointer; +} + +.js .accordion-section-title:after { + position: absolute; + top: 12px; + right: 10px; + z-index: 1; +} + +.accordion-section-title:focus { + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.accordion-section-title:hover:after, +.accordion-section-title:focus:after { + border-color: #a7aaad transparent; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.cannot-expand .accordion-section-title { + cursor: auto; +} + +.cannot-expand .accordion-section-title:after { + display: none; +} + +.control-section .accordion-section-title, +.customize-pane-child .accordion-section-title { + border-left: none; + border-right: none; + padding: 10px 10px 11px 14px; + line-height: 1.55; + background: #fff; +} + +.control-section .accordion-section-title:after, +.customize-pane-child .accordion-section-title:after { + top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */ +} + +.js .control-section:hover .accordion-section-title, +.js .control-section .accordion-section-title:hover, +.js .control-section.open .accordion-section-title, +.js .control-section .accordion-section-title:focus { + color: #1d2327; + background: #f6f7f7; +} + +.control-section.open .accordion-section-title { + /* When expanded */ + border-bottom: 1px solid #dcdcde; +} + +/* Edit Site */ +.network-admin .edit-site-actions { + margin-top: 0; +} + +/* My Sites */ +.my-sites { + display: block; + overflow: auto; + zoom: 1; +} + +.my-sites li { + display: block; + padding: 8px 3%; + min-height: 130px; + margin: 0; +} + +@media only screen and (max-width: 599px) { + .my-sites li { + min-height: 0; + } +} + +@media only screen and (min-width: 600px) { + .my-sites.striped li { + background-color: #fff; + position: relative; + } + .my-sites.striped li:after { + content: ""; + width: 1px; + height: 100%; + position: absolute; + top: 0; + right: 0; + background: #c3c4c7; + } + +} +@media only screen and (min-width: 600px) and (max-width: 699px) { + .my-sites li{ + float: left; + width: 44%; + } + .my-sites.striped li { + background-color: #fff; + } + .my-sites.striped li:nth-of-type(2n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(2n+2):after { + content: none; + } + .my-sites li:nth-of-type(4n+1), + .my-sites li:nth-of-type(4n+2) { + background-color: #f6f7f7; + } + +} + +@media only screen and (min-width: 700px) and (max-width: 1199px) { + .my-sites li { + float: left; + width: 27.333333%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(3n+3):after { + content: none; + } + .my-sites li:nth-of-type(6n+1), + .my-sites li:nth-of-type(6n+2), + .my-sites li:nth-of-type(6n+3) { + background-color: #f6f7f7; + } +} + +@media only screen and (min-width: 1200px) and (max-width: 1399px) { + .my-sites li { + float: left; + width: 21%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(4n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(4n+4):after { + content: none; + } + .my-sites li:nth-of-type(8n+1), + .my-sites li:nth-of-type(8n+2), + .my-sites li:nth-of-type(8n+3), + .my-sites li:nth-of-type(8n+4) { + background-color: #f6f7f7; + } +} + +@media only screen and (min-width: 1400px) and (max-width: 1599px) { + .my-sites li { + float: left; + width: 16%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(5n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(5n+5):after { + content: none; + } + .my-sites li:nth-of-type(10n+1), + .my-sites li:nth-of-type(10n+2), + .my-sites li:nth-of-type(10n+3), + .my-sites li:nth-of-type(10n+4), + .my-sites li:nth-of-type(10n+5) { + background-color: #f6f7f7; + } +} + +@media only screen and (min-width: 1600px) { + .my-sites li { + float: left; + width: 12.666666%; + padding: 8px 2%; + background-color: #fff; + } + .my-sites.striped li:nth-of-type(6n+1) { + clear: left; + } + .my-sites.striped li:nth-of-type(6n+6):after { + content: none; + } + .my-sites li:nth-of-type(12n+1), + .my-sites li:nth-of-type(12n+2), + .my-sites li:nth-of-type(12n+3), + .my-sites li:nth-of-type(12n+4), + .my-sites li:nth-of-type(12n+5), + .my-sites li:nth-of-type(12n+6) { + background-color: #f6f7f7; + } +} + +.my-sites li a { + text-decoration: none; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + /* Back-compat for pre-3.8 */ + div.star-holder, + div.star-holder .star-rating { + background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left; + background-size: 21px 37px; + } + + .spinner { + background-image: url(../images/spinner-2x.gif); + } + +} + +@media screen and (max-width: 782px) { + html.wp-toolbar { + padding-top: 46px; + } + + .screen-reader-shortcut:focus { + top: -39px; + } + + body { + min-width: 240px; + overflow-x: hidden; + } + + body * { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; + } + + #wpcontent { + position: relative; + margin-left: 0; + padding-left: 10px; + } + + #wpbody-content { + padding-bottom: 100px; + } + + .wrap { + clear: both; + margin-right: 12px; + margin-left: 0; + } + + /* categories */ + #col-left, + #col-right { + float: none; + width: auto; + } + + #col-left .col-wrap, + #col-right .col-wrap { + padding: 0; + } + + /* Hidden Elements */ + #collapse-menu, + .post-format-select { + display: none !important; + } + + .wrap h1.wp-heading-inline { + margin-bottom: 0.5em; + } + + .wrap .add-new-h2, /* deprecated */ + .wrap .add-new-h2:active, /* deprecated */ + .wrap .page-title-action, + .wrap .page-title-action:active { + padding: 10px 15px; + font-size: 14px; + white-space: nowrap; + } + + /* Feedback Messages */ + .notice, + .wrap div.updated, + .wrap div.error, + .media-upload-form div.error { + margin: 20px 0 10px; + padding: 5px 10px; + font-size: 14px; + line-height: 175%; + } + + .wp-core-ui .notice.is-dismissible { + padding-right: 46px; + } + + .notice-dismiss { + padding: 13px; + } + + .wrap .icon32 + h2 { + margin-top: -2px; + } + + .wp-responsive-open #wpbody { + right: -16em; + } + + code { + word-wrap: break-word; + word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */ + word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */ + } + + /* General Metabox */ + .postbox { + font-size: 14px; + } + + .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ + .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */ + .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */ + .metabox-holder h2 { + padding: 12px; + } + + .postbox .handlediv { + margin-top: 3px; + } + + /* Subsubsub Nav */ + .subsubsub { + font-size: 16px; + text-align: center; + margin-bottom: 15px; + } + + /* Theme/Plugin File Editor */ + + #template textarea, + #template .CodeMirror { + box-sizing: border-box; + } + + #templateside { + float: none; + width: auto; + } + + #templateside > ul { + border-left: 1px solid #dcdcde; + } + + #templateside li { + margin: 0; + } + + #templateside li:not(.howto) a { + display: block; + padding: 5px; + } + #templateside li.howto { + padding: 12px; + } + + #templateside .highlight { + padding: 5px; + margin-left: -5px; + margin-top: -5px; + } + + #template > div, + #template .notice { + float: none; + margin: 1em 0; + width: auto; + } + + #template .CodeMirror, + #template textarea { + width: 100%; + } + + #templateside ul ul { + padding-left: 1.5em; + } + [role="treeitem"] .folder-label { + display: block; + padding: 5px; + } + .tree-folder > li::before, + .tree-folder > li::after, + .tree-folder .tree-folder::after { + left: -8px; + } + .tree-folder > li::before { + top: 0; + height: 13px; + } + .tree-folder > .current-file::before { + left: -5px; + top: 7px; + width: 4px; + } + .tree-folder > .current-file::after { + height: 9px; + left: -8px; + } + .wrap #templateside span.notice { + margin-left: -5px; + width: 100%; + } + + .fileedit-sub .alignright { + float: left; + margin-top: 15px; + width: 100%; + text-align: left; + } + + .fileedit-sub .alignright label { + display: block; + } + + .fileedit-sub #theme, + .fileedit-sub #plugin { + margin-left: 0; + max-width: 70%; + } + + .fileedit-sub input[type="submit"] { + margin-bottom: 0; + } + + #documentation label[for="docs-list"] { + display: block; + } + + #documentation select[name="docs-list"] { + margin-left: 0; + max-width: 60%; + } + + #documentation input[type="button"] { + margin-bottom: 0; + } + + #wpfooter { + display: none; + } + + #comments-form .checkforspam { + display: none; + } + + .edit-comment-author { + margin: 2px 0 0; + } + + .filter-drawer .filter-group-feature input, + .filter-drawer .filter-group-feature label { + line-height: 2.1; + } + + .filter-drawer .filter-group-feature label { + margin-left: 32px; + } + + .wp-filter .button.drawer-toggle { + font-size: 13px; + line-height: 2; + height: 28px; + } + + /* Fix help tab columns for smaller screens */ + #screen-meta #contextual-help-wrap { + overflow: visible; + } + + #screen-meta #contextual-help-back, + #screen-meta .contextual-help-sidebar { + display: none; + } + + #screen-meta .contextual-help-tabs { + clear: both; + width: 100%; + float: none; + } + + #screen-meta .contextual-help-tabs ul { + margin: 0 0 1em; + padding: 1em 0 0; + } + + #screen-meta .contextual-help-tabs .active { + margin: 0; + } + + #screen-meta .contextual-help-tabs-wrap { + clear: both; + max-width: 100%; + float: none; + } + + #screen-meta, + #screen-meta-links { + margin-right: 10px; + } + + #screen-meta-links { + margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */ + } + + .wp-filter .search-form input[type="search"] { + font-size: 1rem; + } + + .wp-filter .search-form.search-plugins { + /* This element is a flex item. */ + min-width: 100%; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Disable horizontal scroll when responsive menu is open + since we push the main content off to the right. */ + #wpwrap.wp-responsive-open { + overflow-x: hidden; + } + + html.wp-toolbar { + padding-top: 0; + } + + .screen-reader-shortcut:focus { + top: 7px; + } + + #wpbody { + padding-top: 46px; + } + + /* Keep full-width boxes on Edit Post page from causing horizontal scroll */ + div#post-body.metabox-holder.columns-1 { + overflow-x: hidden; + } + + h1.nav-tab-wrapper, + .wrap h2.nav-tab-wrapper, + .nav-tab-wrapper { + border-bottom: 0; + } + + h1 .nav-tab, + h2 .nav-tab, + h3 .nav-tab, + nav .nav-tab { + margin: 10px 10px 0 0; + border-bottom: 1px solid #c3c4c7; + } + + .nav-tab-active:hover, + .nav-tab-active:focus, + .nav-tab-active:focus:active { + border-bottom: 1px solid #c3c4c7; + } + + .wp-filter .search-form input[type="search"] { + width: 100%; + } +} + +@media screen and (max-width: 320px) { + /* Prevent default center alignment and larger font for the Right Now widget when + the network dashboard is viewed on a small mobile device. */ + #network_dashboard_right_now .subsubsub { + font-size: 14px; + text-align: left; + } +} diff --git a/tools/storybook/wordpress/css/common.min.css b/tools/storybook/wordpress/css/common.min.css new file mode 100644 index 00000000000..e5f156989ee --- /dev/null +++ b/tools/storybook/wordpress/css/common.min.css @@ -0,0 +1,9 @@ +/*! This file is auto-generated */ +#wpwrap{height:auto;min-height:100%;width:100%;position:relative;-webkit-font-smoothing:subpixel-antialiased}#wpcontent{height:100%;padding-left:20px}#wpcontent,#wpfooter{margin-left:160px}.folded #wpcontent,.folded #wpfooter{margin-left:36px}#wpbody-content{padding-bottom:65px;float:left;width:100%;overflow:visible}.inner-sidebar{float:right;clear:right;display:none;width:281px;position:relative}.columns-2 .inner-sidebar{margin-right:auto;width:286px;display:block}.columns-2 .inner-sidebar #side-sortables,.inner-sidebar #side-sortables{min-height:300px;width:280px;padding:0}.has-right-sidebar .inner-sidebar{display:block}.has-right-sidebar #post-body{float:left;clear:left;width:100%;margin-right:-2000px}.has-right-sidebar #post-body-content{margin-right:300px;float:none;width:auto}#col-left{float:left;width:35%}#col-right{float:right;width:65%}#col-left .col-wrap{padding:0 6px 0 0}#col-right .col-wrap{padding:0 0 0 6px}.alignleft{float:left}.alignright{float:right}.textleft{text-align:left}.textright{text-align:right}.clear{clear:both}.wp-clearfix:after{content:"";display:table;clear:both}.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.button .screen-reader-text{height:auto}.screen-reader-shortcut{position:absolute;top:-1000em}.screen-reader-shortcut:focus{left:6px;top:-25px;height:auto;width:auto;display:block;font-size:14px;font-weight:600;padding:15px 23px 14px;background:#f0f0f1;color:#2271b1;z-index:100000;line-height:normal;box-shadow:0 0 2px 2px rgba(0,0,0,.6);text-decoration:none;outline:2px solid transparent;outline-offset:-2px}.hidden,.js .closed .inside,.js .hide-if-js,.js .wp-core-ui .hide-if-js,.js.wp-core-ui .hide-if-js,.no-js .hide-if-no-js,.no-js .wp-core-ui .hide-if-no-js,.no-js.wp-core-ui .hide-if-no-js{display:none}#menu-management .menu-edit,#menu-settings-column .accordion-container,.comment-ays,.feature-filter,.imgedit-group,.manage-menus,.menu-item-handle,.popular-tags,.stuffbox,.widget-inside,.widget-top,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04)}.comment-ays,.feature-filter,.imgedit-group,.popular-tags,.stuffbox,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{background:#fff}body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4em;min-width:600px}body.iframe{min-width:0;padding-top:1px}body.modal-open{overflow:hidden}body.mobile.modal-open #wpwrap{overflow:hidden;position:fixed;height:100%}iframe,img{border:0}td{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a,div{outline:0}a:active,a:hover{color:#135e96}.wp-person a:focus .gravatar,a:focus,a:focus .media-icon img,a:focus .plugin-icon{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);outline:1px solid transparent}#adminmenu a:focus{box-shadow:none;outline:1px solid transparent;outline-offset:-1px}.screen-reader-text:focus{box-shadow:none;outline:0}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}.wp-die-message,p{font-size:13px;line-height:1.5;margin:1em 0}blockquote{margin:1em}dd,li{margin-bottom:6px}h1,h2,h3,h4,h5,h6{display:block;font-weight:600}h1{color:#1d2327;font-size:2em;margin:.67em 0}h2,h3{color:#1d2327;font-size:1.3em;margin:1em 0}.update-core-php h2{margin-top:4em}.update-messages h2,.update-php h2,h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}ol,ul{padding:0}ul{list-style:none}ol{list-style-type:decimal;margin-left:2em}ul.ul-disc{list-style:disc outside}ul.ul-square{list-style:square outside}ol.ol-decimal{list-style:decimal outside}ol.ol-decimal,ul.ul-disc,ul.ul-square{margin-left:1.8em}ol.ol-decimal>li,ul.ul-disc>li,ul.ul-square>li{margin:0 0 .5em}.ltr{direction:ltr}.code,code{font-family:Consolas,Monaco,monospace;direction:ltr;unicode-bidi:embed}code,kbd{padding:3px 5px 2px;margin:0 1px;background:#f0f0f1;background:rgba(0,0,0,.07);font-size:13px}.subsubsub{list-style:none;margin:8px 0 0;padding:0;font-size:13px;float:left;color:#646970}.subsubsub a{line-height:2;padding:.2em;text-decoration:none}.subsubsub a .count,.subsubsub a.current .count{color:#50575e;font-weight:400}.subsubsub a.current{font-weight:600;border:none}.subsubsub li{display:inline-block;margin:0;padding:0;white-space:nowrap}.widefat{border-spacing:0;width:100%;clear:both;margin:0}.widefat *{word-wrap:break-word}.widefat a,.widefat button.button-link{text-decoration:none}.widefat td,.widefat th{padding:8px 10px}.widefat thead td,.widefat thead th{border-bottom:1px solid #c3c4c7}.widefat tfoot td,.widefat tfoot th{border-top:1px solid #c3c4c7;border-bottom:none}.widefat .no-items td{border-bottom-width:0}.widefat td{vertical-align:top}.widefat td,.widefat td ol,.widefat td p,.widefat td ul{font-size:13px;line-height:1.5em}.widefat tfoot td,.widefat th,.widefat thead td{text-align:left;line-height:1.3em;font-size:14px}.updates-table td input,.widefat tfoot td input,.widefat th input,.widefat thead td input{margin:0 0 0 8px;padding:0;vertical-align:text-top}.widefat .check-column{width:2.2em;padding:6px 0 25px;vertical-align:top}.widefat tbody th.check-column{padding:9px 0 22px}.updates-table tbody td.check-column,.widefat tbody th.check-column,.widefat tfoot td.check-column,.widefat thead td.check-column{padding:11px 0 0 3px}.widefat tfoot td.check-column,.widefat thead td.check-column{padding-top:4px;vertical-align:middle}.update-php div.error,.update-php div.updated{margin-left:0}.no-js .widefat tfoot .check-column input,.no-js .widefat thead .check-column input{display:none}.column-comments,.column-links,.column-posts,.widefat .num{text-align:center}.widefat th#comments{vertical-align:middle}.wrap{margin:10px 20px 0 2px}.wrap.block-editor-no-js{padding-left:20px}.postbox .inside h2,.wrap [class$=icon32]+h2,.wrap h1,.wrap>h2:first-child{font-size:23px;font-weight:400;margin:0;padding:9px 0 4px;line-height:1.3}.wrap h1.wp-heading-inline{display:inline-block;margin-right:5px}.wp-header-end{visibility:hidden;margin:-2px 0 0}.subtitle{margin:0;padding-left:25px;color:#50575e;font-size:14px;font-weight:400;line-height:1}.subtitle strong{word-break:break-all}.wrap .add-new-h2,.wrap .add-new-h2:active,.wrap .page-title-action,.wrap .page-title-action:active{margin-left:4px;padding:4px 8px;position:relative;top:-3px;text-decoration:none;border:1px solid #2271b1;border-radius:2px;text-shadow:none;font-weight:600;font-size:13px;line-height:normal;color:#2271b1;background:#f6f7f7;cursor:pointer}.wrap .wp-heading-inline+.page-title-action{margin-left:0}.wrap .add-new-h2:hover,.wrap .page-title-action:hover{background:#f0f0f1;border-color:#0a4b78;color:#0a4b78}.page-title-action:focus{color:#0a4b78}.form-table th label[for=WPLANG] .dashicons,.form-table th label[for=locale] .dashicons{margin-left:5px}.wrap .page-title-action:focus{border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.wrap h1.long-header{padding-right:0}.wp-dialog{background-color:#fff}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#8c8f94;box-shadow:0 1px 2px rgba(0,0,0,.1)}.sorthelper{background-color:#c5d9ed}.ac_match,.subsubsub a.current{color:#000}.alternate,.striped>tbody>:nth-child(odd),ul.striped>:nth-child(odd){background-color:#f6f7f7}.bar{background-color:#f0f0f1;border-right-color:#4f94d4}.highlight{background-color:#f0f6fc;color:#3c434a}.wp-ui-primary{color:#fff;background-color:#2c3338}.wp-ui-text-primary{color:#2c3338}.wp-ui-highlight{color:#fff;background-color:#2271b1}.wp-ui-text-highlight{color:#2271b1}.wp-ui-notification{color:#fff;background-color:#d63638}.wp-ui-text-notification{color:#d63638}.wp-ui-text-icon{color:#8c8f94}img.emoji{display:inline!important;border:none!important;height:1em!important;width:1em!important;margin:0 .07em!important;vertical-align:-.1em!important;background:0 0!important;padding:0!important;box-shadow:none!important}#nav-menu-footer,#nav-menu-header,#your-profile #rich_editing,.checkbox,.control-section .accordion-section-title,.menu-item-handle,.postbox .hndle,.side-info,.sidebar-name,.stuffbox .hndle,.widefat tfoot td,.widefat tfoot th,.widefat thead td,.widefat thead th,.widget .widget-top{line-height:1.4em}.menu-item-handle,.widget .widget-top{background:#f6f7f7;color:#1d2327}.stuffbox .hndle{border-bottom:1px solid #c3c4c7}.quicktags{background-color:#c3c4c7;color:#000;font-size:12px}.icon32{display:none}#bulk-titles .ntdelbutton:before,.notice-dismiss:before,.tagchecklist .ntdelbutton .remove-tag-icon:before,.welcome-panel .welcome-panel-close:before{background:0 0;color:#787c82;content:"\f153";display:block;font:normal 16px/20px dashicons;speak:never;height:20px;text-align:center;width:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.welcome-panel .welcome-panel-close:before{margin:0}.tagchecklist .ntdelbutton .remove-tag-icon:before{margin-left:2px;border-radius:50%;color:#2271b1;line-height:1.28}.tagchecklist .ntdelbutton:focus{outline:0}#bulk-titles .ntdelbutton:focus:before,#bulk-titles .ntdelbutton:hover:before,.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,.tagchecklist .ntdelbutton:hover .remove-tag-icon:before{color:#d63638}.tagchecklist .ntdelbutton:focus .remove-tag-icon:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.key-labels label{line-height:24px}b,strong{font-weight:600}.pre{white-space:pre-wrap;word-wrap:break-word}.howto{color:#646970;display:block}p.install-help{margin:8px 0;font-style:italic}.no-break{white-space:nowrap}hr{border:0;border-top:1px solid #dcdcde;border-bottom:1px solid #f6f7f7}#all-plugins-table .plugins a.delete,#delete-link a.delete,#media-items a.delete,#media-items a.delete-permanently,#nav-menu-footer .menu-delete,#search-plugins-table .plugins a.delete,.plugins a.delete,.privacy_requests .remove-personal-data .remove-personal-data-handle,.row-actions span.delete a,.row-actions span.spam a,.row-actions span.trash a,.submitbox .submitdelete,a#remove-post-thumbnail{color:#b32d2e}#all-plugins-table .plugins a.delete:hover,#delete-link a.delete:hover,#media-items a.delete-permanently:hover,#media-items a.delete:hover,#nav-menu-footer .menu-delete:hover,#search-plugins-table .plugins a.delete:hover,.file-error,.plugins a.delete:hover,.privacy_requests .remove-personal-data .remove-personal-data-handle:hover,.row-actions .delete a:hover,.row-actions .spam a:hover,.row-actions .trash a:hover,.submitbox .submitdelete:hover,a#remove-post-thumbnail:hover,abbr.required,span.required{color:#b32d2e;border:none}#major-publishing-actions{padding:10px;clear:both;border-top:1px solid #dcdcde;background:#f6f7f7}#delete-action{float:left;line-height:2.30769231}#delete-link{line-height:2.30769231;vertical-align:middle;text-align:left;margin-left:8px}#delete-link a{text-decoration:none}#publishing-action{text-align:right;float:right;line-height:1.9}#publishing-action .spinner{float:none;margin-top:5px}#misc-publishing-actions{padding:6px 0 0}.misc-pub-section{padding:6px 10px 8px}.misc-pub-filename{word-wrap:break-word}#minor-publishing-actions{padding:10px 10px 0;text-align:right}#save-post{float:left}.preview{float:right}#sticky-span{margin-left:18px}.approve,.unapproved .unapprove{display:none}.spam .approve,.trash .approve,.unapproved .approve{display:inline}td.action-links,th.action-links{text-align:right}#misc-publishing-actions .notice{margin-left:10px;margin-right:10px}.wp-filter{display:inline-block;position:relative;box-sizing:border-box;margin:12px 0 25px;padding:0 10px;width:100%;box-shadow:0 1px 1px rgba(0,0,0,.04);border:1px solid #c3c4c7;background:#fff;color:#50575e;font-size:13px}.wp-filter a{text-decoration:none}.filter-count{display:inline-block;vertical-align:middle;min-width:4em}.filter-count .count,.title-count{display:inline-block;position:relative;top:-1px;padding:4px 10px;border-radius:30px;background:#646970;color:#fff;font-size:14px;font-weight:600}.title-count{display:inline;top:-3px;margin-left:5px;margin-right:20px}.filter-items{float:left}.filter-links{display:inline-block;margin:0}.filter-links li{display:inline-block;margin:0}.filter-links li>a{display:inline-block;margin:0 10px;padding:15px 0;border-bottom:4px solid #fff;color:#646970;cursor:pointer}.filter-links .current{box-shadow:none;border-bottom:4px solid #646970;color:#1d2327}.filter-links li>a:focus,.filter-links li>a:hover,.show-filters .filter-links a.current:focus,.show-filters .filter-links a.current:hover{color:#135e96}.wp-filter .search-form{float:right;margin:10px 0}.wp-filter .search-form input[type=search]{margin:1px 0;width:280px;max-width:100%}.wp-filter .search-form select{margin:0}.plugin-install-php .wp-filter{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.wp-filter .search-form.search-plugins{margin-top:0}.wp-filter .search-form.search-plugins .wp-filter-search,.wp-filter .search-form.search-plugins select{display:inline-block;margin-top:10px;vertical-align:top}.wp-filter .button.drawer-toggle{margin:10px 9px 0;padding:0 10px 0 6px;border-color:transparent;background-color:transparent;color:#646970;vertical-align:baseline;box-shadow:none}.wp-filter .drawer-toggle:before{content:"\f111";margin:0 5px 0 0;color:#646970;font:normal 16px/1 dashicons;vertical-align:text-bottom;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-filter .button.drawer-toggle:focus,.wp-filter .button.drawer-toggle:hover,.wp-filter .drawer-toggle:focus:before,.wp-filter .drawer-toggle:hover:before{background-color:transparent;color:#135e96}.wp-filter .button.drawer-toggle:focus:active,.wp-filter .button.drawer-toggle:hover{border-color:transparent}.wp-filter .button.drawer-toggle:focus{border-color:#4f94d4}.wp-filter .button.drawer-toggle:active{background:0 0;box-shadow:none;transform:none}.wp-filter .drawer-toggle.current:before{color:#fff}.filter-drawer,.wp-filter .favorites-form{display:none;margin:0 -10px 0 -20px;padding:20px;border-top:1px solid #f0f0f1;background:#f6f7f7;overflow:hidden}.show-favorites-form .favorites-form,.show-filters .filter-drawer{display:block}.show-filters .filter-links a.current{border-bottom:none}.show-filters .wp-filter .button.drawer-toggle{border-radius:2px;background:#646970;color:#fff}.show-filters .wp-filter .drawer-toggle:focus,.show-filters .wp-filter .drawer-toggle:hover{background:#2271b1}.show-filters .wp-filter .drawer-toggle:before{color:#fff}.filter-group{box-sizing:border-box;position:relative;float:left;margin:0 1% 0 0;padding:20px 10px 10px;width:24%;background:#fff;border:1px solid #dcdcde;box-shadow:0 1px 1px rgba(0,0,0,.04)}.filter-group legend{position:absolute;top:10px;display:block;margin:0;padding:0;font-size:1em;font-weight:600}.filter-drawer .filter-group-feature{margin:28px 0 0;list-style-type:none;font-size:12px}.filter-drawer .filter-group-feature input,.filter-drawer .filter-group-feature label{line-height:1.4}.filter-drawer .filter-group-feature input{position:absolute;margin:0}.filter-group .filter-group-feature label{display:block;margin:14px 0 14px 23px}.filter-drawer .buttons{clear:both;margin-bottom:20px}.filter-drawer .filter-group+.buttons{margin-bottom:0;padding-top:20px}.filter-drawer .buttons .button span{display:inline-block;opacity:.8;font-size:12px;text-indent:10px}.wp-filter .button.clear-filters{display:none;margin-left:10px}.wp-filter .button-link.edit-filters{padding:0 5px;line-height:2.2}.filtered-by{display:none;margin:0}.filtered-by>span{font-weight:600}.filtered-by a{margin-left:10px}.filtered-by .tags{display:inline}.filtered-by .tag{margin:0 5px;padding:4px 8px;border:1px solid #dcdcde;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;font-size:11px}.filters-applied .filter-drawer .buttons,.filters-applied .filter-drawer br,.filters-applied .filter-group{display:none}.filters-applied .filtered-by{display:block}.filters-applied .filter-drawer{padding:20px}.error .content-filterable,.loading-content .content-filterable,.show-filters .content-filterable,.show-filters .favorites-form,.show-filters.filters-applied.loading-content .content-filterable{display:none}.show-filters.filters-applied .content-filterable{display:block}.loading-content .spinner{display:block;margin:40px auto 0;float:none}@media only screen and (max-width:1120px){.filter-drawer{border-bottom:1px solid #f0f0f1}.filter-group{margin-bottom:0;margin-top:5px;width:100%}.filter-group li{margin:10px 0}}@media only screen and (max-width:1000px){.filter-items{float:none}.wp-filter .media-toolbar-primary,.wp-filter .media-toolbar-secondary,.wp-filter .search-form{float:none;position:relative;max-width:100%}}@media only screen and (max-width:782px){.filter-group li{padding:0;width:50%}}@media only screen and (max-width:320px){.filter-count{display:none}.wp-filter .drawer-toggle{margin:10px 0}.filter-group li,.wp-filter .search-form input[type=search]{width:100%}}.notice,div.error,div.updated{background:#fff;border:1px solid #c3c4c7;border-left-width:4px;box-shadow:0 1px 1px rgba(0,0,0,.04);margin:5px 15px 2px;padding:1px 12px}div[class=update-message]{padding:.5em 12px .5em 0}.form-table td .notice p,.notice p,.notice-title,div.error p,div.updated p{margin:.5em 0;padding:2px}.error a{text-decoration:underline}.updated a{padding-bottom:2px}.notice-alt{box-shadow:none}.notice-large{padding:10px 20px}.notice-title{display:inline-block;color:#1d2327;font-size:18px}.wp-core-ui .notice.is-dismissible{padding-right:38px;position:relative}.notice-dismiss{position:absolute;top:0;right:1px;border:none;margin:0;padding:9px;background:0 0;color:#787c82;cursor:pointer}.notice-dismiss:active:before,.notice-dismiss:focus:before,.notice-dismiss:hover:before{color:#d63638}.notice-dismiss:focus{outline:0;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.notice-success,div.updated{border-left-color:#00a32a}.notice-success.notice-alt{background-color:#edfaef}.notice-warning{border-left-color:#dba617}.notice-warning.notice-alt{background-color:#fcf9e8}.notice-error,div.error{border-left-color:#d63638}.notice-error.notice-alt{background-color:#fcf0f1}.notice-info{border-left-color:#72aee6}.notice-info.notice-alt{background-color:#f0f6fc}.button.installed:before,.button.installing:before,.button.updated-message:before,.button.updating-message:before,.import-php .updating-message:before,.update-message p:before,.updated-message p:before,.updating-message p:before{display:inline-block;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.media-upload-form .notice,.media-upload-form div.error,.wrap .notice,.wrap div.error,.wrap div.updated{margin:5px 0 15px}.wrap #templateside .notice{display:block;margin:0;padding:5px 8px;font-weight:600;text-decoration:none}.wrap #templateside span.notice{margin-left:-12px}#templateside li.notice a{padding:0}.button.installing:before,.button.updating-message:before,.import-php .updating-message:before,.update-message p:before,.updating-message p:before{color:#d63638;content:"\f463"}.button.installing:before,.button.updating-message:before,.import-php .updating-message:before,.plugins .column-auto-updates .dashicons-update.spin,.theme-overlay .theme-autoupdate .dashicons-update.spin,.updating-message p:before{animation:rotation 2s infinite linear}@media (prefers-reduced-motion:reduce){.button.installing:before,.button.updating-message:before,.import-php .updating-message:before,.plugins .column-auto-updates .dashicons-update.spin,.theme-overlay .theme-autoupdate .dashicons-update.spin,.updating-message p:before{animation:none}}.theme-overlay .theme-autoupdate .dashicons-update.spin{margin-right:3px}.button.updated-message:before,.installed p:before,.updated-message p:before{color:#68de7c;content:"\f147"}.update-message.notice-error p:before{color:#d63638;content:"\f534"}.import-php .updating-message:before,.wrap .notice p:before{margin-right:6px;vertical-align:bottom}#update-nag,.update-nag{display:inline-block;line-height:1.4;padding:11px 15px;font-size:14px;margin:25px 20px 0 2px}ul#dismissed-updates{display:none}#dismissed-updates li>p{margin-top:0}#dismiss,#undismiss{margin-left:.5em}form.upgrade{margin-top:8px}form.upgrade .hint{font-style:italic;font-size:85%;margin:-.5em 0 2em}.update-php .spinner{float:none;margin:-4px 0}h2.wp-current-version{margin-bottom:.3em}p.update-last-checked{margin-top:0}p.auto-update-status{margin-top:2em;line-height:1.8}#ajax-loading,.ajax-feedback,.ajax-loading,.imgedit-wait-spin,.list-ajax-loading{visibility:hidden}#ajax-response.alignleft{margin-left:2em}.button.installed:before,.button.installing:before,.button.updated-message:before,.button.updating-message:before{margin:3px 5px 0 -2px}.button-primary.updating-message:before{color:#fff}.button-primary.updated-message:before{color:#9ec2e6}.button.updated-message{transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}@media aural{.button.installed:before,.button.installing:before,.update-message p:before,.wrap .notice p:before{speak:never}}#adminmenu a,#catlist a,#taglist a{text-decoration:none}#contextual-help-wrap,#screen-options-wrap{margin:0;padding:8px 20px 12px;position:relative}#contextual-help-wrap{overflow:auto;margin-left:0}#screen-meta-links{float:right;margin:0 20px 0 0}#screen-meta{display:none;margin:0 20px -1px 0;position:relative;background-color:#fff;border:1px solid #c3c4c7;border-top:none;box-shadow:0 0 0 transparent}#contextual-help-link-wrap,#screen-options-link-wrap{float:left;margin:0 0 0 6px}#screen-meta-links .screen-meta-toggle{position:relative;top:0}#screen-meta-links .show-settings{border:1px solid #c3c4c7;border-top:none;height:auto;margin-bottom:0;padding:3px 6px 3px 16px;background:#fff;border-radius:0 0 4px 4px;color:#646970;line-height:1.7;box-shadow:0 0 0 transparent;transition:box-shadow .1s linear}#screen-meta-links .show-settings:active,#screen-meta-links .show-settings:focus,#screen-meta-links .show-settings:hover{color:#2c3338}#screen-meta-links .show-settings:focus{border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8)}#screen-meta-links .show-settings:active{transform:none}#screen-meta-links .show-settings:after{right:0;content:"\f140";font:normal 20px/1 dashicons;speak:never;display:inline-block;padding:0 5px 0 0;bottom:2px;position:relative;vertical-align:bottom;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none}#screen-meta-links .screen-meta-active:after{content:"\f142"}.toggle-arrow{background-repeat:no-repeat;background-position:top left;background-color:transparent;height:22px;line-height:22px;display:block}.toggle-arrow-active{background-position:bottom left}#contextual-help-wrap h5,#screen-options-wrap h5,#screen-options-wrap legend{margin:0;padding:8px 0;font-size:13px;font-weight:600}.metabox-prefs label{display:inline-block;padding-right:15px;line-height:2.35}#number-of-columns{display:inline-block;vertical-align:middle;line-height:30px}.metabox-prefs input[type=checkbox]{margin-top:0;margin-right:6px}.metabox-prefs label input,.metabox-prefs label input[type=checkbox]{margin:-4px 5px 0 0}.metabox-prefs .columns-prefs label input{margin:-1px 2px 0 0}.metabox-prefs label a{display:none}.metabox-prefs .screen-options input,.metabox-prefs .screen-options label{margin-top:0;margin-bottom:0;vertical-align:middle}.metabox-prefs .screen-options .screen-per-page{margin-right:15px;padding-right:0}.metabox-prefs .screen-options label{line-height:2.2;padding-right:0}.screen-options+.screen-options{margin-top:10px}.metabox-prefs .submit{margin-top:1em;padding:0}#contextual-help-wrap{padding:0}#contextual-help-columns{position:relative}#contextual-help-back{position:absolute;top:0;bottom:0;left:150px;right:170px;border:1px solid #c3c4c7;border-top:none;border-bottom:none;background:#f0f6fc}#contextual-help-wrap.no-sidebar #contextual-help-back{right:0;border-right-width:0;border-bottom-right-radius:2px}.contextual-help-tabs{float:left;width:150px;margin:0}.contextual-help-tabs ul{margin:1em 0}.contextual-help-tabs li{margin-bottom:0;list-style-type:none;border-style:solid;border-width:0 0 0 2px;border-color:transparent}.contextual-help-tabs a{display:block;padding:5px 5px 5px 12px;line-height:1.4;text-decoration:none;border:1px solid transparent;border-right:none;border-left:none}.contextual-help-tabs a:hover{color:#2c3338}.contextual-help-tabs .active{padding:0;margin:0 -1px 0 0;border-left:2px solid #72aee6;background:#f0f6fc;box-shadow:0 2px 0 rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.02)}.contextual-help-tabs .active a{border-color:#c3c4c7;color:#2c3338}.contextual-help-tabs-wrap{padding:0 20px;overflow:auto}.help-tab-content{display:none;margin:0 22px 12px 0;line-height:1.6}.help-tab-content.active{display:block}.help-tab-content ul li{list-style-type:disc;margin-left:18px}.contextual-help-sidebar{width:150px;float:right;padding:0 8px 0 12px;overflow:auto}html.wp-toolbar{padding-top:32px;box-sizing:border-box;-ms-overflow-style:scrollbar}.widefat td,.widefat th{color:#50575e}.widefat tfoot td,.widefat th,.widefat thead td{font-weight:400}.widefat tfoot tr td,.widefat tfoot tr th,.widefat thead tr td,.widefat thead tr th{color:#2c3338}.widefat td p{margin:2px 0 .8em}.widefat ol,.widefat p,.widefat ul{color:#2c3338}.widefat .column-comment p{margin:.6em 0}.widefat .column-comment ul{list-style:initial;margin-left:2em}.postbox-container{float:left}.postbox-container .meta-box-sortables{box-sizing:border-box}#wpbody-content .metabox-holder{padding-top:10px}.metabox-holder .postbox-container .meta-box-sortables{min-height:1px;position:relative}#post-body-content{width:100%;min-width:463px;float:left}#post-body.columns-2 #postbox-container-1{float:right;margin-right:-300px;width:280px}#post-body.columns-2 #side-sortables{min-height:250px}@media only screen and (max-width:799px){#wpbody-content .metabox-holder .postbox-container .empty-container{outline:0;height:0;min-height:0}}.js .postbox .hndle,.js .widget .widget-top{cursor:move}.js .postbox .hndle.is-non-sortable,.js .widget .widget-top.is-non-sortable{cursor:auto}.hndle a{font-size:12px;font-weight:400}.postbox-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c3c4c7}.postbox-header .hndle{flex-grow:1;display:flex;justify-content:space-between;align-items:center}.postbox-header .handle-actions{flex-shrink:0}.postbox .handle-order-higher,.postbox .handle-order-lower,.postbox .handlediv{width:36px;height:36px;margin:0;padding:0;border:0;background:0 0;cursor:pointer}.postbox .handle-order-higher,.postbox .handle-order-lower{color:#787c82;width:1.62rem}.edit-post-meta-boxes-area .postbox .handle-order-higher,.edit-post-meta-boxes-area .postbox .handle-order-lower{width:44px;height:44px;color:#1d2327}.postbox .handle-order-higher[aria-disabled=true],.postbox .handle-order-lower[aria-disabled=true]{cursor:default;color:#a7aaad}.sortable-placeholder{border:1px dashed #c3c4c7;margin-bottom:20px}.postbox,.stuffbox{margin-bottom:20px;padding:0;line-height:1}.postbox.closed{border-bottom:0}.postbox .hndle,.stuffbox .hndle{-webkit-user-select:none;user-select:none}.postbox .inside{padding:0 12px 12px;line-height:1.4;font-size:13px}.stuffbox .inside{padding:0;line-height:1.4;font-size:13px;margin-top:0}.postbox .inside{margin:11px 0;position:relative}.postbox .inside>p:last-child,.rss-widget ul li:last-child{margin-bottom:1px!important}.postbox.closed h3{border:none;box-shadow:none}.postbox table.form-table{margin-bottom:0}.postbox table.widefat{box-shadow:none}.temp-border{border:1px dotted #c3c4c7}.columns-prefs label{padding:0 10px 0 0}#adminmenu .wp-submenu li.current,#adminmenu .wp-submenu li.current a,#adminmenu .wp-submenu li.current a:hover,#comment-status-display,#dashboard_right_now .versions .b,#ed_reply_toolbar #ed_reply_strong,#pass-strength-result.short,#pass-strength-result.strong,#post-status-display,#post-visibility-display,.feature-filter .feature-name,.item-controls .item-order a,.media-item .percent,.plugins .name{font-weight:600}#wpfooter{position:absolute;bottom:0;left:0;right:0;padding:10px 20px;color:#50575e}#wpfooter p{font-size:13px;margin:0;line-height:1.55}#footer-thankyou{font-style:italic}.nav-tab{float:left;border:1px solid #c3c4c7;border-bottom:none;margin-left:.5em;padding:5px 10px;font-size:14px;line-height:1.71428571;font-weight:600;background:#dcdcde;color:#50575e;text-decoration:none;white-space:nowrap}.nav-tab-small .nav-tab,h3 .nav-tab{padding:5px 14px;font-size:12px;line-height:1.33}.nav-tab:focus,.nav-tab:hover{background-color:#fff;color:#3c434a}.nav-tab-active,.nav-tab:focus:active{box-shadow:none}.nav-tab-active{margin-bottom:-1px;color:#3c434a}.nav-tab-active,.nav-tab-active:focus,.nav-tab-active:focus:active,.nav-tab-active:hover{border-bottom:1px solid #f0f0f1;background:#f0f0f1;color:#000}.nav-tab-wrapper,.wrap h2.nav-tab-wrapper,h1.nav-tab-wrapper{border-bottom:1px solid #c3c4c7;margin:0;padding-top:9px;padding-bottom:0;line-height:inherit}.nav-tab-wrapper:not(.wp-clearfix):after{content:"";display:table;clear:both}.spinner{background:url(../images/spinner.gif) no-repeat;background-size:20px 20px;display:inline-block;visibility:hidden;float:right;vertical-align:middle;opacity:.7;width:20px;height:20px;margin:4px 10px 0}.loading-content .spinner,.spinner.is-active{visibility:visible}#template>div{margin-right:16em}#template .notice{margin-top:1em;margin-right:3%}#template .notice p{width:auto}#template .submit .spinner{float:none}.metabox-holder .postbox>h3,.metabox-holder .stuffbox>h3,.metabox-holder h2.hndle,.metabox-holder h3.hndle{font-size:14px;padding:8px 12px;margin:0;line-height:1.4}.nav-menus-php .metabox-holder h3{padding:10px 10px 11px 14px;line-height:1.5}#templateside ul li a{text-decoration:none}.plugin-install #description,.plugin-install-network #description{width:60%}table .column-rating,table .column-visible,table .vers{text-align:left}.attention,.error-message{color:#d63638;font-weight:600}body.iframe{height:98%}.lp-show-latest p{display:none}.lp-show-latest .lp-error p,.lp-show-latest p:last-child{display:block}.media-icon{width:62px;text-align:center}.media-icon img{border:1px solid #dcdcde;border:1px solid rgba(0,0,0,.07)}#howto{font-size:11px;margin:0 5px;display:block}.importers{font-size:16px;width:auto}.importers td{padding-right:14px;line-height:1.4}.importers .import-system{max-width:250px}.importers td.desc{max-width:500px}.importer-action,.importer-desc,.importer-title{display:block}.importer-title{color:#000;font-size:14px;font-weight:400;margin-bottom:.2em}.importer-action{line-height:1.55;color:#50575e;margin-bottom:1em}#post-body #post-body-content #namediv h2,#post-body #post-body-content #namediv h3{margin-top:0}.edit-comment-author{color:#1d2327;border-bottom:1px solid #f0f0f1}#namediv h2 label,#namediv h3 label{vertical-align:baseline}#namediv table{width:100%}#namediv td.first{width:10px;white-space:nowrap}#namediv input{width:100%}#namediv p{margin:10px 0}.zerosize{height:0;width:0;margin:0;border:0;padding:0;overflow:hidden;position:absolute}br.clear{height:2px;line-height:.15}.checkbox{border:none;margin:0;padding:0}fieldset{border:0;padding:0;margin:0}.post-categories{display:inline;margin:0;padding:0}.post-categories li{display:inline}div.star-holder{position:relative;height:17px;width:100px;background:url(../images/stars.png?ver=20121108) repeat-x bottom left}div.star-holder .star-rating{background:url(../images/stars.png?ver=20121108) repeat-x top left;height:17px;float:left}.star-rating{white-space:nowrap}.star-rating .star{display:inline-block;width:20px;height:20px;-webkit-font-smoothing:antialiased;font-size:20px;line-height:1;font-family:dashicons;text-decoration:inherit;font-weight:400;font-style:normal;vertical-align:top;transition:color .1s ease-in;text-align:center;color:#dba617}.star-rating .star-full:before{content:"\f155"}.star-rating .star-half:before{content:"\f459"}.rtl .star-rating .star-half{transform:rotateY(180deg)}.star-rating .star-empty:before{content:"\f154"}div.action-links{font-weight:400;margin:6px 0 0}#plugin-information{background:#fff;position:fixed;top:0;right:0;bottom:0;left:0;height:100%;padding:0}#plugin-information-scrollable{overflow:auto;-webkit-overflow-scrolling:touch;height:100%}#plugin-information-title{padding:0 26px;background:#f6f7f7;font-size:22px;font-weight:600;line-height:2.4;position:relative;height:56px}#plugin-information-title.with-banner{margin-right:0;height:250px;background-size:cover}#plugin-information-title h2{font-size:1em;font-weight:600;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#plugin-information-title.with-banner h2{position:relative;font-family:"Helvetica Neue",sans-serif;display:inline-block;font-size:30px;line-height:1.68;box-sizing:border-box;max-width:100%;padding:0 15px;margin-top:174px;color:#fff;background:rgba(29,35,39,.9);text-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 0 30px rgba(255,255,255,.1);border-radius:8px}#plugin-information-title div.vignette{display:none}#plugin-information-title.with-banner div.vignette{position:absolute;display:block;top:0;left:0;height:250px;width:100%;background:0 0;box-shadow:inset 0 0 50px 4px rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.1)}#plugin-information-tabs{padding:0 16px;position:relative;right:0;left:0;min-height:36px;font-size:0;z-index:1;border-bottom:1px solid #dcdcde;background:#f6f7f7}#plugin-information-tabs a{position:relative;display:inline-block;padding:9px 10px;margin:0;height:18px;line-height:1.3;font-size:14px;text-decoration:none;transition:none}#plugin-information-tabs a.current{margin:0 -1px -1px;background:#fff;border:1px solid #dcdcde;border-bottom-color:#fff;padding-top:8px;color:#2c3338}#plugin-information-tabs.with-banner a.current{border-top:none;padding-top:9px}#plugin-information-tabs a:active,#plugin-information-tabs a:focus{outline:0}#plugin-information-content{overflow:hidden;background:#fff;position:relative;top:0;right:0;left:0;min-height:100%;min-height:calc(100% - 152px)}#plugin-information-content.with-banner{min-height:calc(100% - 346px)}#section-holder{position:relative;top:0;right:250px;bottom:0;left:0;margin-top:10px;margin-right:250px;padding:10px 26px 99999px;margin-bottom:-99932px}#section-holder .notice{margin:5px 0 15px}#section-holder .updated{margin:16px 0}#plugin-information .fyi{float:right;position:relative;top:0;right:0;padding:16px 16px 99999px;margin-bottom:-99932px;width:217px;border-left:1px solid #dcdcde;background:#f6f7f7;color:#646970}#plugin-information .fyi strong{color:#3c434a}#plugin-information .fyi h3{font-weight:600;text-transform:uppercase;font-size:12px;color:#646970;margin:24px 0 8px}#plugin-information .fyi h2{font-size:.9em;margin-bottom:0;margin-right:0}#plugin-information .fyi ul{padding:0;margin:0;list-style:none}#plugin-information .fyi li{margin:0 0 10px}#plugin-information .fyi-description{margin-top:0}#plugin-information .counter-container{margin:3px 0}#plugin-information .counter-label{float:left;margin-right:5px;min-width:55px}#plugin-information .counter-back{height:17px;width:92px;background-color:#dcdcde;float:left}#plugin-information .counter-bar{height:17px;background-color:#f0c33c;float:left}#plugin-information .counter-count{margin-left:5px}#plugin-information .fyi ul.contributors{margin-top:10px}#plugin-information .fyi ul.contributors li{display:inline-block;margin-right:8px;vertical-align:middle}#plugin-information .fyi ul.contributors li{display:inline-block;margin-right:8px;vertical-align:middle}#plugin-information .fyi ul.contributors li img{vertical-align:middle;margin-right:4px}#plugin-information-footer{padding:13px 16px;position:absolute;right:0;bottom:0;left:0;height:40px;border-top:1px solid #dcdcde;background:#f6f7f7}#plugin-information .section{direction:ltr}#plugin-information .section ol,#plugin-information .section ul{list-style-type:disc;margin-left:24px}#plugin-information .section,#plugin-information .section p{font-size:14px;line-height:1.7}#plugin-information #section-screenshots ol{list-style:none;margin:0}#plugin-information #section-screenshots li img{vertical-align:text-top;margin-top:16px;max-width:100%;width:auto;height:auto;box-shadow:0 1px 2px rgba(0,0,0,.3)}#plugin-information #section-screenshots li p{font-style:italic;padding-left:20px}#plugin-information pre{padding:7px;overflow:auto;border:1px solid #c3c4c7}#plugin-information blockquote{border-left:2px solid #dcdcde;color:#646970;font-style:italic;margin:1em 0;padding:0 0 0 1em}#plugin-information .review{overflow:hidden;width:100%;margin-bottom:20px;border-bottom:1px solid #dcdcde}#plugin-information .review-title-section{overflow:hidden}#plugin-information .review-title-section h4{display:inline-block;float:left;margin:0 6px 0 0}#plugin-information .reviewer-info p{clear:both;margin:0;padding-top:2px}#plugin-information .reviewer-info .avatar{float:left;margin:4px 6px 0 0}#plugin-information .reviewer-info .star-rating{float:left}#plugin-information .review-meta{float:left;margin-left:.75em}#plugin-information .review-body{float:left;width:100%}.plugin-version-author-uri{font-size:13px}.update-php .button.button-primary{margin-right:1em}@media screen and (max-width:771px){#plugin-information-title.with-banner{height:100px}#plugin-information-title.with-banner h2{margin-top:30px;font-size:20px;line-height:2;max-width:85%}#plugin-information-title.with-banner div.vignette{height:100px}#plugin-information-tabs{overflow:hidden;padding:0;height:auto}#plugin-information-tabs a.current{margin-bottom:0;border-bottom:none}#plugin-information .fyi{float:none;border:1px solid #dcdcde;position:static;width:auto;margin:26px 26px 0;padding-bottom:0}#section-holder{position:static;margin:0;padding-bottom:70px}#plugin-information .fyi h3,#plugin-information .fyi small{display:none}#plugin-information-footer{padding:12px 16px 0;height:46px}}#TB_window.plugin-details-modal{background:#fff}#TB_window.plugin-details-modal.thickbox-loading:before{content:"";display:block;width:20px;height:20px;position:absolute;left:50%;top:50%;z-index:-1;margin:-10px 0 0 -10px;background:#fff url(../images/spinner.gif) no-repeat center;background-size:20px 20px;transform:translateZ(0)}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){#TB_window.plugin-details-modal.thickbox-loading:before{background-image:url(../images/spinner-2x.gif)}}.plugin-details-modal #TB_title{float:left;height:1px}.plugin-details-modal #TB_ajaxWindowTitle{display:none}.plugin-details-modal #TB_closeWindowButton{left:auto;right:-30px;color:#f0f0f1}.plugin-details-modal #TB_closeWindowButton:focus,.plugin-details-modal #TB_closeWindowButton:hover{color:#135e96;outline:0;box-shadow:none}.plugin-details-modal .tb-close-icon{display:none}.plugin-details-modal #TB_closeWindowButton:after{content:"\f335";font:normal 32px/29px dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (max-width:830px){.plugin-details-modal #TB_closeWindowButton{right:0;top:-30px}}img{border:none}.bulk-action-notice .toggle-indicator::before,.meta-box-sortables .postbox .order-higher-indicator::before,.meta-box-sortables .postbox .order-lower-indicator::before,.meta-box-sortables .postbox .toggle-indicator::before,.privacy-text-box .toggle-indicator::before,.sidebar-name .toggle-indicator::before{content:"\f142";display:inline-block;font:normal 20px/1 dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none}.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,.js .widgets-holder-wrap.closed .toggle-indicator::before,.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,.privacy-text-box.closed .toggle-indicator::before{content:"\f140"}.postbox .handle-order-higher .order-higher-indicator::before{content:"\f343";color:inherit}.postbox .handle-order-lower .order-lower-indicator::before{content:"\f347";color:inherit}.postbox .handle-order-higher .order-higher-indicator::before,.postbox .handle-order-lower .order-lower-indicator::before{position:relative;top:.11rem;width:20px;height:20px}.postbox .handlediv .toggle-indicator::before{width:20px;border-radius:50%}.postbox .handlediv .toggle-indicator::before{position:relative;top:.05rem;text-indent:-1px}.rtl .postbox .handlediv .toggle-indicator::before{text-indent:1px}.bulk-action-notice .toggle-indicator::before{line-height:16px;vertical-align:top;color:#787c82}.postbox .handle-order-higher:focus,.postbox .handle-order-lower:focus,.postbox .handlediv:focus{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);outline:1px solid transparent}.postbox .handle-order-higher:focus .order-higher-indicator::before,.postbox .handle-order-lower:focus .order-lower-indicator::before,.postbox .handlediv:focus .toggle-indicator::before{box-shadow:none;outline:1px solid transparent}#photo-add-url-div input[type=text]{width:300px}.alignleft h2{margin:0}#template textarea{font-family:Consolas,Monaco,monospace;font-size:13px;background:#f6f7f7;-o-tab-size:4;tab-size:4}#template .CodeMirror,#template textarea{width:100%;min-height:60vh;height:calc(100vh - 295px);border:1px solid #dcdcde;box-sizing:border-box}#templateside>h2{padding-top:6px;padding-bottom:7px;margin:0}#templateside ol,#templateside ul{margin:0;padding:0}#templateside>ul{box-sizing:border-box;margin-top:0;overflow:auto;padding:0;min-height:60vh;height:calc(100vh - 295px);background-color:#f6f7f7;border:1px solid #dcdcde;border-left:none}#templateside ul ul{padding-left:12px}#templateside>ul>li>ul[role=group]{padding-left:0}[role=treeitem][aria-expanded=false]>ul{display:none}[role=treeitem] span[aria-hidden]{display:inline;font-family:dashicons;font-size:20px;position:absolute;pointer-events:none}[role=treeitem][aria-expanded=false]>.folder-label .icon:after{content:"\f139"}[role=treeitem][aria-expanded=true]>.folder-label .icon:after{content:"\f140"}[role=treeitem] .folder-label{display:block;padding:3px 3px 3px 12px;cursor:pointer}[role=treeitem]{outline:0}[role=treeitem] .folder-label.focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}[role=treeitem] .folder-label.hover,[role=treeitem].hover{background-color:#f0f0f1}.tree-folder{margin:0;position:relative}[role=treeitem] li{position:relative}.tree-folder .tree-folder::after{content:"";display:block;position:absolute;left:2px;border-left:1px solid #c3c4c7;top:-13px;bottom:10px}.tree-folder>li::before{content:"";position:absolute;display:block;border-left:1px solid #c3c4c7;left:2px;top:-5px;height:18px;width:7px;border-bottom:1px solid #c3c4c7}.tree-folder>li::after{content:"";position:absolute;display:block;border-left:1px solid #c3c4c7;left:2px;bottom:-7px;top:0}#templateside .current-file{margin:-4px 0 -2px}.tree-folder>.current-file::before{left:4px;height:15px;width:0;border-left:none;top:3px}.tree-folder>.current-file::after{bottom:-4px;height:7px;left:2px;top:auto}.tree-folder li:last-child>.tree-folder::after,.tree-folder>li:last-child::after{display:none}#documentation label,#theme-plugin-editor-label,#theme-plugin-editor-selector{font-weight:600}#theme-plugin-editor-label{display:inline-block;margin-bottom:1em}#docs-list,#template textarea{direction:ltr}.fileedit-sub #plugin,.fileedit-sub #theme{max-width:40%}.fileedit-sub .alignright{text-align:right}#template p{width:97%}#file-editor-linting-error{margin-top:1em;margin-bottom:1em}#file-editor-linting-error>.notice{margin:0;display:inline-block}#file-editor-linting-error>.notice>p{width:auto}#template .submit{margin-top:1em;padding:0}#template .submit input[type=submit][disabled]{cursor:not-allowed}#templateside{float:right;width:16em;word-wrap:break-word}#postcustomstuff p.submit{margin:0}#templateside h4{margin:1em 0 0}#templateside li{margin:4px 0}#templateside li:not(.howto) a,.theme-editor-php .highlight{display:block;padding:3px 0 3px 12px;text-decoration:none}#templateside li:not(.howto)>a:first-of-type{padding-top:0}#templateside li.howto{padding:6px 12px 12px}.theme-editor-php .highlight{margin:-3px 3px -3px -12px}#templateside .highlight{border:none;font-weight:600}.nonessential{color:#646970;font-size:11px;font-style:italic;padding-left:12px}#documentation{margin-top:10px}#documentation label{line-height:1.8;vertical-align:baseline}.fileedit-sub{padding:10px 0 8px;line-height:180%}#file-editor-warning .file-editor-warning-content{margin:25px}.accordion-section-title:after,.control-section .accordion-section-title:after,.nav-menus-php .item-edit:before,.widget-top .widget-action .toggle-indicator:before{content:"\f140";font:normal 20px/1 dashicons;speak:never;display:block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none}.widget-top .widget-action .toggle-indicator:before{padding:1px 2px 1px 0;border-radius:50%}.accordion-section-title:after,.handlediv,.item-edit,.postbox .handlediv.button-link,.toggle-indicator{color:#787c82}.widget-action{color:#50575e}.accordion-section-title:hover:after,.handlediv:focus,.handlediv:hover,.item-edit:focus,.item-edit:hover,.postbox .handlediv.button-link:focus,.postbox .handlediv.button-link:hover,.sidebar-name:hover .toggle-indicator,.widget-action:focus,.widget-top:hover .widget-action{color:#1d2327;outline:1px solid transparent}.widget-top .widget-action:focus .toggle-indicator:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.accordion-section-title:after,.control-section .accordion-section-title:after{float:right;right:20px;top:-2px}#customize-info.open .accordion-section-title:after,.control-section.open .accordion-section-title:after,.nav-menus-php .menu-item-edit-active .item-edit:before,.widget.open .widget-top .widget-action .toggle-indicator:before,.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before{content:"\f142"}/*! + * jQuery UI Draggable/Sortable 1.11.4 + * http://jqueryui.com + * + * Copyright jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */.ui-draggable-handle,.ui-sortable-handle{touch-action:none}.accordion-section{border-bottom:1px solid #dcdcde;margin:0}.accordion-section.open .accordion-section-content,.no-js .accordion-section .accordion-section-content{display:block}.accordion-section.open:hover{border-bottom-color:#dcdcde}.accordion-section-content{display:none;padding:10px 20px 15px;overflow:hidden;background:#fff}.accordion-section-title{margin:0;padding:12px 15px 15px;position:relative;border-left:1px solid #dcdcde;border-right:1px solid #dcdcde;-webkit-user-select:none;user-select:none}.js .accordion-section-title{cursor:pointer}.js .accordion-section-title:after{position:absolute;top:12px;right:10px;z-index:1}.accordion-section-title:focus{outline:1px solid transparent}.accordion-section-title:focus:after,.accordion-section-title:hover:after{border-color:#a7aaad transparent;outline:1px solid transparent}.cannot-expand .accordion-section-title{cursor:auto}.cannot-expand .accordion-section-title:after{display:none}.control-section .accordion-section-title,.customize-pane-child .accordion-section-title{border-left:none;border-right:none;padding:10px 10px 11px 14px;line-height:1.55;background:#fff}.control-section .accordion-section-title:after,.customize-pane-child .accordion-section-title:after{top:calc(50% - 10px)}.js .control-section .accordion-section-title:focus,.js .control-section .accordion-section-title:hover,.js .control-section.open .accordion-section-title,.js .control-section:hover .accordion-section-title{color:#1d2327;background:#f6f7f7}.control-section.open .accordion-section-title{border-bottom:1px solid #dcdcde}.network-admin .edit-site-actions{margin-top:0}.my-sites{display:block;overflow:auto;zoom:1}.my-sites li{display:block;padding:8px 3%;min-height:130px;margin:0}@media only screen and (max-width:599px){.my-sites li{min-height:0}}@media only screen and (min-width:600px){.my-sites.striped li{background-color:#fff;position:relative}.my-sites.striped li:after{content:"";width:1px;height:100%;position:absolute;top:0;right:0;background:#c3c4c7}}@media only screen and (min-width:600px) and (max-width:699px){.my-sites li{float:left;width:44%}.my-sites.striped li{background-color:#fff}.my-sites.striped li:nth-of-type(2n+1){clear:left}.my-sites.striped li:nth-of-type(2n+2):after{content:none}.my-sites li:nth-of-type(4n+1),.my-sites li:nth-of-type(4n+2){background-color:#f6f7f7}}@media only screen and (min-width:700px) and (max-width:1199px){.my-sites li{float:left;width:27.333333%;background-color:#fff}.my-sites.striped li:nth-of-type(3n+3):after{content:none}.my-sites li:nth-of-type(6n+1),.my-sites li:nth-of-type(6n+2),.my-sites li:nth-of-type(6n+3){background-color:#f6f7f7}}@media only screen and (min-width:1200px) and (max-width:1399px){.my-sites li{float:left;width:21%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(4n+1){clear:left}.my-sites.striped li:nth-of-type(4n+4):after{content:none}.my-sites li:nth-of-type(8n+1),.my-sites li:nth-of-type(8n+2),.my-sites li:nth-of-type(8n+3),.my-sites li:nth-of-type(8n+4){background-color:#f6f7f7}}@media only screen and (min-width:1400px) and (max-width:1599px){.my-sites li{float:left;width:16%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(5n+1){clear:left}.my-sites.striped li:nth-of-type(5n+5):after{content:none}.my-sites li:nth-of-type(10n+1),.my-sites li:nth-of-type(10n+2),.my-sites li:nth-of-type(10n+3),.my-sites li:nth-of-type(10n+4),.my-sites li:nth-of-type(10n+5){background-color:#f6f7f7}}@media only screen and (min-width:1600px){.my-sites li{float:left;width:12.666666%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(6n+1){clear:left}.my-sites.striped li:nth-of-type(6n+6):after{content:none}.my-sites li:nth-of-type(12n+1),.my-sites li:nth-of-type(12n+2),.my-sites li:nth-of-type(12n+3),.my-sites li:nth-of-type(12n+4),.my-sites li:nth-of-type(12n+5),.my-sites li:nth-of-type(12n+6){background-color:#f6f7f7}}.my-sites li a{text-decoration:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){div.star-holder,div.star-holder .star-rating{background:url(../images/stars-2x.png?ver=20121108) repeat-x bottom left;background-size:21px 37px}.spinner{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){html.wp-toolbar{padding-top:46px}.screen-reader-shortcut:focus{top:-39px}body{min-width:240px;overflow-x:hidden}body *{-webkit-tap-highlight-color:transparent!important}#wpcontent{position:relative;margin-left:0;padding-left:10px}#wpbody-content{padding-bottom:100px}.wrap{clear:both;margin-right:12px;margin-left:0}#col-left,#col-right{float:none;width:auto}#col-left .col-wrap,#col-right .col-wrap{padding:0}#collapse-menu,.post-format-select{display:none!important}.wrap h1.wp-heading-inline{margin-bottom:.5em}.wrap .add-new-h2,.wrap .add-new-h2:active,.wrap .page-title-action,.wrap .page-title-action:active{padding:10px 15px;font-size:14px;white-space:nowrap}.media-upload-form div.error,.notice,.wrap div.error,.wrap div.updated{margin:20px 0 10px;padding:5px 10px;font-size:14px;line-height:175%}.wp-core-ui .notice.is-dismissible{padding-right:46px}.notice-dismiss{padding:13px}.wrap .icon32+h2{margin-top:-2px}.wp-responsive-open #wpbody{right:-16em}code{word-wrap:break-word;word-wrap:anywhere;word-break:break-word}.postbox{font-size:14px}.metabox-holder .postbox>h3,.metabox-holder .stuffbox>h3,.metabox-holder h2,.metabox-holder h3.hndle{padding:12px}.postbox .handlediv{margin-top:3px}.subsubsub{font-size:16px;text-align:center;margin-bottom:15px}#template .CodeMirror,#template textarea{box-sizing:border-box}#templateside{float:none;width:auto}#templateside>ul{border-left:1px solid #dcdcde}#templateside li{margin:0}#templateside li:not(.howto) a{display:block;padding:5px}#templateside li.howto{padding:12px}#templateside .highlight{padding:5px;margin-left:-5px;margin-top:-5px}#template .notice,#template>div{float:none;margin:1em 0;width:auto}#template .CodeMirror,#template textarea{width:100%}#templateside ul ul{padding-left:1.5em}[role=treeitem] .folder-label{display:block;padding:5px}.tree-folder .tree-folder::after,.tree-folder>li::after,.tree-folder>li::before{left:-8px}.tree-folder>li::before{top:0;height:13px}.tree-folder>.current-file::before{left:-5px;top:7px;width:4px}.tree-folder>.current-file::after{height:9px;left:-8px}.wrap #templateside span.notice{margin-left:-5px;width:100%}.fileedit-sub .alignright{float:left;margin-top:15px;width:100%;text-align:left}.fileedit-sub .alignright label{display:block}.fileedit-sub #plugin,.fileedit-sub #theme{margin-left:0;max-width:70%}.fileedit-sub input[type=submit]{margin-bottom:0}#documentation label[for=docs-list]{display:block}#documentation select[name=docs-list]{margin-left:0;max-width:60%}#documentation input[type=button]{margin-bottom:0}#wpfooter{display:none}#comments-form .checkforspam{display:none}.edit-comment-author{margin:2px 0 0}.filter-drawer .filter-group-feature input,.filter-drawer .filter-group-feature label{line-height:2.1}.filter-drawer .filter-group-feature label{margin-left:32px}.wp-filter .button.drawer-toggle{font-size:13px;line-height:2;height:28px}#screen-meta #contextual-help-wrap{overflow:visible}#screen-meta #contextual-help-back,#screen-meta .contextual-help-sidebar{display:none}#screen-meta .contextual-help-tabs{clear:both;width:100%;float:none}#screen-meta .contextual-help-tabs ul{margin:0 0 1em;padding:1em 0 0}#screen-meta .contextual-help-tabs .active{margin:0}#screen-meta .contextual-help-tabs-wrap{clear:both;max-width:100%;float:none}#screen-meta,#screen-meta-links{margin-right:10px}#screen-meta-links{margin-bottom:20px}.wp-filter .search-form input[type=search]{font-size:1rem}.wp-filter .search-form.search-plugins{min-width:100%}}@media screen and (max-width:600px){#wpwrap.wp-responsive-open{overflow-x:hidden}html.wp-toolbar{padding-top:0}.screen-reader-shortcut:focus{top:7px}#wpbody{padding-top:46px}div#post-body.metabox-holder.columns-1{overflow-x:hidden}.nav-tab-wrapper,.wrap h2.nav-tab-wrapper,h1.nav-tab-wrapper{border-bottom:0}h1 .nav-tab,h2 .nav-tab,h3 .nav-tab,nav .nav-tab{margin:10px 10px 0 0;border-bottom:1px solid #c3c4c7}.nav-tab-active:focus,.nav-tab-active:focus:active,.nav-tab-active:hover{border-bottom:1px solid #c3c4c7}.wp-filter .search-form input[type=search]{width:100%}}@media screen and (max-width:320px){#network_dashboard_right_now .subsubsub{font-size:14px;text-align:left}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/customize-controls-rtl.css b/tools/storybook/wordpress/css/customize-controls-rtl.css new file mode 100644 index 00000000000..87e242c410c --- /dev/null +++ b/tools/storybook/wordpress/css/customize-controls-rtl.css @@ -0,0 +1,3003 @@ +/*! This file is auto-generated */ +body { + overflow: hidden; + -webkit-text-size-adjust: 100%; +} + +.customize-controls-close, +.widget-control-actions a { + text-decoration: none; +} + +#customize-controls h3 { + font-size: 14px; +} + +#customize-controls img { + max-width: 100%; +} + +#customize-controls .submit { + text-align: center; +} + +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked { + background-color: rgba(0, 0, 0, 0.7); + padding: 25px; +} + +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message { + margin-right: auto; + margin-left: auto; + max-width: 366px; + min-height: 64px; + width: auto; + padding: 25px 109px 25px 25px; + position: relative; + background: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + line-height: 1.5; + overflow-y: auto; + text-align: right; + top: calc( 50% - 100px ); +} + +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing { + margin-top: 0; +} +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons { + margin-bottom: 0; +} + +.customize-changeset-locked-avatar { + width: 64px; + position: absolute; + right: 25px; + top: 25px; +} + +.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button { + margin-left: 10px; + margin-top: 0; +} + +#customize-controls .description { + color: #50575e; +} + +#customize-save-button-wrapper { + float: left; + margin-top: 9px; +} + +body:not(.ready) #customize-save-button-wrapper .save { + visibility: hidden; +} +#customize-save-button-wrapper .save { + float: right; + border-radius: 3px; + box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ + margin-top: 0; +} + +#customize-save-button-wrapper .save:focus, #publish-settings:focus { + box-shadow: 0 1px 0 #2271b1, 0 0 2px 1px #72aee6; /* This is default box shadow for focus */ +} + +#customize-save-button-wrapper .save.has-next-sibling { + border-radius: 0 3px 3px 0; +} + +#customize-sidebar-outer-content { + position: absolute; + top: 0; + bottom: 0; + right: 0; + visibility: hidden; + overflow-x: hidden; + overflow-y: auto; + width: 100%; + margin: 0; + z-index: -1; + background: #f0f0f1; + transition: right .18s; + border-left: 1px solid #dcdcde; + border-right: 1px solid #dcdcde; + height: 100%; +} + +@media (prefers-reduced-motion: reduce) { + #customize-sidebar-outer-content { + transition: none; + } +} + +#customize-theme-controls .control-section-outer { + display: none !important; +} + +#customize-outer-theme-controls .accordion-section-content { + padding: 12px; +} + +#customize-outer-theme-controls .accordion-section-content.open { + display: block; +} + +.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { + visibility: visible; + right: 100%; + transition: right .18s; +} + +@media (prefers-reduced-motion: reduce) { + .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { + transition: none; + } +} + +.customize-outer-pane-parent { + margin: 0; +} + +.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main { + right: 300px; + opacity: 0.4; +} + +.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, +.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, +.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, +.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, +.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, +.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { + right: 64%; +} + +#customize-outer-theme-controls li.notice { + padding-top: 8px; + padding-bottom: 8px; + margin-right: 0; + margin-bottom: 10px; +} + +#publish-settings { + text-indent: 0; + border-radius: 3px 0 0 3px; + padding-right: 0; + padding-left: 0; + box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ + font-size: 14px; + width: 30px; + float: right; + transform: none; + margin-top: 0; + line-height: 2; +} + +body:not(.ready) #publish-settings, +body.trashing #customize-save-button-wrapper .save, +body.trashing #publish-settings { + display: none; +} + +#customize-header-actions .spinner { + margin-top: 13px; + margin-left: 4px; +} + +.saving #customize-header-actions .spinner, +.trashing #customize-header-actions .spinner { + visibility: visible; +} + +#customize-header-actions { + border-bottom: 1px solid #dcdcde; +} + +#customize-controls .wp-full-overlay-sidebar-content { + overflow-y: auto; + overflow-x: hidden; +} + +.outer-section-open #customize-controls .wp-full-overlay-sidebar-content { + background: #f0f0f1; +} + +#customize-controls .customize-info { + border: none; + border-bottom: 1px solid #dcdcde; + margin-bottom: 15px; +} + +#customize-control-changeset_status .customize-inside-control-row, +#customize-control-changeset_preview_link input { + background-color: #fff; + border-bottom: 1px solid #dcdcde; + box-sizing: content-box; + width: 100%; + margin-right: -12px; + padding-right: 12px; + padding-left: 12px; +} + +#customize-control-trash_changeset { + margin-top: 20px; +} +#customize-control-trash_changeset .button-link { + position: relative; + padding-right: 24px; + display: inline-block; +} +#customize-control-trash_changeset .button-link:before { + content: "\f182"; + font: normal 22px dashicons; + text-decoration: none; + position: absolute; + right: 0; + top: -2px; +} + +#customize-controls .date-input:invalid { + border-color: #d63638; +} + +#customize-control-changeset_status .customize-inside-control-row { + padding-top: 10px; + padding-bottom: 10px; + font-weight: 500; +} + +#customize-control-changeset_status .customize-inside-control-row:first-of-type { + border-top: 1px solid #dcdcde; +} + +#customize-control-changeset_status .customize-control-title { + margin-bottom: 6px; +} + +#customize-control-changeset_status input { + margin-right: 0; +} + +#customize-control-changeset_preview_link { + position: relative; + display: block; +} + +.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { + margin: 0; + position: absolute; + bottom: 9px; + left: 0; +} + +.preview-link-wrapper { + position: relative; +} + +.customize-copy-preview-link:before, +.customize-copy-preview-link:after { + content: ""; + height: 28px; + position: absolute; + background: #fff; + top: -1px; +} + +.customize-copy-preview-link:before { + right: -10px; + width: 9px; + opacity: 0.75; +} + +.customize-copy-preview-link:after { + right: -5px; + width: 4px; + opacity: 0.8; +} + +#customize-control-changeset_preview_link input { + line-height: 2.85714286; /* 40px */ + border-top: 1px solid #dcdcde; + border-right: none; + border-left: none; + text-indent: -999px; + color: #fff; + /* Only necessary for IE11 */ + min-height: 40px; +} + +#customize-control-changeset_preview_link label { + position: relative; + display: block; +} + +#customize-control-changeset_preview_link a { + display: inline-block; + position: absolute; + white-space: nowrap; + overflow: hidden; + width: 90%; + bottom: 14px; + font-size: 14px; + text-decoration: none; +} + +#customize-control-changeset_preview_link a.disabled, +#customize-control-changeset_preview_link a.disabled:active, +#customize-control-changeset_preview_link a.disabled:focus, +#customize-control-changeset_preview_link a.disabled:visited { + color: #000; + opacity: 0.4; + cursor: default; + outline: none; + box-shadow: none; +} + +#sub-accordion-section-publish_settings .customize-section-description-container { + display: none; +} + +#customize-controls .customize-info.section-meta { + margin-bottom: 15px; +} + +.customize-control-date_time .customize-control-description + .date-time-fields.includes-time { + margin-top: 10px; +} + +.customize-control.customize-control-date_time .date-time-fields .date-input.day { + margin-left: 0; +} + +.date-time-fields .date-input.month { + width: auto; + margin: 0; +} + +.date-time-fields .date-input.day, +.date-time-fields .date-input.hour, +.date-time-fields .date-input.minute { + width: 46px; +} + +.date-time-fields .date-input.year { + width: 65px; +} + +.date-time-fields .date-input.meridian { + width: auto; + margin: 0; +} + +.date-time-fields .time-row { + margin-top: 12px; +} + +#customize-control-changeset_preview_link { + margin-top: 6px; +} + +#customize-control-changeset_status { + margin-bottom: 0; + padding-bottom: 0; +} + +#customize-control-changeset_scheduled_date { + box-sizing: content-box; + width: 100%; + margin-right: -12px; + padding: 12px; + background: #fff; + border-bottom: 1px solid #dcdcde; + margin-bottom: 0; +} + +#customize-control-changeset_scheduled_date .customize-control-description { + font-style: normal; +} + +#customize-controls .customize-info.is-in-view, +#customize-controls .customize-section-title.is-in-view { + position: absolute; + z-index: 9; + width: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); +} + +#customize-controls .customize-section-title.is-in-view { + margin-top: 0; +} + +#customize-controls .customize-info.is-in-view + .accordion-section { + margin-top: 15px; +} + +#customize-controls .customize-info.is-sticky, +#customize-controls .customize-section-title.is-sticky { + position: fixed; + top: 46px; +} + +#customize-controls .customize-info .accordion-section-title { + background: #fff; + color: #50575e; + border-right: none; + border-left: none; + border-bottom: none; + cursor: default; +} + +#customize-controls .customize-info.open .accordion-section-title:after, +#customize-controls .customize-info .accordion-section-title:hover:after, +#customize-controls .customize-info .accordion-section-title:focus:after { + color: #2c3338; +} + +#customize-controls .customize-info .accordion-section-title:after { + display: none; +} + +#customize-controls .customize-info .preview-notice { + font-size: 13px; + line-height: 1.9; +} + +#customize-controls .customize-pane-child .customize-section-title h3, +#customize-controls .customize-pane-child h3.customize-section-title, +#customize-outer-theme-controls .customize-pane-child .customize-section-title h3, +#customize-outer-theme-controls .customize-pane-child h3.customize-section-title, +#customize-controls .customize-info .panel-title { + font-size: 20px; + font-weight: 200; + line-height: 26px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#customize-controls .customize-section-title span.customize-action { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#customize-controls .customize-info .customize-help-toggle { + position: absolute; + top: 4px; + left: 1px; + padding: 20px 10px 10px 20px; + width: 20px; + height: 20px; + cursor: pointer; + box-shadow: none; + -webkit-appearance: none; + background: transparent; + color: #50575e; + border: none; +} + +#customize-controls .customize-info .customize-help-toggle:before { + position: absolute; + top: 5px; + right: 6px; +} + +#customize-controls .customize-info.open .customize-help-toggle, +#customize-controls .customize-info .customize-help-toggle:focus, +#customize-controls .customize-info .customize-help-toggle:hover { + color: #2271b1; +} + +#customize-controls .customize-info .customize-panel-description, +#customize-controls .customize-info .customize-section-description, +#customize-outer-theme-controls .customize-info .customize-section-description, +#customize-controls .no-widget-areas-rendered-notice { + color: #50575e; + display: none; + background: #fff; + padding: 12px 15px; + border-top: 1px solid #dcdcde; +} + +#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice { + border-top: none; +} +.no-widget-areas-rendered-notice { + font-style: italic; +} +.no-widget-areas-rendered-notice p:first-child { + margin-top: 0; +} +.no-widget-areas-rendered-notice p:last-child { + margin-bottom: 0; +} + +#customize-controls .customize-info .customize-section-description { + margin-bottom: 15px; +} + +#customize-controls .customize-info .customize-panel-description p:first-child, +#customize-controls .customize-info .customize-section-description p:first-child { + margin-top: 0; +} + +#customize-controls .customize-info .customize-panel-description p:last-child, +#customize-controls .customize-info .customize-section-description p:last-child { + margin-bottom: 0; +} + +#customize-controls .current-panel .control-section > h3.accordion-section-title { + padding-left: 30px; +} + +#customize-theme-controls .control-section, +#customize-outer-theme-controls .control-section { + border: none; +} + +#customize-theme-controls .accordion-section-title, +#customize-outer-theme-controls .accordion-section-title { + color: #50575e; + background-color: #fff; + border-bottom: 1px solid #dcdcde; + border-right: 4px solid #fff; + transition: + .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + #customize-theme-controls .accordion-section-title, + #customize-outer-theme-controls .accordion-section-title { + transition: none; + } +} + +#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title { + color: #50575e; + background-color: #fff; + border-right: 4px solid #fff; +} + +#customize-theme-controls .accordion-section-title:after, +#customize-outer-theme-controls .accordion-section-title:after { + content: "\f341"; + color: #a7aaad; +} + +#customize-theme-controls .accordion-section-content, +#customize-outer-theme-controls .accordion-section-content { + color: #50575e; + background: transparent; +} + +#customize-controls .control-section:hover > .accordion-section-title, +#customize-controls .control-section .accordion-section-title:hover, +#customize-controls .control-section.open .accordion-section-title, +#customize-controls .control-section .accordion-section-title:focus { + color: #2271b1; + background: #f6f7f7; + border-right-color: #2271b1; +} + +#accordion-section-themes + .control-section { + border-top: 1px solid #dcdcde; +} + +.js .control-section:hover .accordion-section-title, +.js .control-section .accordion-section-title:hover, +.js .control-section.open .accordion-section-title, +.js .control-section .accordion-section-title:focus { + background: #f6f7f7; +} + +#customize-theme-controls .control-section:hover > .accordion-section-title:after, +#customize-theme-controls .control-section .accordion-section-title:hover:after, +#customize-theme-controls .control-section.open .accordion-section-title:after, +#customize-theme-controls .control-section .accordion-section-title:focus:after, +#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +#customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +#customize-outer-theme-controls .control-section.open .accordion-section-title:after, +#customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #2271b1; +} + +#customize-theme-controls .control-section.open { + border-bottom: 1px solid #f0f0f1; +} + +#customize-theme-controls .control-section.open .accordion-section-title, +#customize-outer-theme-controls .control-section.open .accordion-section-title { + border-bottom-color: #f0f0f1 !important; +} + +#customize-theme-controls .control-section:last-of-type.open, +#customize-theme-controls .control-section:last-of-type > .accordion-section-title { + border-bottom-color: #dcdcde; +} + +#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2), +#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu, +#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title { + border-top: 1px solid #dcdcde; +} + +#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu { + border-top: none; +} + +#customize-theme-controls > ul { + margin: 0; +} + +#customize-theme-controls .accordion-section-content { + position: absolute; + top: 0; + right: 100%; + width: 100%; + margin: 0; + padding: 12px; + box-sizing: border-box; +} + +#customize-info, +#customize-theme-controls .customize-pane-parent, +#customize-theme-controls .customize-pane-child { + overflow: visible; + width: 100%; + margin: 0; + padding: 0; + box-sizing: border-box; + transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */ +} + +@media (prefers-reduced-motion: reduce) { + #customize-info, + #customize-theme-controls .customize-pane-parent, + #customize-theme-controls .customize-pane-child { + transition: none; + } +} + +#customize-theme-controls .customize-pane-child.skip-transition { + transition: none; +} + +#customize-info, +#customize-theme-controls .customize-pane-parent { + position: relative; + visibility: visible; + height: auto; + max-height: none; + overflow: auto; + transform: none; +} + +#customize-theme-controls .customize-pane-child { + position: absolute; + top: 0; + right: 0; + visibility: hidden; + height: 0; + max-height: none; + overflow: hidden; + transform: translateX(-100%); +} + +#customize-theme-controls .customize-pane-child.open, +#customize-theme-controls .customize-pane-child.current-panel { + transform: none; +} + +.section-open #customize-theme-controls .customize-pane-parent, +.in-sub-panel #customize-theme-controls .customize-pane-parent, +.section-open #customize-info, +.in-sub-panel #customize-info, +.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel { + visibility: hidden; + height: 0; + overflow: hidden; + transform: translateX(100%); +} + +.section-open #customize-theme-controls .customize-pane-parent.busy, +.in-sub-panel #customize-theme-controls .customize-pane-parent.busy, +.section-open #customize-info.busy, +.in-sub-panel #customize-info.busy, +.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel, +#customize-theme-controls .customize-pane-child.open, +#customize-theme-controls .customize-pane-child.current-panel, +#customize-theme-controls .customize-pane-child.busy { + visibility: visible; + height: auto; + overflow: auto; +} + +#customize-theme-controls .customize-pane-child.accordion-section-content, +#customize-theme-controls .customize-pane-child.accordion-sub-container { + display: block; + overflow-x: hidden; +} + +#customize-theme-controls .customize-pane-child.accordion-section-content { + padding: 12px; +} + +#customize-theme-controls .customize-pane-child.menu li { + position: static; +} + +.customize-section-description-container, +.control-section-nav_menu .customize-section-description-container, +.control-section-new_menu .customize-section-description-container { + margin-bottom: 15px; +} + +.control-section-nav_menu .customize-control, +.control-section-new_menu .customize-control { + /* Override default `margin-bottom` for `.customize-control` */ + margin-bottom: 0; +} + +.customize-section-title { + margin: -12px -12px 0; + border-bottom: 1px solid #dcdcde; + background: #fff; +} + +div.customize-section-description { + margin-top: 22px; +} + +.customize-info div.customize-section-description { + margin-top: 0; +} + +div.customize-section-description p:first-child { + margin-top: 0; +} + +div.customize-section-description p:last-child { + margin-bottom: 0; +} + +#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + border-bottom: 1px solid #dcdcde; + padding: 12px; +} + +.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + padding: 12px 12px 13px; +} + +.customize-section-title h3, +h3.customize-section-title { + padding: 10px 14px 12px 10px; + margin: 0; + line-height: 21px; + color: #50575e; +} + +.accordion-sub-container.control-panel-content { + display: none; + position: absolute; + top: 0; + width: 100%; +} + +.accordion-sub-container.control-panel-content.busy { + display: block; +} + +.current-panel .accordion-sub-container.control-panel-content { + width: 100%; +} + +.customize-controls-close { + display: block; + position: absolute; + top: 0; + right: 0; + width: 45px; + height: 41px; + padding: 0 0 0 2px; + background: #f0f0f1; + border: none; + border-top: 4px solid #f0f0f1; + border-left: 1px solid #dcdcde; + color: #3c434a; + text-align: right; + cursor: pointer; + transition: + color .15s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; + box-sizing: content-box; +} + +.customize-panel-back, +.customize-section-back { + display: block; + float: right; + width: 48px; + height: 71px; + padding: 0 0 0 24px; + margin: 0; + background: #fff; + border: none; + border-left: 1px solid #dcdcde; + border-right: 4px solid #fff; + box-shadow: none; + cursor: pointer; + transition: + color .15s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; +} + +.customize-section-back { + height: 74px; +} + +.ios .customize-panel-back { + display: none; +} + +.ios .expanded.in-sub-panel .customize-panel-back { + display: block; +} + +#customize-controls .panel-meta.customize-info .accordion-section-title { + margin-right: 48px; + border-right: none; +} + +#customize-controls .panel-meta.customize-info .accordion-section-title:hover, +#customize-controls .cannot-expand:hover .accordion-section-title { + background: #fff; + color: #50575e; + border-right-color: #fff; +} + +.customize-controls-close:focus, +.customize-controls-close:hover, +.customize-controls-preview-toggle:focus, +.customize-controls-preview-toggle:hover { + background: #fff; + color: #2271b1; + border-top-color: #2271b1; + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +#customize-theme-controls .accordion-section-title:focus .customize-action { + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: 1px; +} + +.customize-panel-back:hover, +.customize-panel-back:focus, +.customize-section-back:hover, +.customize-section-back:focus { + color: #2271b1; + background: #f6f7f7; + border-right-color: #2271b1; + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.customize-controls-close:before { + font: normal 22px/45px dashicons; + content: "\f335"; + position: relative; + top: -3px; + right: 13px; +} + +.customize-panel-back:before, +.customize-section-back:before { + font: normal 20px/72px dashicons; + content: "\f345"; + position: relative; + right: 9px; +} + +.wp-full-overlay-sidebar .wp-full-overlay-header { + background-color: #f0f0f1; + transition: padding ease-in-out .18s; +} + +.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { + padding-right: 62px; +} + +p.customize-section-description { + font-style: normal; + margin-top: 22px; + margin-bottom: 0; +} + +.customize-section-description ul { + margin-right: 1em; +} + +.customize-section-description ul > li { + list-style: disc; +} + +.section-description-buttons { + text-align: left; +} + +.customize-control { + width: 100%; + float: right; + clear: both; + margin-bottom: 12px; +} + +.customize-control input[type="text"], +.customize-control input[type="password"], +.customize-control input[type="email"], +.customize-control input[type="number"], +.customize-control input[type="search"], +.customize-control input[type="tel"], +.customize-control input[type="url"], +.customize-control input[type="range"] { + width: 100%; + margin: 0; +} + +.customize-control-hidden { + margin: 0; +} + +.customize-control-textarea textarea { + width: 100%; + resize: vertical; +} + +.customize-control select { + width: 100%; +} + +.customize-control select[multiple] { + height: auto; +} + +.customize-control-title { + display: block; + font-size: 14px; + line-height: 1.75; + font-weight: 600; + margin-bottom: 4px; +} + +.customize-control-description { + display: block; + font-style: italic; + line-height: 1.4; + margin-top: 0; + margin-bottom: 5px; +} + +.customize-section-description a.external-link:after { + font: 16px/11px dashicons; + content: "\f504"; + top: 3px; + position: relative; + padding-right: 3px; + display: inline-block; + text-decoration: none; +} + +.customize-control-color .color-picker, +.customize-control-upload div { + line-height: 28px; +} + +.customize-control .customize-inside-control-row { + line-height: 1.6; + display: block; + margin-right: 24px; + padding-top: 6px; + padding-bottom: 6px; +} + +.customize-control-radio input, +.customize-control-checkbox input, +.customize-control-nav_menu_auto_add input { + margin-left: 4px; + margin-right: -24px; +} + +.customize-control-radio { + padding: 5px 0 10px; +} + +.customize-control-radio .customize-control-title { + margin-bottom: 0; + line-height: 1.6; +} + +.customize-control-radio .customize-control-title + .customize-control-description { + margin-top: 7px; +} + +.customize-control-radio label, +.customize-control-checkbox label { + vertical-align: top; +} + +.customize-control .attachment-thumb.type-icon { + float: right; + margin: 10px; + width: auto; +} + +.customize-control .attachment-title { + font-weight: 600; + margin: 0; + padding: 5px 10px; +} + +.customize-control .attachment-meta { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; + padding: 0 10px; +} + +.customize-control .attachment-meta-title { + padding-top: 7px; +} + +/* Remove descender space. */ +.customize-control .thumbnail-image, +.customize-control-header .current, +.customize-control .wp-media-wrapper.wp-video { + line-height: 0; +} + +/* Remove descender space. */ +.customize-control-site_icon .favicon-preview .browser-preview { + vertical-align: top; +} + +.customize-control .thumbnail-image img { + cursor: pointer; +} + +#customize-controls .thumbnail-audio .thumbnail { + max-width: 64px; + max-height: 64px; + margin: 10px; + float: right; +} + +#available-menu-items .accordion-section-content .new-content-item, +.customize-control-dropdown-pages .new-content-item { + width: calc(100% - 30px); + padding: 8px 15px; + position: absolute; + bottom: 0; + z-index: 10; + background: #f0f0f1; + display: flex; +} + +.customize-control-dropdown-pages .new-content-item { + width: 100%; + padding: 5px 1px 5px 0; + position: relative; +} + +#available-menu-items .new-content-item .create-item-input, +.customize-control-dropdown-pages .new-content-item .create-item-input { + flex-grow: 10; +} + +#available-menu-items .new-content-item .add-content, +.customize-control-dropdown-pages .new-content-item .add-content { + margin: 2px 6px 2px 0; + flex-grow: 1; +} + +.customize-control-dropdown-pages .new-content-item .create-item-input.invalid { + border: 1px solid #d63638; +} + +.customize-control-dropdown-pages .add-new-toggle { + margin-right: 1px; + font-weight: 600; + line-height: 2.2; +} + +#customize-preview iframe { + width: 100%; + height: 100%; + position: absolute; +} +#customize-preview iframe + iframe { + visibility: hidden; +} + +.wp-full-overlay-sidebar { + background: #f0f0f1; + border-left: 1px solid #dcdcde; +} + + +/** + * Notifications + */ + +#customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */ + margin: 4px 0 8px; + padding: 0; + cursor: default; +} + +#customize-controls .customize-control-widget_form.has-error .widget .widget-top, +.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle { + box-shadow: inset 0 0 0 2px #d63638; + transition: .15s box-shadow linear; +} + +#customize-controls .customize-control-notifications-container li.notice { + list-style: none; + margin: 0 0 6px; + padding: 9px 14px; + overflow: hidden; +} +#customize-controls .customize-control-notifications-container .notice.is-dismissible { + padding-left: 38px; +} + +.customize-control-notifications-container li.notice:last-child { + margin-bottom: 0; +} + +#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container { + margin-top: 0; +} + +#customize-controls .customize-control-widget_form .customize-control-notifications-container { + margin-top: 8px; +} + +.customize-control-text.has-error input { + outline: 2px solid #d63638; +} + +#customize-controls #customize-notifications-area { + position: absolute; + top: 46px; + width: 100%; + border-bottom: 1px solid #dcdcde; + display: block; + padding: 0; + margin: 0; +} + +.wp-full-overlay.collapsed #customize-controls #customize-notifications-area { + display: none !important; +} + +#customize-controls #customize-notifications-area:not(.has-overlay-notifications), +#customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications), +#customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) { + max-height: 210px; + overflow-x: hidden; + overflow-y: auto; +} + +#customize-controls #customize-notifications-area > ul, +#customize-controls #customize-notifications-area .notice, +#customize-controls .panel-meta > .customize-control-notifications-container, +#customize-controls .panel-meta > .customize-control-notifications-container .notice, +#customize-controls .customize-section-title > .customize-control-notifications-container, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice { + margin: 0; +} +#customize-controls .panel-meta > .customize-control-notifications-container, +#customize-controls .customize-section-title > .customize-control-notifications-container { + border-top: 1px solid #dcdcde; +} +#customize-controls #customize-notifications-area .notice, +#customize-controls .panel-meta > .customize-control-notifications-container .notice, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice { + padding: 9px 14px; +} +#customize-controls #customize-notifications-area .notice.is-dismissible, +#customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible { + padding-left: 38px; +} +#customize-controls #customize-notifications-area .notice + .notice, +#customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice { + margin-top: 1px; +} + +@keyframes customize-fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +#customize-controls .notice.notification-overlay, +#customize-controls #customize-notifications-area .notice.notification-overlay { + margin: 0; + border-right: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */ +} + +#customize-controls .customize-control-notifications-container.has-overlay-notifications { + animation: customize-fade-in 0.5s; + z-index: 30; +} + +/* Note: Styles for this are also defined in themes.css */ +#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message { + clear: both; + color: #1d2327; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 2em 0; + text-align: center; + width: 100%; + display: block; + top: 50%; + position: relative; +} + +/* Style for custom settings */ + +/** + * Static front page + */ + +#customize-control-show_on_front.has-error { + margin-bottom: 0; +} +#customize-control-show_on_front.has-error .customize-control-notifications-container { + margin-top: 12px; +} + +/** + * Dropdowns + */ + +.accordion-section .dropdown { + float: right; + display: block; + position: relative; + cursor: pointer; +} + +.accordion-section .dropdown-content { + overflow: hidden; + float: right; + min-width: 30px; + height: 16px; + line-height: 16px; + margin-left: 16px; + padding: 4px 5px; + border: 2px solid #f0f0f1; + -webkit-user-select: none; + user-select: none; +} + +/* @todo maybe no more used? */ +.customize-control .dropdown-arrow { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 20px; + background: #f0f0f1; +} + +.customize-control .dropdown-arrow:after { + content: "\f140"; + font: normal 20px/1 dashicons; + speak: never; + display: block; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #2c3338; +} + +.customize-control .dropdown-status { + color: #2c3338; + background: #f0f0f1; + display: none; + max-width: 112px; +} + +.customize-control-color .dropdown { + margin-left: 5px; + margin-bottom: 5px; +} + +.customize-control-color .dropdown .dropdown-content { + background-color: #50575e; + border: 1px solid rgba(0, 0, 0, 0.15); +} + +.customize-control-color .dropdown:hover .dropdown-content { + border-color: rgba(0, 0, 0, 0.25); +} + +/** + * iOS can't scroll iframes, + * instead it expands the iframe size to match the size of the content + */ + +.ios .wp-full-overlay { + position: relative; +} + +.ios #customize-controls .wp-full-overlay-sidebar-content { + -webkit-overflow-scrolling: touch; +} + +/* Media controls */ + +.customize-control .actions .button { + margin-top: 12px; +} + +.customize-control-header .actions, +.customize-control-header .uploaded { + margin-bottom: 18px; +} + +.customize-control-header .uploaded button:not(.random), +.customize-control-header .default button:not(.random) { + width: 100%; + padding: 0; + margin: 0; + background: none; + border: none; + color: inherit; + cursor: pointer; +} + +.customize-control-header button img { + display: block; +} + +.customize-control .attachment-media-view .remove-button, +.customize-control .attachment-media-view .default-button, +.customize-control .attachment-media-view .upload-button, +.customize-control-header button.new, +.customize-control-header button.remove { + width: auto; + height: auto; + white-space: normal; +} + +.customize-control .attachment-media-view .thumbnail, +.customize-control-header .current .container { + overflow: hidden; +} + +.customize-control .attachment-media-view .placeholder, +.customize-control .attachment-media-view .button-add-media, +.customize-control-header .placeholder { + width: 100%; + position: relative; + text-align: center; + cursor: default; + border: 1px dashed #c3c4c7; + box-sizing: border-box; + padding: 9px 0; + line-height: 1.6; +} + +.customize-control .attachment-media-view .button-add-media { + cursor: pointer; + background-color: #f0f0f1; + color: #2c3338; +} + +.customize-control .attachment-media-view .button-add-media:hover { + background-color: #fff; +} + +.customize-control .attachment-media-view .button-add-media:focus { + background-color: #fff; + border-color: #3582c4; + border-style: solid; + box-shadow: 0 0 0 1px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.customize-control-header .inner { + display: none; + position: absolute; + width: 100%; + color: #50575e; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.customize-control-header .inner, +.customize-control-header .inner .dashicons { + line-height: 20px; + top: 8px; +} + +.customize-control-header .list .inner, +.customize-control-header .list .inner .dashicons { + top: 9px; +} + +.customize-control-header .header-view { + position: relative; + width: 100%; + margin-bottom: 12px; +} + +.customize-control-header .header-view:last-child { + margin-bottom: 0; +} + +/* Convoluted, but 'outline' support isn't good enough yet */ +.customize-control-header .header-view:after { + border: 0; +} + +.customize-control-header .header-view.selected .choice:focus { + outline: none; +} + +.customize-control-header .header-view.selected:after { + content: ""; + position: absolute; + height: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: 4px solid #72aee6; + border-radius: 2px; +} + +.customize-control-header .header-view.button.selected { + border: 0; +} + +/* Header control: overlay "close" button */ + +.customize-control-header .uploaded .header-view .close { + font-size: 20px; + color: #fff; + background: #50575e; + background: rgba(0, 0, 0, 0.5); + position: absolute; + top: 10px; + right: -999px; + z-index: 1; + width: 26px; + height: 26px; + cursor: pointer; +} + +.customize-control-header .header-view:hover .close, +.customize-control-header .header-view .close:focus { + right: auto; + left: 10px; +} + +.customize-control-header .header-view .close:focus { + outline: 1px solid #4f94d4; +} + +/* Header control: randomiz(s)er */ + +.customize-control-header .random.placeholder { + cursor: pointer; + border-radius: 2px; + height: 40px; +} + +.customize-control-header button.random { + width: 100%; + height: auto; + min-height: 40px; + white-space: normal; +} + +.customize-control-header button.random .dice { + margin-top: 4px; +} + +.customize-control-header .placeholder:hover .dice, +.customize-control-header .header-view:hover > button.random .dice { + animation: dice-color-change 3s infinite; +} + +.button-see-me { + animation: bounce .7s 1; + transform-origin: center bottom; +} + +@keyframes bounce { + from, 20%, 53%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transform: translate3d(0,0,0); + } + + 40%, 43% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -12px, 0); + } + + 70% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -6px, 0); + } + + 90% { + transform: translate3d(0,-1px,0); + } +} + +.customize-control-header .choice { + position: relative; + display: block; + margin-bottom: 9px; +} + +.customize-control-header .choice:focus { + outline: none; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 3px 1px rgba(79, 148, 212, 0.8); +} + +.customize-control-header .uploaded div:last-child > .choice { + margin-bottom: 0; +} + +.customize-control .attachment-media-view .thumbnail-image img, +.customize-control-header img { + max-width: 100%; +} + +.customize-control .attachment-media-view .remove-button, +.customize-control .attachment-media-view .default-button, +.customize-control-header .remove { + margin-left: 8px; +} + +/* Background position control */ +.customize-control-background_position .background-position-control .button-group { + display: block; +} + +/** + * Code Editor Control and Custom CSS Section + * + * Modifications to the Section Container to make the textarea full-width and + * full-height, if the control is the only control in the section. + */ + +.customize-control-code_editor textarea { + width: 100%; + font-family: Consolas, Monaco, monospace; + font-size: 12px; + padding: 6px 8px; + -o-tab-size: 2; + tab-size: 2; +} +.customize-control-code_editor textarea, +.customize-control-code_editor .CodeMirror { + height: 14em; +} + +#customize-controls .customize-section-description-container.section-meta.customize-info { + border-bottom: none; +} + +#sub-accordion-section-custom_css .customize-control-notifications-container { + margin-bottom: 15px; +} + +#customize-control-custom_css textarea { + display: block; + height: 500px; +} + +.customize-section-description-container + #customize-control-custom_css .customize-control-title { + margin-right: 12px; +} + +.customize-section-description-container + #customize-control-custom_css:last-child textarea { + border-left: 0; + border-right: 0; + height: calc( 100vh - 185px ); + resize: none; +} + +.customize-section-description-container + #customize-control-custom_css:last-child { + margin-right: -12px; + width: 299px; + width: calc( 100% + 24px ); + margin-bottom: -12px; +} + +.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror { + height: calc( 100vh - 185px ); +} + +.CodeMirror-lint-tooltip, +.CodeMirror-hints { + z-index: 500000 !important; +} + +.customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container { + margin-right: 12px; + margin-left: 12px; +} + +.theme-browser .theme.active .theme-actions, +.wp-customizer .theme-browser .theme .theme-actions { + padding: 9px 15px; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); +} + +@media screen and (max-width: 640px) { + .customize-section-description-container + #customize-control-custom_css:last-child { + margin-left: 0; + } + + .customize-section-description-container + #customize-control-custom_css:last-child textarea { + height: calc( 100vh - 140px ); + } +} + +/** + * Themes + */ + +#customize-theme-controls .control-panel-themes { + border-bottom: none; +} + +#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */ +#customize-theme-controls .control-panel-themes > .accordion-section-title { + cursor: default; + background: #fff; + color: #50575e; + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #dcdcde; + border-right: none; + border-left: none; + margin: 0 0 15px; + padding-left: 100px; /* Space for the button */ +} + +#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */ +#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child { + border-top: 0; +} + +#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */ +#customize-theme-controls .control-section-themes > .accordion-section-title { + margin: 0 0 15px; +} + +#customize-controls .customize-themes-panel .accordion-section-title:hover, +#customize-controls .customize-themes-panel .accordion-section-title { + margin: 15px -8px; +} + +#customize-controls .control-section-themes .accordion-section-title, +#customize-controls .customize-themes-panel .accordion-section-title { + padding-left: 100px; /* Space for the button */ +} + +.control-panel-themes .accordion-section-title span.customize-action, +#customize-controls .customize-section-title span.customize-action, +#customize-controls .control-section-themes .accordion-section-title span.customize-action, +#customize-controls .customize-section-title span.customize-action { + font-size: 13px; + display: block; + font-weight: 400; +} + +#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme { + position: absolute; + left: 10px; + top: 50%; + margin-top: -14px; + font-weight: 400; +} + +#customize-notifications-area .notification-message button.switch-to-editor { + display: block; + margin-top: 6px; + font-weight: 400; +} + +#customize-theme-controls .control-panel-themes > .accordion-section-title:after { + display: none; +} + +.control-panel-themes .customize-themes-full-container { + position: fixed; + top: 0; + right: 0; + transition: .18s right ease-in-out; + margin: 0 300px 0 0; + padding: 71px 0 25px; + overflow-y: scroll; + width: calc(100% - 300px); + height: calc(100% - 96px); + background: #f0f0f1; + z-index: 20; +} + +@media (prefers-reduced-motion: reduce) { + .control-panel-themes .customize-themes-full-container { + transition: none; + } +} + +@media screen and (min-width: 1670px) { + .control-panel-themes .customize-themes-full-container { + width: 82%; + left: 0; + right: initial; + } +} + +.modal-open .control-panel-themes .customize-themes-full-container { + overflow-y: visible; +} + +/* Animations for opening the themes panel */ +#customize-save-button-wrapper, +#customize-header-actions .spinner, +#customize-header-actions .customize-controls-preview-toggle { + transition: .18s margin ease-in-out; +} + +#customize-footer-actions, +#customize-footer-actions .collapse-sidebar { + bottom: 0; + transition: .18s bottom ease-in-out; +} + +.in-themes-panel:not(.animating) #customize-header-actions .spinner, +.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle, +.in-themes-panel:not(.animating) #customize-preview, +.in-themes-panel:not(.animating) #customize-footer-actions { + visibility: hidden; +} + +.wp-full-overlay.in-themes-panel { + background: #f0f0f1; /* Prevents a black flash when fading in the panel */ +} + +.in-themes-panel #customize-save-button-wrapper, +.in-themes-panel #customize-header-actions .spinner, +.in-themes-panel #customize-header-actions .customize-controls-preview-toggle { + margin-top: -46px; /* Height of header actions bar */ +} + +.in-themes-panel #customize-footer-actions, +.in-themes-panel #customize-footer-actions .collapse-sidebar { + bottom: -45px; +} + +/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */ +.in-themes-panel.animating .control-panel-themes .filter-themes-count { + display: none; +} + +.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content { + bottom: 0; +} + +.themes-filter-bar .feature-filter-toggle { + float: left; + margin: 3px 25px 3px 0; +} + +.themes-filter-bar .feature-filter-toggle:before { + content: "\f111"; + margin: 0 0 0 5px; + font: normal 16px/1 dashicons; + vertical-align: text-bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.themes-filter-bar .feature-filter-toggle.open { + background: #f0f0f1; + border-color: #8c8f94; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); +} + +.themes-filter-bar .feature-filter-toggle .filter-count-filters { + display: none; +} + +.filter-drawer { + box-sizing: border-box; + width: 100%; + position: absolute; + top: 46px; + right: 0; + padding: 25px 25px 25px 0; + border-top: 0; + margin: 0; + background: #f0f0f1; + border-bottom: 1px solid #dcdcde; +} + +.filter-drawer .filter-group { + margin: 0 0 0 25px; + width: calc( (100% - 75px) / 3); + min-width: 200px; + max-width: 320px; +} + +/* Adds a delay before fading in to avoid it "jumping" */ +@keyframes themes-fade-in { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.control-panel-themes .customize-themes-full-container.animate { + animation: .6s themes-fade-in 1; +} + +.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count { + animation: .6s themes-fade-in 1; +} + +.control-panel-themes .filter-themes-count { + position: relative; + float: left; + line-height: 2.6; +} + +.control-panel-themes .filter-themes-count .themes-displayed { + font-weight: 600; + color: #50575e; +} + +.customize-themes-notifications { + margin: 0; +} + +.control-panel-themes .customize-themes-notifications .notice { + margin: 0 0 25px; +} + +.customize-themes-full-container .customize-themes-section { + display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ + overflow: hidden; +} + +.customize-themes-full-container .customize-themes-section.current-section { + display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ +} + +.control-section .customize-section-text-before { + padding: 0 15px 8px 0; + margin: 15px 0 0; + line-height: 16px; + border-bottom: 1px solid #dcdcde; + color: #50575e; +} + +.control-panel-themes .customize-themes-section-title { + width: 100%; + background: #fff; + box-shadow: none; + outline: none; + border-top: none; + border-bottom: 1px solid #dcdcde; + border-right: 4px solid #fff; + border-left: none; + cursor: pointer; + padding: 10px 15px; + position: relative; + text-align: right; + font-size: 14px; + font-weight: 600; + color: #50575e; + text-shadow: none; +} + +.control-panel-themes #accordion-section-installed_themes { + border-top: 1px solid #dcdcde; +} + +.control-panel-themes .theme-section { + margin: 0; + position: relative; +} + +.control-panel-themes .customize-themes-section-title:focus, +.control-panel-themes .customize-themes-section-title:hover { + border-right-color: #2271b1; + color: #2271b1; + background: #f6f7f7; +} + +.customize-themes-section-title:not(.selected):after { + content: ""; + display: block; + position: absolute; + top: 9px; + left: 15px; + width: 18px; + height: 18px; + border-radius: 100%; + border: 1px solid #c3c4c7; + background: #fff; +} + +.control-panel-themes .theme-section .customize-themes-section-title.selected:after { + content: "\f147"; + font: 16px/1 dashicons; + box-sizing: border-box; + width: 20px; + height: 20px; + padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */ + border-radius: 100%; + position: absolute; + top: 9px; + left: 15px; + background: #2271b1; + color: #fff; +} + +.control-panel-themes .customize-themes-section-title.selected { + color: #2271b1; +} + +#customize-theme-controls .themes.accordion-section-content { + position: relative; + right: 0; + padding: 0; + width: 100%; +} + +.loading .customize-themes-section .spinner { + display: block; + visibility: visible; + position: relative; + clear: both; + width: 20px; + height: 20px; + right: calc(50% - 10px); + float: none; + margin-top: 50px; +} + +.customize-themes-section .no-themes, +.customize-themes-section .no-themes-local { + display: none; +} + +.themes-section-installed_themes .theme .notice-success:not(.updated-message) { + display: none; /* Hide "installed" notice on installed themes tab. */ +} + +.customize-control-theme .theme { + width: 100%; + margin: 0; + border: 1px solid #dcdcde; + background: #fff; +} + +.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions { + background: #fff; + border: none; +} + +.customize-control.customize-control-theme { /* override most properties on .customize-control */ + box-sizing: border-box; + width: 25%; + max-width: 600px; /* Max. screenshot size / 2 */ + margin: 0 0 25px 25px; + padding: 0; + clear: none; +} + +/* 5 columns above 2100px */ +@media screen and (min-width: 2101px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */ + } +} + +/* 4 columns up to 2100px */ +@media screen and (min-width: 1601px) and (max-width: 2100px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 100px ) / 4 - 1px ); + } +} + +/* 3 columns up to 1600px */ +@media screen and (min-width: 1201px) and (max-width: 1600px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 75px ) / 3 - 1px ); + } +} + +/* 2 columns up to 1200px */ +@media screen and (min-width: 851px) and (max-width: 1200px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 50px ) / 2 - 1px ); + + } +} + +/* 1 column up to 850 px */ +@media screen and (max-width: 850px) { + .customize-control.customize-control-theme { + width: 100%; + } +} + +.wp-customizer .theme-browser .themes { + padding: 0 25px 25px 0; + transition: .18s margin-top linear; +} + +.wp-customizer .theme-browser .theme .theme-actions { + opacity: 1; +} + +#customize-controls h3.theme-name { + font-size: 15px; +} + +#customize-controls .theme-overlay .theme-name { + font-size: 32px; +} + +.customize-preview-header.themes-filter-bar { + position: fixed; + top: 0; + right: 300px; + width: calc(100% - 300px); + height: 46px; + background: #f0f0f1; + z-index: 10; + padding: 6px 25px; + box-sizing: border-box; + border-bottom: 1px solid #dcdcde; +} + +@media screen and (min-width: 1670px) { + .customize-preview-header.themes-filter-bar { + width: 82%; + left: 0; + right: initial; + } +} + +.themes-filter-bar .themes-filter-container { + margin: 0; + padding: 0; +} + +.themes-filter-bar .wp-filter-search { + line-height: 1.8; + padding: 6px 30px 6px 10px; + max-width: 100%; + width: 40%; + min-width: 300px; + position: absolute; + top: 6px; + right: 25px; + height: 32px; + margin: 1px 0; +} + +/* Unstick the filter bar on short windows/screens. This breakpoint is based on the + current length of .org feature filters assuming translations do not wrap lines. */ +@media screen and (max-height: 540px), screen and (max-width: 1018px) { + .customize-preview-header.themes-filter-bar { + position: relative; + right: 0; + width: 100%; + margin: 0 0 25px; + } + .filter-drawer { + top: 46px; + } + .wp-customizer .theme-browser .themes { + padding: 0 25px 25px 0; + overflow: hidden; + } + + .control-panel-themes .customize-themes-full-container { + margin-top: 0; + padding: 0; + height: 100%; + width: calc(100% - 300px); + } +} + +@media screen and (max-width: 1018px) { + .filter-drawer .filter-group { + width: calc( (100% - 50px) / 2); + } +} + +@media screen and (max-width: 900px) { + .customize-preview-header.themes-filter-bar { + height: 86px; + padding-top: 46px; + } + + .themes-filter-bar .wp-filter-search { + width: calc(100% - 50px); + margin: 0; + min-width: 200px; + } + + .filter-drawer { + top: 86px; + } + + .control-panel-themes .filter-themes-count { + float: right; + } +} + +@media screen and (max-width: 792px) { + .filter-drawer .filter-group { + width: calc( 100% - 25px); + } +} + +.control-panel-themes .customize-themes-mobile-back { + display: none; +} + +/* Mobile - toggle between themes and filters */ +@media screen and (max-width: 600px) { + + .filter-drawer { + top: 132px; + } + + .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes { + display: block; + float: left; + } + + .control-panel-themes .customize-themes-full-container { + width: 100%; + margin: 0; + padding-top: 46px; + height: calc(100% - 46px); + z-index: 1; + display: none; + } + + .showing-themes .control-panel-themes .customize-themes-full-container { + display: block; + } + + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back { + display: block; + position: fixed; + top: 0; + right: 0; + background: #f0f0f1; + color: #3c434a; + border-radius: 0; + box-shadow: none; + border: none; + height: 46px; + width: 100%; + z-index: 10; + text-align: right; + text-shadow: none; + border-bottom: 1px solid #dcdcde; + border-right: 4px solid transparent; + margin: 0; + padding: 0; + font-size: 0; + overflow: hidden; + } + + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before { + right: 0; + top: 0; + height: 46px; + width: 26px; + display: block; + line-height: 2.3; + padding: 0 8px; + border-left: 1px solid #dcdcde; + } + + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover, + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus { + color: #2271b1; + background: #f6f7f7; + border-right-color: #2271b1; + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; + } + + .showing-themes #customize-header-actions { + display: none; + } + + #customize-controls { + width: 100%; + } +} + +/* Details View */ +.wp-customizer .theme-overlay { + display: none; +} + +.wp-customizer.modal-open .theme-overlay { + position: fixed; + right: 0; + top: 0; + left: 0; + bottom: 0; + z-index: 109; +} + +/* Avoid a z-index war by resetting elements that should be under the overlay. + This is likely required because of the way that sections and panels are positioned. */ +.wp-customizer.modal-open #customize-header-actions, +.wp-customizer.modal-open .control-panel-themes .filter-themes-count, +.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after { + z-index: -1; +} + +.wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content { + overflow: visible; +} + +.wp-customizer .theme-overlay .theme-backdrop { + background: rgba(240, 240, 241, 0.75); + position: fixed; + z-index: 110; +} + +.wp-customizer .theme-overlay .star-rating { + float: right; + margin-left: 8px; +} + +.wp-customizer .theme-rating .num-ratings { + line-height: 20px; +} + +.wp-customizer .theme-overlay .theme-wrap { + right: 90px; + left: 90px; + top: 45px; + bottom: 45px; + z-index: 120; +} + +.wp-customizer .theme-overlay .theme-actions { + text-align: left; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */ + padding: 10px 25px; + background: #f0f0f1; + border-top: 1px solid #dcdcde; +} + +.wp-customizer .theme-overlay .theme-actions .theme-install.preview { + margin-right: 8px; +} + +.control-panel-themes .theme-actions .delete-theme { + right: 15px; /* these override themes.css on mobile */ + left: auto; + bottom: auto; + position: absolute; +} + +.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { + overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */ +} + +.wp-customizer .theme-header { + background: #f0f0f1; +} + +.wp-customizer .theme-overlay .theme-header button, +.wp-customizer .theme-overlay .theme-header .close:before { + color: #3c434a; +} + +.wp-customizer .theme-overlay .theme-header .close:focus, +.wp-customizer .theme-overlay .theme-header .close:hover, +.wp-customizer .theme-overlay .theme-header .right:focus, +.wp-customizer .theme-overlay .theme-header .right:hover, +.wp-customizer .theme-overlay .theme-header .left:focus, +.wp-customizer .theme-overlay .theme-header .left:hover { + background: #fff; + border-bottom: 4px solid #2271b1; + color: #2271b1; +} + +.wp-customizer .theme-overlay .theme-header .close:focus:before, +.wp-customizer .theme-overlay .theme-header .close:hover:before { + color: #2271b1; +} + +.wp-customizer .theme-overlay .theme-header button.disabled, +.wp-customizer .theme-overlay .theme-header button.disabled:hover, +.wp-customizer .theme-overlay .theme-header button.disabled:focus { + border-bottom: none; + background: transparent; + color: #c3c4c7; +} + +/* Small Screens */ +@media (max-width: 850px), (max-height: 472px) { + .wp-customizer .theme-overlay .theme-wrap { + right: 0; + left: 0; + top: 0; + bottom: 0; + } + + .wp-customizer .theme-browser .themes { + padding-left: 25px; + } +} + +/* Handle cheaters. */ +body.cheatin { + font-size: medium; + height: auto; + background: #fff; + border: 1px solid #c3c4c7; + margin: 50px auto 2em; + padding: 1em 2em; + max-width: 700px; + min-width: 0; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +body.cheatin h1 { + border-bottom: 1px solid #dcdcde; + clear: both; + color: #50575e; + font-size: 24px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin: 30px 0 0; + padding: 0 0 7px; +} + +body.cheatin p { + font-size: 14px; + line-height: 1.5; + margin: 25px 0 20px; +} + +/** + * Widgets and Menus common styles + */ + +/* higher specificity than .wp-core-ui .button */ +#customize-theme-controls .add-new-widget, +#customize-theme-controls .add-new-menu-item { + cursor: pointer; + float: left; + margin: 0 10px 0 0; + transition: all 0.2s; + -webkit-user-select: none; + user-select: none; + outline: none; +} + +.reordering .add-new-widget, +.reordering .add-new-menu-item { + opacity: 0.2; + pointer-events: none; + cursor: not-allowed; /* doesn't work in conjunction with pointer-events */ +} + +.add-new-widget:before, +.add-new-menu-item:before, +#available-menu-items .new-content-item .add-content:before { + content: "\f132"; + display: inline-block; + position: relative; + right: -2px; + top: 0; + font: normal 20px/1 dashicons; + vertical-align: middle; + transition: all 0.2s; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Reordering */ +.reorder-toggle { + float: left; + padding: 5px 8px; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.reorder, +.reordering .reorder-done { + display: block; + padding: 5px 8px; +} + +.reorder-done, +.reordering .reorder { + display: none; +} + +.widget-reorder-nav span, +.menu-item-reorder-nav button { + position: relative; + overflow: hidden; + float: right; + display: block; + width: 33px; /* was 42px for mobile */ + height: 43px; + color: #8c8f94; + text-indent: -9999px; + cursor: pointer; + outline: none; +} + +.menu-item-reorder-nav button { + width: 30px; + height: 40px; + background: transparent; + border: none; + box-shadow: none; +} + +.widget-reorder-nav span:before, +.menu-item-reorder-nav button:before { + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + font: normal 20px/43px dashicons; + text-align: center; + text-indent: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.widget-reorder-nav span:hover, +.widget-reorder-nav span:focus, +.menu-item-reorder-nav button:hover, +.menu-item-reorder-nav button:focus { + color: #1d2327; + background: #f0f0f1; +} + +.move-widget-down:before, +.menus-move-down:before { + content: "\f347"; +} + +.move-widget-up:before, +.menus-move-up:before { + content: "\f343"; +} + +#customize-theme-controls .first-widget .move-widget-up, +#customize-theme-controls .last-widget .move-widget-down, +.move-up-disabled .menus-move-up, +.move-down-disabled .menus-move-down, +.move-right-disabled .menus-move-right, +.move-left-disabled .menus-move-left { + color: #dcdcde; + background-color: #fff; + cursor: default; + pointer-events: none; +} + +/** + * New widget and Add-menu-items modes and panels + */ + +.wp-full-overlay-main { + left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ + width: 100%; +} + +body.adding-widget .add-new-widget, +body.adding-widget .add-new-widget:hover, +.adding-menu-items .add-new-menu-item, +.adding-menu-items .add-new-menu-item:hover, +.add-menu-toggle.open, +.add-menu-toggle.open:hover { + background: #f0f0f1; + border-color: #8c8f94; + color: #2c3338; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); +} + +body.adding-widget .add-new-widget:before, +.adding-menu-items .add-new-menu-item:before, +#accordion-section-add_menu .add-new-menu-item.open:before { + transform: rotate(-45deg); +} + +#available-widgets, +#available-menu-items { + position: absolute; + top: 0; + bottom: 0; + right: -301px; + visibility: hidden; + overflow-x: hidden; + overflow-y: auto; + width: 300px; + margin: 0; + z-index: 4; + background: #f0f0f1; + transition: right .18s; + border-left: 1px solid #dcdcde; +} + +#available-widgets .customize-section-title, +#available-menu-items .customize-section-title { + display: none; +} + +#available-widgets-list { + top: 60px; + position: absolute; + overflow: auto; + bottom: 0; + width: 100%; + border-top: 1px solid #dcdcde; +} + +.no-widgets-found #available-widgets-list { + border-top: none; +} + +#available-widgets-filter { + position: fixed; + top: 0; + z-index: 1; + width: 300px; + background: #f0f0f1; +} + +/* search field container */ +#available-widgets-filter, +#available-menu-items-search .accordion-section-title { + padding: 13px 15px; + box-sizing: border-box; +} + +#available-widgets-filter input, +#available-menu-items-search input { + width: 100%; + min-height: 32px; + margin: 1px 0; + padding: 0 30px; +} + +#available-widgets-filter input::-ms-clear, +#available-menu-items-search input::-ms-clear { + display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */ +} + +#available-menu-items-search .search-icon, +#available-widgets-filter .search-icon { + display: block; + position: absolute; + top: 15px; /* 13 container padding +1 input margin +1 input border */ + right: 16px; + width: 30px; + height: 30px; + line-height: 2.1; + text-align: center; + color: #646970; +} + +#available-widgets-filter .clear-results, +#available-menu-items-search .clear-results { + position: absolute; + top: 15px; /* 13 container padding +1 input margin +1 input border */ + left: 16px; + width: 30px; + height: 30px; + padding: 0; + border: 0; + cursor: pointer; + background: none; + color: #d63638; + text-decoration: none; + outline: 0; +} + +#available-widgets-filter .clear-results, +#available-menu-items-search .clear-results, +#available-menu-items-search.loading .clear-results.is-visible { + display: none; +} + +#available-widgets-filter .clear-results.is-visible, +#available-menu-items-search .clear-results.is-visible { + display: block; +} + +#available-widgets-filter .clear-results:before, +#available-menu-items-search .clear-results:before { + content: "\f335"; + font: normal 20px/1 dashicons; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +#available-widgets-filter .clear-results:hover, +#available-widgets-filter .clear-results:focus, +#available-menu-items-search .clear-results:hover, +#available-menu-items-search .clear-results:focus { + color: #d63638; +} + +#available-widgets-filter .clear-results:focus, +#available-menu-items-search .clear-results:focus { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +#available-menu-items-search .search-icon:after, +#available-widgets-filter .search-icon:after, +.themes-filter-bar .search-icon:after { + content: "\f179"; + font: normal 20px/1 dashicons; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.themes-filter-bar .search-icon { + position: absolute; + top: 7px; + right: 26px; + z-index: 1; + color: #646970; + height: 30px; + width: 30px; + line-height: 2; + text-align: center; +} + +.no-widgets-found-message { + display: none; + margin: 0; + padding: 0 15px; + line-height: inherit; +} + +.no-widgets-found .no-widgets-found-message { + display: block; +} + +#available-widgets .widget-top, +#available-widgets .widget-top:hover, +#available-menu-items .item-top, +#available-menu-items .item-top:hover { + border: none; + background: transparent; + box-shadow: none; +} + +#available-widgets .widget-tpl, +#available-menu-items .item-tpl { + position: relative; + padding: 15px 60px 15px 15px; + background: #fff; + border-bottom: 1px solid #dcdcde; + border-right: 4px solid #fff; + transition: + .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; + cursor: pointer; + display: none; +} + +#available-widgets .widget, +#available-menu-items .item { + position: static; +} + + +/* Responsive */ +.customize-controls-preview-toggle { + display: none; +} + +@media only screen and (max-width: 782px) { + .wp-customizer .theme:not(.active):hover .theme-actions, + .wp-customizer .theme:not(.active):focus .theme-actions { + display: block; + } + + .wp-customizer .theme-browser .theme.active .theme-name span { + display: inline; + } + + .customize-control-header button.random .dice { + margin-top: 0; + } + + .customize-control-radio .customize-inside-control-row, + .customize-control-checkbox .customize-inside-control-row, + .customize-control-nav_menu_auto_add .customize-inside-control-row { + margin-right: 32px; + } + + .customize-control-radio input, + .customize-control-checkbox input, + .customize-control-nav_menu_auto_add input { + margin-right: -32px; + } + + .customize-control input[type="radio"] + label + br, + .customize-control input[type="checkbox"] + label + br { + line-height: 2.5; /* For widgets checkboxes */ + } + + .customize-control .date-time-fields select { + height: 39px; + } + + .date-time-fields .date-input.month { + width: 79px; + } + + .date-time-fields .date-input.day, + .date-time-fields .date-input.hour, + .date-time-fields .date-input.minute { + width: 55px; + } + + .date-time-fields .date-input.year { + width: 80px; + } + + #customize-control-changeset_preview_link a { + bottom: 16px; + } + + .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { + bottom: 10px; + } + + .media-widget-control .media-widget-buttons .button.edit-media, + .media-widget-control .media-widget-buttons .button.change-media, + .media-widget-control .media-widget-buttons .button.select-media { + margin-top: 12px; + } + + .wp-core-ui .themes-filter-bar .feature-filter-toggle { + margin: 3px 25px 3px 0; + } +} + +@media screen and (max-width: 1200px) { + .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, + .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, + .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { + right: 67%; + } +} + +@media screen and (max-width: 640px) { + + /* when the sidebar is collapsed and switching to responsive view, + bring it back see ticket #35220 */ + .wp-full-overlay.collapsed #customize-controls { + margin-right: 0; + } + + .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { + bottom: 0; + } + + .customize-controls-preview-toggle { + display: block; + position: absolute; + top: 0; + right: 48px; + line-height: 2.6; + font-size: 14px; + padding: 0 12px 4px; + margin: 0; + height: 45px; + background: #f0f0f1; + border: 0; + border-left: 1px solid #dcdcde; + border-top: 4px solid #f0f0f1; + color: #50575e; + cursor: pointer; + transition: color .1s ease-in-out, background .1s ease-in-out; + } + + #customize-footer-actions, + /*#customize-preview,*/ + .customize-controls-preview-toggle .controls, + .preview-only .wp-full-overlay-sidebar-content, + .preview-only .customize-controls-preview-toggle .preview { + display: none; + } + + .preview-only #customize-save-button-wrapper { + margin-top: -46px; + } + + .customize-controls-preview-toggle .preview:before, + .customize-controls-preview-toggle .controls:before { + font: normal 20px/1 dashicons; + content: "\f177"; + position: relative; + top: 4px; + margin-left: 6px; + } + + .customize-controls-preview-toggle .controls:before { + content: "\f540"; + } + + .preview-only #customize-controls { + height: 45px; + } + + .preview-only #customize-preview, + .preview-only .customize-controls-preview-toggle .controls { + display: block; + } + + .wp-core-ui.wp-customizer .button { + min-height: 30px; + padding: 0 14px; + line-height: 2; + font-size: 14px; + vertical-align: middle; + } + + #customize-control-changeset_status .customize-inside-control-row { + padding-top: 15px; + } + + body.adding-widget div#available-widgets, + body.adding-menu-items div#available-menu-items, + body.outer-section-open div#customize-sidebar-outer-content { + width: 100%; + } + + #available-widgets .customize-section-title, + #available-menu-items .customize-section-title { + display: block; + margin: 0; + } + + #available-widgets .customize-section-back, + #available-menu-items .customize-section-back { + height: 69px; + } + + #available-widgets .customize-section-title h3, + #available-menu-items .customize-section-title h3 { + font-size: 20px; + font-weight: 200; + padding: 9px 14px 12px 10px; + margin: 0; + line-height: 24px; + color: #50575e; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #available-widgets .customize-section-title .customize-action, + #available-menu-items .customize-section-title .customize-action { + font-size: 13px; + display: block; + font-weight: 400; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #available-widgets-filter { + position: relative; + width: 100%; + height: auto; + } + + #available-widgets-list { + top: 130px; + } + + #available-menu-items-search .clear-results, + #available-menu-items-search .search-icon { + top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */ + } + + .reorder, + .reordering .reorder-done { + padding: 8px; + } + + .wp-core-ui .themes-filter-bar .feature-filter-toggle { + margin: 0; + } +} + +@media screen and (max-width: 600px) { + .wp-full-overlay.expanded { + margin-right: 0; + } + + body.adding-widget div#available-widgets, + body.adding-menu-items div#available-menu-items, + body.outer-section-open div#customize-sidebar-outer-content { + top: 46px; + z-index: 10; + } + + body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content { + right: -100%; + } + + body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { + right: 0; + } +} diff --git a/tools/storybook/wordpress/css/customize-controls-rtl.min.css b/tools/storybook/wordpress/css/customize-controls-rtl.min.css new file mode 100644 index 00000000000..5c42ccc0601 --- /dev/null +++ b/tools/storybook/wordpress/css/customize-controls-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{overflow:hidden;-webkit-text-size-adjust:100%}.customize-controls-close,.widget-control-actions a{text-decoration:none}#customize-controls h3{font-size:14px}#customize-controls img{max-width:100%}#customize-controls .submit{text-align:center}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked{background-color:rgba(0,0,0,.7);padding:25px}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message{margin-right:auto;margin-left:auto;max-width:366px;min-height:64px;width:auto;padding:25px 109px 25px 25px;position:relative;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3);line-height:1.5;overflow-y:auto;text-align:right;top:calc(50% - 100px)}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing{margin-top:0}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons{margin-bottom:0}.customize-changeset-locked-avatar{width:64px;position:absolute;right:25px;top:25px}.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button{margin-left:10px;margin-top:0}#customize-controls .description{color:#50575e}#customize-save-button-wrapper{float:left;margin-top:9px}body:not(.ready) #customize-save-button-wrapper .save{visibility:hidden}#customize-save-button-wrapper .save{float:right;border-radius:3px;box-shadow:none;margin-top:0}#customize-save-button-wrapper .save:focus,#publish-settings:focus{box-shadow:0 1px 0 #2271b1,0 0 2px 1px #72aee6}#customize-save-button-wrapper .save.has-next-sibling{border-radius:0 3px 3px 0}#customize-sidebar-outer-content{position:absolute;top:0;bottom:0;right:0;visibility:hidden;overflow-x:hidden;overflow-y:auto;width:100%;margin:0;z-index:-1;background:#f0f0f1;transition:right .18s;border-left:1px solid #dcdcde;border-right:1px solid #dcdcde;height:100%}@media (prefers-reduced-motion:reduce){#customize-sidebar-outer-content{transition:none}}#customize-theme-controls .control-section-outer{display:none!important}#customize-outer-theme-controls .accordion-section-content{padding:12px}#customize-outer-theme-controls .accordion-section-content.open{display:block}.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content{visibility:visible;right:100%;transition:right .18s}@media (prefers-reduced-motion:reduce){.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content{transition:none}}.customize-outer-pane-parent{margin:0}.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main{right:300px;opacity:.4}.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main{right:64%}#customize-outer-theme-controls li.notice{padding-top:8px;padding-bottom:8px;margin-right:0;margin-bottom:10px}#publish-settings{text-indent:0;border-radius:3px 0 0 3px;padding-right:0;padding-left:0;box-shadow:none;font-size:14px;width:30px;float:right;transform:none;margin-top:0;line-height:2}body.trashing #customize-save-button-wrapper .save,body.trashing #publish-settings,body:not(.ready) #publish-settings{display:none}#customize-header-actions .spinner{margin-top:13px;margin-left:4px}.saving #customize-header-actions .spinner,.trashing #customize-header-actions .spinner{visibility:visible}#customize-header-actions{border-bottom:1px solid #dcdcde}#customize-controls .wp-full-overlay-sidebar-content{overflow-y:auto;overflow-x:hidden}.outer-section-open #customize-controls .wp-full-overlay-sidebar-content{background:#f0f0f1}#customize-controls .customize-info{border:none;border-bottom:1px solid #dcdcde;margin-bottom:15px}#customize-control-changeset_preview_link input,#customize-control-changeset_status .customize-inside-control-row{background-color:#fff;border-bottom:1px solid #dcdcde;box-sizing:content-box;width:100%;margin-right:-12px;padding-right:12px;padding-left:12px}#customize-control-trash_changeset{margin-top:20px}#customize-control-trash_changeset .button-link{position:relative;padding-right:24px;display:inline-block}#customize-control-trash_changeset .button-link:before{content:"\f182";font:normal 22px dashicons;text-decoration:none;position:absolute;right:0;top:-2px}#customize-controls .date-input:invalid{border-color:#d63638}#customize-control-changeset_status .customize-inside-control-row{padding-top:10px;padding-bottom:10px;font-weight:500}#customize-control-changeset_status .customize-inside-control-row:first-of-type{border-top:1px solid #dcdcde}#customize-control-changeset_status .customize-control-title{margin-bottom:6px}#customize-control-changeset_status input{margin-right:0}#customize-control-changeset_preview_link{position:relative;display:block}.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button{margin:0;position:absolute;bottom:9px;left:0}.preview-link-wrapper{position:relative}.customize-copy-preview-link:after,.customize-copy-preview-link:before{content:"";height:28px;position:absolute;background:#fff;top:-1px}.customize-copy-preview-link:before{right:-10px;width:9px;opacity:.75}.customize-copy-preview-link:after{right:-5px;width:4px;opacity:.8}#customize-control-changeset_preview_link input{line-height:2.85714286;border-top:1px solid #dcdcde;border-right:none;border-left:none;text-indent:-999px;color:#fff;min-height:40px}#customize-control-changeset_preview_link label{position:relative;display:block}#customize-control-changeset_preview_link a{display:inline-block;position:absolute;white-space:nowrap;overflow:hidden;width:90%;bottom:14px;font-size:14px;text-decoration:none}#customize-control-changeset_preview_link a.disabled,#customize-control-changeset_preview_link a.disabled:active,#customize-control-changeset_preview_link a.disabled:focus,#customize-control-changeset_preview_link a.disabled:visited{color:#000;opacity:.4;cursor:default;outline:0;box-shadow:none}#sub-accordion-section-publish_settings .customize-section-description-container{display:none}#customize-controls .customize-info.section-meta{margin-bottom:15px}.customize-control-date_time .customize-control-description+.date-time-fields.includes-time{margin-top:10px}.customize-control.customize-control-date_time .date-time-fields .date-input.day{margin-left:0}.date-time-fields .date-input.month{width:auto;margin:0}.date-time-fields .date-input.day,.date-time-fields .date-input.hour,.date-time-fields .date-input.minute{width:46px}.date-time-fields .date-input.year{width:65px}.date-time-fields .date-input.meridian{width:auto;margin:0}.date-time-fields .time-row{margin-top:12px}#customize-control-changeset_preview_link{margin-top:6px}#customize-control-changeset_status{margin-bottom:0;padding-bottom:0}#customize-control-changeset_scheduled_date{box-sizing:content-box;width:100%;margin-right:-12px;padding:12px;background:#fff;border-bottom:1px solid #dcdcde;margin-bottom:0}#customize-control-changeset_scheduled_date .customize-control-description{font-style:normal}#customize-controls .customize-info.is-in-view,#customize-controls .customize-section-title.is-in-view{position:absolute;z-index:9;width:100%;box-shadow:0 1px 0 rgba(0,0,0,.1)}#customize-controls .customize-section-title.is-in-view{margin-top:0}#customize-controls .customize-info.is-in-view+.accordion-section{margin-top:15px}#customize-controls .customize-info.is-sticky,#customize-controls .customize-section-title.is-sticky{position:fixed;top:46px}#customize-controls .customize-info .accordion-section-title{background:#fff;color:#50575e;border-right:none;border-left:none;border-bottom:none;cursor:default}#customize-controls .customize-info .accordion-section-title:focus:after,#customize-controls .customize-info .accordion-section-title:hover:after,#customize-controls .customize-info.open .accordion-section-title:after{color:#2c3338}#customize-controls .customize-info .accordion-section-title:after{display:none}#customize-controls .customize-info .preview-notice{font-size:13px;line-height:1.9}#customize-controls .customize-info .panel-title,#customize-controls .customize-pane-child .customize-section-title h3,#customize-controls .customize-pane-child h3.customize-section-title,#customize-outer-theme-controls .customize-pane-child .customize-section-title h3,#customize-outer-theme-controls .customize-pane-child h3.customize-section-title{font-size:20px;font-weight:200;line-height:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-section-title span.customize-action{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-info .customize-help-toggle{position:absolute;top:4px;left:1px;padding:20px 10px 10px 20px;width:20px;height:20px;cursor:pointer;box-shadow:none;-webkit-appearance:none;background:0 0;color:#50575e;border:none}#customize-controls .customize-info .customize-help-toggle:before{position:absolute;top:5px;right:6px}#customize-controls .customize-info .customize-help-toggle:focus,#customize-controls .customize-info .customize-help-toggle:hover,#customize-controls .customize-info.open .customize-help-toggle{color:#2271b1}#customize-controls .customize-info .customize-panel-description,#customize-controls .customize-info .customize-section-description,#customize-controls .no-widget-areas-rendered-notice,#customize-outer-theme-controls .customize-info .customize-section-description{color:#50575e;display:none;background:#fff;padding:12px 15px;border-top:1px solid #dcdcde}#customize-controls .customize-info .customize-panel-description.open+.no-widget-areas-rendered-notice{border-top:none}.no-widget-areas-rendered-notice{font-style:italic}.no-widget-areas-rendered-notice p:first-child{margin-top:0}.no-widget-areas-rendered-notice p:last-child{margin-bottom:0}#customize-controls .customize-info .customize-section-description{margin-bottom:15px}#customize-controls .customize-info .customize-panel-description p:first-child,#customize-controls .customize-info .customize-section-description p:first-child{margin-top:0}#customize-controls .customize-info .customize-panel-description p:last-child,#customize-controls .customize-info .customize-section-description p:last-child{margin-bottom:0}#customize-controls .current-panel .control-section>h3.accordion-section-title{padding-left:30px}#customize-outer-theme-controls .control-section,#customize-theme-controls .control-section{border:none}#customize-outer-theme-controls .accordion-section-title,#customize-theme-controls .accordion-section-title{color:#50575e;background-color:#fff;border-bottom:1px solid #dcdcde;border-right:4px solid #fff;transition:.15s color ease-in-out,.15s background-color ease-in-out,.15s border-color ease-in-out}@media (prefers-reduced-motion:reduce){#customize-outer-theme-controls .accordion-section-title,#customize-theme-controls .accordion-section-title{transition:none}}#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title{color:#50575e;background-color:#fff;border-right:4px solid #fff}#customize-outer-theme-controls .accordion-section-title:after,#customize-theme-controls .accordion-section-title:after{content:"\f341";color:#a7aaad}#customize-outer-theme-controls .accordion-section-content,#customize-theme-controls .accordion-section-content{color:#50575e;background:0 0}#customize-controls .control-section .accordion-section-title:focus,#customize-controls .control-section .accordion-section-title:hover,#customize-controls .control-section.open .accordion-section-title,#customize-controls .control-section:hover>.accordion-section-title{color:#2271b1;background:#f6f7f7;border-right-color:#2271b1}#accordion-section-themes+.control-section{border-top:1px solid #dcdcde}.js .control-section .accordion-section-title:focus,.js .control-section .accordion-section-title:hover,.js .control-section.open .accordion-section-title,.js .control-section:hover .accordion-section-title{background:#f6f7f7}#customize-outer-theme-controls .control-section .accordion-section-title:focus:after,#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,#customize-outer-theme-controls .control-section.open .accordion-section-title:after,#customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,#customize-theme-controls .control-section .accordion-section-title:focus:after,#customize-theme-controls .control-section .accordion-section-title:hover:after,#customize-theme-controls .control-section.open .accordion-section-title:after,#customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#2271b1}#customize-theme-controls .control-section.open{border-bottom:1px solid #f0f0f1}#customize-outer-theme-controls .control-section.open .accordion-section-title,#customize-theme-controls .control-section.open .accordion-section-title{border-bottom-color:#f0f0f1!important}#customize-theme-controls .control-section:last-of-type.open,#customize-theme-controls .control-section:last-of-type>.accordion-section-title{border-bottom-color:#dcdcde}#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title{border-top:1px solid #dcdcde}#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu+.control-section-nav_menu{border-top:none}#customize-theme-controls>ul{margin:0}#customize-theme-controls .accordion-section-content{position:absolute;top:0;right:100%;width:100%;margin:0;padding:12px;box-sizing:border-box}#customize-info,#customize-theme-controls .customize-pane-child,#customize-theme-controls .customize-pane-parent{overflow:visible;width:100%;margin:0;padding:0;box-sizing:border-box;transition:.18s transform cubic-bezier(.645, .045, .355, 1)}@media (prefers-reduced-motion:reduce){#customize-info,#customize-theme-controls .customize-pane-child,#customize-theme-controls .customize-pane-parent{transition:none}}#customize-theme-controls .customize-pane-child.skip-transition{transition:none}#customize-info,#customize-theme-controls .customize-pane-parent{position:relative;visibility:visible;height:auto;max-height:none;overflow:auto;transform:none}#customize-theme-controls .customize-pane-child{position:absolute;top:0;right:0;visibility:hidden;height:0;max-height:none;overflow:hidden;transform:translateX(-100%)}#customize-theme-controls .customize-pane-child.current-panel,#customize-theme-controls .customize-pane-child.open{transform:none}.in-sub-panel #customize-info,.in-sub-panel #customize-theme-controls .customize-pane-parent,.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,.section-open #customize-info,.section-open #customize-theme-controls .customize-pane-parent{visibility:hidden;height:0;overflow:hidden;transform:translateX(100%)}#customize-theme-controls .customize-pane-child.busy,#customize-theme-controls .customize-pane-child.current-panel,#customize-theme-controls .customize-pane-child.open,.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,.in-sub-panel #customize-info.busy,.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,.section-open #customize-info.busy,.section-open #customize-theme-controls .customize-pane-parent.busy{visibility:visible;height:auto;overflow:auto}#customize-theme-controls .customize-pane-child.accordion-section-content,#customize-theme-controls .customize-pane-child.accordion-sub-container{display:block;overflow-x:hidden}#customize-theme-controls .customize-pane-child.accordion-section-content{padding:12px}#customize-theme-controls .customize-pane-child.menu li{position:static}.control-section-nav_menu .customize-section-description-container,.control-section-new_menu .customize-section-description-container,.customize-section-description-container{margin-bottom:15px}.control-section-nav_menu .customize-control,.control-section-new_menu .customize-control{margin-bottom:0}.customize-section-title{margin:-12px -12px 0;border-bottom:1px solid #dcdcde;background:#fff}div.customize-section-description{margin-top:22px}.customize-info div.customize-section-description{margin-top:0}div.customize-section-description p:first-child{margin-top:0}div.customize-section-description p:last-child{margin-bottom:0}#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child{border-bottom:1px solid #dcdcde;padding:12px}.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child{padding:12px 12px 13px}.customize-section-title h3,h3.customize-section-title{padding:10px 14px 12px 10px;margin:0;line-height:21px;color:#50575e}.accordion-sub-container.control-panel-content{display:none;position:absolute;top:0;width:100%}.accordion-sub-container.control-panel-content.busy{display:block}.current-panel .accordion-sub-container.control-panel-content{width:100%}.customize-controls-close{display:block;position:absolute;top:0;right:0;width:45px;height:41px;padding:0 0 0 2px;background:#f0f0f1;border:none;border-top:4px solid #f0f0f1;border-left:1px solid #dcdcde;color:#3c434a;text-align:right;cursor:pointer;transition:color .15s ease-in-out,border-color .15s ease-in-out,background .15s ease-in-out;box-sizing:content-box}.customize-panel-back,.customize-section-back{display:block;float:right;width:48px;height:71px;padding:0 0 0 24px;margin:0;background:#fff;border:none;border-left:1px solid #dcdcde;border-right:4px solid #fff;box-shadow:none;cursor:pointer;transition:color .15s ease-in-out,border-color .15s ease-in-out,background .15s ease-in-out}.customize-section-back{height:74px}.ios .customize-panel-back{display:none}.ios .expanded.in-sub-panel .customize-panel-back{display:block}#customize-controls .panel-meta.customize-info .accordion-section-title{margin-right:48px;border-right:none}#customize-controls .cannot-expand:hover .accordion-section-title,#customize-controls .panel-meta.customize-info .accordion-section-title:hover{background:#fff;color:#50575e;border-right-color:#fff}.customize-controls-close:focus,.customize-controls-close:hover,.customize-controls-preview-toggle:focus,.customize-controls-preview-toggle:hover{background:#fff;color:#2271b1;border-top-color:#2271b1;box-shadow:none;outline:1px solid transparent}#customize-theme-controls .accordion-section-title:focus .customize-action{outline:1px solid transparent;outline-offset:1px}.customize-panel-back:focus,.customize-panel-back:hover,.customize-section-back:focus,.customize-section-back:hover{color:#2271b1;background:#f6f7f7;border-right-color:#2271b1;box-shadow:none;outline:2px solid transparent;outline-offset:-2px}.customize-controls-close:before{font:normal 22px/45px dashicons;content:"\f335";position:relative;top:-3px;right:13px}.customize-panel-back:before,.customize-section-back:before{font:normal 20px/72px dashicons;content:"\f345";position:relative;right:9px}.wp-full-overlay-sidebar .wp-full-overlay-header{background-color:#f0f0f1;transition:padding ease-in-out .18s}.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header{padding-right:62px}p.customize-section-description{font-style:normal;margin-top:22px;margin-bottom:0}.customize-section-description ul{margin-right:1em}.customize-section-description ul>li{list-style:disc}.section-description-buttons{text-align:left}.customize-control{width:100%;float:right;clear:both;margin-bottom:12px}.customize-control input[type=email],.customize-control input[type=number],.customize-control input[type=password],.customize-control input[type=range],.customize-control input[type=search],.customize-control input[type=tel],.customize-control input[type=text],.customize-control input[type=url]{width:100%;margin:0}.customize-control-hidden{margin:0}.customize-control-textarea textarea{width:100%;resize:vertical}.customize-control select{width:100%}.customize-control select[multiple]{height:auto}.customize-control-title{display:block;font-size:14px;line-height:1.75;font-weight:600;margin-bottom:4px}.customize-control-description{display:block;font-style:italic;line-height:1.4;margin-top:0;margin-bottom:5px}.customize-section-description a.external-link:after{font:16px/11px dashicons;content:"\f504";top:3px;position:relative;padding-right:3px;display:inline-block;text-decoration:none}.customize-control-color .color-picker,.customize-control-upload div{line-height:28px}.customize-control .customize-inside-control-row{line-height:1.6;display:block;margin-right:24px;padding-top:6px;padding-bottom:6px}.customize-control-checkbox input,.customize-control-nav_menu_auto_add input,.customize-control-radio input{margin-left:4px;margin-right:-24px}.customize-control-radio{padding:5px 0 10px}.customize-control-radio .customize-control-title{margin-bottom:0;line-height:1.6}.customize-control-radio .customize-control-title+.customize-control-description{margin-top:7px}.customize-control-checkbox label,.customize-control-radio label{vertical-align:top}.customize-control .attachment-thumb.type-icon{float:right;margin:10px;width:auto}.customize-control .attachment-title{font-weight:600;margin:0;padding:5px 10px}.customize-control .attachment-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 10px}.customize-control .attachment-meta-title{padding-top:7px}.customize-control .thumbnail-image,.customize-control .wp-media-wrapper.wp-video,.customize-control-header .current{line-height:0}.customize-control-site_icon .favicon-preview .browser-preview{vertical-align:top}.customize-control .thumbnail-image img{cursor:pointer}#customize-controls .thumbnail-audio .thumbnail{max-width:64px;max-height:64px;margin:10px;float:right}#available-menu-items .accordion-section-content .new-content-item,.customize-control-dropdown-pages .new-content-item{width:calc(100% - 30px);padding:8px 15px;position:absolute;bottom:0;z-index:10;background:#f0f0f1;display:flex}.customize-control-dropdown-pages .new-content-item{width:100%;padding:5px 1px 5px 0;position:relative}#available-menu-items .new-content-item .create-item-input,.customize-control-dropdown-pages .new-content-item .create-item-input{flex-grow:10}#available-menu-items .new-content-item .add-content,.customize-control-dropdown-pages .new-content-item .add-content{margin:2px 6px 2px 0;flex-grow:1}.customize-control-dropdown-pages .new-content-item .create-item-input.invalid{border:1px solid #d63638}.customize-control-dropdown-pages .add-new-toggle{margin-right:1px;font-weight:600;line-height:2.2}#customize-preview iframe{width:100%;height:100%;position:absolute}#customize-preview iframe+iframe{visibility:hidden}.wp-full-overlay-sidebar{background:#f0f0f1;border-left:1px solid #dcdcde}#customize-controls .customize-control-notifications-container{margin:4px 0 8px;padding:0;cursor:default}#customize-controls .customize-control-widget_form.has-error .widget .widget-top,.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle{box-shadow:inset 0 0 0 2px #d63638;transition:.15s box-shadow linear}#customize-controls .customize-control-notifications-container li.notice{list-style:none;margin:0 0 6px;padding:9px 14px;overflow:hidden}#customize-controls .customize-control-notifications-container .notice.is-dismissible{padding-left:38px}.customize-control-notifications-container li.notice:last-child{margin-bottom:0}#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container{margin-top:0}#customize-controls .customize-control-widget_form .customize-control-notifications-container{margin-top:8px}.customize-control-text.has-error input{outline:2px solid #d63638}#customize-controls #customize-notifications-area{position:absolute;top:46px;width:100%;border-bottom:1px solid #dcdcde;display:block;padding:0;margin:0}.wp-full-overlay.collapsed #customize-controls #customize-notifications-area{display:none!important}#customize-controls #customize-notifications-area:not(.has-overlay-notifications),#customize-controls .customize-section-title>.customize-control-notifications-container:not(.has-overlay-notifications),#customize-controls .panel-meta>.customize-control-notifications-container:not(.has-overlay-notifications){max-height:210px;overflow-x:hidden;overflow-y:auto}#customize-controls #customize-notifications-area .notice,#customize-controls #customize-notifications-area>ul,#customize-controls .customize-section-title>.customize-control-notifications-container,#customize-controls .customize-section-title>.customize-control-notifications-container .notice,#customize-controls .panel-meta>.customize-control-notifications-container,#customize-controls .panel-meta>.customize-control-notifications-container .notice{margin:0}#customize-controls .customize-section-title>.customize-control-notifications-container,#customize-controls .panel-meta>.customize-control-notifications-container{border-top:1px solid #dcdcde}#customize-controls #customize-notifications-area .notice,#customize-controls .customize-section-title>.customize-control-notifications-container .notice,#customize-controls .panel-meta>.customize-control-notifications-container .notice{padding:9px 14px}#customize-controls #customize-notifications-area .notice.is-dismissible,#customize-controls .customize-section-title>.customize-control-notifications-container .notice.is-dismissible,#customize-controls .panel-meta>.customize-control-notifications-container .notice.is-dismissible{padding-left:38px}#customize-controls #customize-notifications-area .notice+.notice,#customize-controls .customize-section-title>.customize-control-notifications-container .notice+.notice,#customize-controls .panel-meta>.customize-control-notifications-container .notice+.notice{margin-top:1px}@keyframes customize-fade-in{0%{opacity:0}100%{opacity:1}}#customize-controls #customize-notifications-area .notice.notification-overlay,#customize-controls .notice.notification-overlay{margin:0;border-right:0}#customize-controls .customize-control-notifications-container.has-overlay-notifications{animation:customize-fade-in .5s;z-index:30}#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message{clear:both;color:#1d2327;font-size:18px;font-style:normal;margin:0;padding:2em 0;text-align:center;width:100%;display:block;top:50%;position:relative}#customize-control-show_on_front.has-error{margin-bottom:0}#customize-control-show_on_front.has-error .customize-control-notifications-container{margin-top:12px}.accordion-section .dropdown{float:right;display:block;position:relative;cursor:pointer}.accordion-section .dropdown-content{overflow:hidden;float:right;min-width:30px;height:16px;line-height:16px;margin-left:16px;padding:4px 5px;border:2px solid #f0f0f1;-webkit-user-select:none;user-select:none}.customize-control .dropdown-arrow{position:absolute;top:0;bottom:0;left:0;width:20px;background:#f0f0f1}.customize-control .dropdown-arrow:after{content:"\f140";font:normal 20px/1 dashicons;speak:never;display:block;padding:0;text-indent:0;text-align:center;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#2c3338}.customize-control .dropdown-status{color:#2c3338;background:#f0f0f1;display:none;max-width:112px}.customize-control-color .dropdown{margin-left:5px;margin-bottom:5px}.customize-control-color .dropdown .dropdown-content{background-color:#50575e;border:1px solid rgba(0,0,0,.15)}.customize-control-color .dropdown:hover .dropdown-content{border-color:rgba(0,0,0,.25)}.ios .wp-full-overlay{position:relative}.ios #customize-controls .wp-full-overlay-sidebar-content{-webkit-overflow-scrolling:touch}.customize-control .actions .button{margin-top:12px}.customize-control-header .actions,.customize-control-header .uploaded{margin-bottom:18px}.customize-control-header .default button:not(.random),.customize-control-header .uploaded button:not(.random){width:100%;padding:0;margin:0;background:0 0;border:none;color:inherit;cursor:pointer}.customize-control-header button img{display:block}.customize-control .attachment-media-view .default-button,.customize-control .attachment-media-view .remove-button,.customize-control .attachment-media-view .upload-button,.customize-control-header button.new,.customize-control-header button.remove{width:auto;height:auto;white-space:normal}.customize-control .attachment-media-view .thumbnail,.customize-control-header .current .container{overflow:hidden}.customize-control .attachment-media-view .button-add-media,.customize-control .attachment-media-view .placeholder,.customize-control-header .placeholder{width:100%;position:relative;text-align:center;cursor:default;border:1px dashed #c3c4c7;box-sizing:border-box;padding:9px 0;line-height:1.6}.customize-control .attachment-media-view .button-add-media{cursor:pointer;background-color:#f0f0f1;color:#2c3338}.customize-control .attachment-media-view .button-add-media:hover{background-color:#fff}.customize-control .attachment-media-view .button-add-media:focus{background-color:#fff;border-color:#3582c4;border-style:solid;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.customize-control-header .inner{display:none;position:absolute;width:100%;color:#50575e;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.customize-control-header .inner,.customize-control-header .inner .dashicons{line-height:20px;top:8px}.customize-control-header .list .inner,.customize-control-header .list .inner .dashicons{top:9px}.customize-control-header .header-view{position:relative;width:100%;margin-bottom:12px}.customize-control-header .header-view:last-child{margin-bottom:0}.customize-control-header .header-view:after{border:0}.customize-control-header .header-view.selected .choice:focus{outline:0}.customize-control-header .header-view.selected:after{content:"";position:absolute;height:auto;top:0;right:0;bottom:0;left:0;border:4px solid #72aee6;border-radius:2px}.customize-control-header .header-view.button.selected{border:0}.customize-control-header .uploaded .header-view .close{font-size:20px;color:#fff;background:#50575e;background:rgba(0,0,0,.5);position:absolute;top:10px;right:-999px;z-index:1;width:26px;height:26px;cursor:pointer}.customize-control-header .header-view .close:focus,.customize-control-header .header-view:hover .close{right:auto;left:10px}.customize-control-header .header-view .close:focus{outline:1px solid #4f94d4}.customize-control-header .random.placeholder{cursor:pointer;border-radius:2px;height:40px}.customize-control-header button.random{width:100%;height:auto;min-height:40px;white-space:normal}.customize-control-header button.random .dice{margin-top:4px}.customize-control-header .header-view:hover>button.random .dice,.customize-control-header .placeholder:hover .dice{animation:dice-color-change 3s infinite}.button-see-me{animation:bounce .7s 1;transform-origin:center bottom}@keyframes bounce{20%,53%,80%,from,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform:translate3d(0,-12px,0)}70%{animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform:translate3d(0,-6px,0)}90%{transform:translate3d(0,-1px,0)}}.customize-control-header .choice{position:relative;display:block;margin-bottom:9px}.customize-control-header .choice:focus{outline:0;box-shadow:0 0 0 1px #4f94d4,0 0 3px 1px rgba(79,148,212,.8)}.customize-control-header .uploaded div:last-child>.choice{margin-bottom:0}.customize-control .attachment-media-view .thumbnail-image img,.customize-control-header img{max-width:100%}.customize-control .attachment-media-view .default-button,.customize-control .attachment-media-view .remove-button,.customize-control-header .remove{margin-left:8px}.customize-control-background_position .background-position-control .button-group{display:block}.customize-control-code_editor textarea{width:100%;font-family:Consolas,Monaco,monospace;font-size:12px;padding:6px 8px;-o-tab-size:2;tab-size:2}.customize-control-code_editor .CodeMirror,.customize-control-code_editor textarea{height:14em}#customize-controls .customize-section-description-container.section-meta.customize-info{border-bottom:none}#sub-accordion-section-custom_css .customize-control-notifications-container{margin-bottom:15px}#customize-control-custom_css textarea{display:block;height:500px}.customize-section-description-container+#customize-control-custom_css .customize-control-title{margin-right:12px}.customize-section-description-container+#customize-control-custom_css:last-child textarea{border-left:0;border-right:0;height:calc(100vh - 185px);resize:none}.customize-section-description-container+#customize-control-custom_css:last-child{margin-right:-12px;width:299px;width:calc(100% + 24px);margin-bottom:-12px}.customize-section-description-container+#customize-control-custom_css:last-child .CodeMirror{height:calc(100vh - 185px)}.CodeMirror-hints,.CodeMirror-lint-tooltip{z-index:500000!important}.customize-section-description-container+#customize-control-custom_css:last-child .customize-control-notifications-container{margin-right:12px;margin-left:12px}.theme-browser .theme.active .theme-actions,.wp-customizer .theme-browser .theme .theme-actions{padding:9px 15px;box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}@media screen and (max-width:640px){.customize-section-description-container+#customize-control-custom_css:last-child{margin-left:0}.customize-section-description-container+#customize-control-custom_css:last-child textarea{height:calc(100vh - 140px)}}#customize-theme-controls .control-panel-themes{border-bottom:none}#customize-theme-controls .control-panel-themes>.accordion-section-title,#customize-theme-controls .control-panel-themes>.accordion-section-title:hover{cursor:default;background:#fff;color:#50575e;border-top:1px solid #dcdcde;border-bottom:1px solid #dcdcde;border-right:none;border-left:none;margin:0 0 15px;padding-left:100px}#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child,#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover{border-top:0}#customize-theme-controls .control-section-themes>.accordion-section-title,#customize-theme-controls .control-section-themes>.accordion-section-title:hover{margin:0 0 15px}#customize-controls .customize-themes-panel .accordion-section-title,#customize-controls .customize-themes-panel .accordion-section-title:hover{margin:15px -8px}#customize-controls .control-section-themes .accordion-section-title,#customize-controls .customize-themes-panel .accordion-section-title{padding-left:100px}#customize-controls .control-section-themes .accordion-section-title span.customize-action,#customize-controls .customize-section-title span.customize-action,.control-panel-themes .accordion-section-title span.customize-action{font-size:13px;display:block;font-weight:400}#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme{position:absolute;left:10px;top:50%;margin-top:-14px;font-weight:400}#customize-notifications-area .notification-message button.switch-to-editor{display:block;margin-top:6px;font-weight:400}#customize-theme-controls .control-panel-themes>.accordion-section-title:after{display:none}.control-panel-themes .customize-themes-full-container{position:fixed;top:0;right:0;transition:.18s right ease-in-out;margin:0 300px 0 0;padding:71px 0 25px;overflow-y:scroll;width:calc(100% - 300px);height:calc(100% - 96px);background:#f0f0f1;z-index:20}@media (prefers-reduced-motion:reduce){.control-panel-themes .customize-themes-full-container{transition:none}}@media screen and (min-width:1670px){.control-panel-themes .customize-themes-full-container{width:82%;left:0;right:initial}}.modal-open .control-panel-themes .customize-themes-full-container{overflow-y:visible}#customize-header-actions .customize-controls-preview-toggle,#customize-header-actions .spinner,#customize-save-button-wrapper{transition:.18s margin ease-in-out}#customize-footer-actions,#customize-footer-actions .collapse-sidebar{bottom:0;transition:.18s bottom ease-in-out}.in-themes-panel:not(.animating) #customize-footer-actions,.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,.in-themes-panel:not(.animating) #customize-header-actions .spinner,.in-themes-panel:not(.animating) #customize-preview{visibility:hidden}.wp-full-overlay.in-themes-panel{background:#f0f0f1}.in-themes-panel #customize-header-actions .customize-controls-preview-toggle,.in-themes-panel #customize-header-actions .spinner,.in-themes-panel #customize-save-button-wrapper{margin-top:-46px}.in-themes-panel #customize-footer-actions,.in-themes-panel #customize-footer-actions .collapse-sidebar{bottom:-45px}.in-themes-panel.animating .control-panel-themes .filter-themes-count{display:none}.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content{bottom:0}.themes-filter-bar .feature-filter-toggle{float:left;margin:3px 25px 3px 0}.themes-filter-bar .feature-filter-toggle:before{content:"\f111";margin:0 0 0 5px;font:normal 16px/1 dashicons;vertical-align:text-bottom;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.themes-filter-bar .feature-filter-toggle.open{background:#f0f0f1;border-color:#8c8f94;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5)}.themes-filter-bar .feature-filter-toggle .filter-count-filters{display:none}.filter-drawer{box-sizing:border-box;width:100%;position:absolute;top:46px;right:0;padding:25px 25px 25px 0;border-top:0;margin:0;background:#f0f0f1;border-bottom:1px solid #dcdcde}.filter-drawer .filter-group{margin:0 0 0 25px;width:calc((100% - 75px)/ 3);min-width:200px;max-width:320px}@keyframes themes-fade-in{0%{opacity:0}50%{opacity:0}100%{opacity:1}}.control-panel-themes .customize-themes-full-container.animate{animation:.6s themes-fade-in 1}.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count{animation:.6s themes-fade-in 1}.control-panel-themes .filter-themes-count{position:relative;float:left;line-height:2.6}.control-panel-themes .filter-themes-count .themes-displayed{font-weight:600;color:#50575e}.customize-themes-notifications{margin:0}.control-panel-themes .customize-themes-notifications .notice{margin:0 0 25px}.customize-themes-full-container .customize-themes-section{display:none!important;overflow:hidden}.customize-themes-full-container .customize-themes-section.current-section{display:list-item!important}.control-section .customize-section-text-before{padding:0 15px 8px 0;margin:15px 0 0;line-height:16px;border-bottom:1px solid #dcdcde;color:#50575e}.control-panel-themes .customize-themes-section-title{width:100%;background:#fff;box-shadow:none;outline:0;border-top:none;border-bottom:1px solid #dcdcde;border-right:4px solid #fff;border-left:none;cursor:pointer;padding:10px 15px;position:relative;text-align:right;font-size:14px;font-weight:600;color:#50575e;text-shadow:none}.control-panel-themes #accordion-section-installed_themes{border-top:1px solid #dcdcde}.control-panel-themes .theme-section{margin:0;position:relative}.control-panel-themes .customize-themes-section-title:focus,.control-panel-themes .customize-themes-section-title:hover{border-right-color:#2271b1;color:#2271b1;background:#f6f7f7}.customize-themes-section-title:not(.selected):after{content:"";display:block;position:absolute;top:9px;left:15px;width:18px;height:18px;border-radius:100%;border:1px solid #c3c4c7;background:#fff}.control-panel-themes .theme-section .customize-themes-section-title.selected:after{content:"\f147";font:16px/1 dashicons;box-sizing:border-box;width:20px;height:20px;padding:3px 1px 1px 3px;border-radius:100%;position:absolute;top:9px;left:15px;background:#2271b1;color:#fff}.control-panel-themes .customize-themes-section-title.selected{color:#2271b1}#customize-theme-controls .themes.accordion-section-content{position:relative;right:0;padding:0;width:100%}.loading .customize-themes-section .spinner{display:block;visibility:visible;position:relative;clear:both;width:20px;height:20px;right:calc(50% - 10px);float:none;margin-top:50px}.customize-themes-section .no-themes,.customize-themes-section .no-themes-local{display:none}.themes-section-installed_themes .theme .notice-success:not(.updated-message){display:none}.customize-control-theme .theme{width:100%;margin:0;border:1px solid #dcdcde;background:#fff}.customize-control-theme .theme .theme-actions,.customize-control-theme .theme .theme-name{background:#fff;border:none}.customize-control.customize-control-theme{box-sizing:border-box;width:25%;max-width:600px;margin:0 0 25px 25px;padding:0;clear:none}@media screen and (min-width:2101px){.customize-control.customize-control-theme{width:calc((100% - 125px)/ 5 - 1px)}}@media screen and (min-width:1601px) and (max-width:2100px){.customize-control.customize-control-theme{width:calc((100% - 100px)/ 4 - 1px)}}@media screen and (min-width:1201px) and (max-width:1600px){.customize-control.customize-control-theme{width:calc((100% - 75px)/ 3 - 1px)}}@media screen and (min-width:851px) and (max-width:1200px){.customize-control.customize-control-theme{width:calc((100% - 50px)/ 2 - 1px)}}@media screen and (max-width:850px){.customize-control.customize-control-theme{width:100%}}.wp-customizer .theme-browser .themes{padding:0 25px 25px 0;transition:.18s margin-top linear}.wp-customizer .theme-browser .theme .theme-actions{opacity:1}#customize-controls h3.theme-name{font-size:15px}#customize-controls .theme-overlay .theme-name{font-size:32px}.customize-preview-header.themes-filter-bar{position:fixed;top:0;right:300px;width:calc(100% - 300px);height:46px;background:#f0f0f1;z-index:10;padding:6px 25px;box-sizing:border-box;border-bottom:1px solid #dcdcde}@media screen and (min-width:1670px){.customize-preview-header.themes-filter-bar{width:82%;left:0;right:initial}}.themes-filter-bar .themes-filter-container{margin:0;padding:0}.themes-filter-bar .wp-filter-search{line-height:1.8;padding:6px 30px 6px 10px;max-width:100%;width:40%;min-width:300px;position:absolute;top:6px;right:25px;height:32px;margin:1px 0}@media screen and (max-height:540px),screen and (max-width:1018px){.customize-preview-header.themes-filter-bar{position:relative;right:0;width:100%;margin:0 0 25px}.filter-drawer{top:46px}.wp-customizer .theme-browser .themes{padding:0 25px 25px 0;overflow:hidden}.control-panel-themes .customize-themes-full-container{margin-top:0;padding:0;height:100%;width:calc(100% - 300px)}}@media screen and (max-width:1018px){.filter-drawer .filter-group{width:calc((100% - 50px)/ 2)}}@media screen and (max-width:900px){.customize-preview-header.themes-filter-bar{height:86px;padding-top:46px}.themes-filter-bar .wp-filter-search{width:calc(100% - 50px);margin:0;min-width:200px}.filter-drawer{top:86px}.control-panel-themes .filter-themes-count{float:right}}@media screen and (max-width:792px){.filter-drawer .filter-group{width:calc(100% - 25px)}}.control-panel-themes .customize-themes-mobile-back{display:none}@media screen and (max-width:600px){.filter-drawer{top:132px}.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes{display:block;float:left}.control-panel-themes .customize-themes-full-container{width:100%;margin:0;padding-top:46px;height:calc(100% - 46px);z-index:1;display:none}.showing-themes .control-panel-themes .customize-themes-full-container{display:block}.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back{display:block;position:fixed;top:0;right:0;background:#f0f0f1;color:#3c434a;border-radius:0;box-shadow:none;border:none;height:46px;width:100%;z-index:10;text-align:right;text-shadow:none;border-bottom:1px solid #dcdcde;border-right:4px solid transparent;margin:0;padding:0;font-size:0;overflow:hidden}.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before{right:0;top:0;height:46px;width:26px;display:block;line-height:2.3;padding:0 8px;border-left:1px solid #dcdcde}.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus,.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover{color:#2271b1;background:#f6f7f7;border-right-color:#2271b1;box-shadow:none;outline:2px solid transparent;outline-offset:-2px}.showing-themes #customize-header-actions{display:none}#customize-controls{width:100%}}.wp-customizer .theme-overlay{display:none}.wp-customizer.modal-open .theme-overlay{position:fixed;right:0;top:0;left:0;bottom:0;z-index:109}.wp-customizer.modal-open #customize-header-actions,.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after,.wp-customizer.modal-open .control-panel-themes .filter-themes-count{z-index:-1}.wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content{overflow:visible}.wp-customizer .theme-overlay .theme-backdrop{background:rgba(240,240,241,.75);position:fixed;z-index:110}.wp-customizer .theme-overlay .star-rating{float:right;margin-left:8px}.wp-customizer .theme-rating .num-ratings{line-height:20px}.wp-customizer .theme-overlay .theme-wrap{right:90px;left:90px;top:45px;bottom:45px;z-index:120}.wp-customizer .theme-overlay .theme-actions{text-align:left;padding:10px 25px;background:#f0f0f1;border-top:1px solid #dcdcde}.wp-customizer .theme-overlay .theme-actions .theme-install.preview{margin-right:8px}.control-panel-themes .theme-actions .delete-theme{right:15px;left:auto;bottom:auto;position:absolute}.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content{overflow:visible}.wp-customizer .theme-header{background:#f0f0f1}.wp-customizer .theme-overlay .theme-header .close:before,.wp-customizer .theme-overlay .theme-header button{color:#3c434a}.wp-customizer .theme-overlay .theme-header .close:focus,.wp-customizer .theme-overlay .theme-header .close:hover,.wp-customizer .theme-overlay .theme-header .left:focus,.wp-customizer .theme-overlay .theme-header .left:hover,.wp-customizer .theme-overlay .theme-header .right:focus,.wp-customizer .theme-overlay .theme-header .right:hover{background:#fff;border-bottom:4px solid #2271b1;color:#2271b1}.wp-customizer .theme-overlay .theme-header .close:focus:before,.wp-customizer .theme-overlay .theme-header .close:hover:before{color:#2271b1}.wp-customizer .theme-overlay .theme-header button.disabled,.wp-customizer .theme-overlay .theme-header button.disabled:focus,.wp-customizer .theme-overlay .theme-header button.disabled:hover{border-bottom:none;background:0 0;color:#c3c4c7}@media (max-width:850px),(max-height:472px){.wp-customizer .theme-overlay .theme-wrap{right:0;left:0;top:0;bottom:0}.wp-customizer .theme-browser .themes{padding-left:25px}}body.cheatin{font-size:medium;height:auto;background:#fff;border:1px solid #c3c4c7;margin:50px auto 2em;padding:1em 2em;max-width:700px;min-width:0;box-shadow:0 1px 1px rgba(0,0,0,.04)}body.cheatin h1{border-bottom:1px solid #dcdcde;clear:both;color:#50575e;font-size:24px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:30px 0 0;padding:0 0 7px}body.cheatin p{font-size:14px;line-height:1.5;margin:25px 0 20px}#customize-theme-controls .add-new-menu-item,#customize-theme-controls .add-new-widget{cursor:pointer;float:left;margin:0 10px 0 0;transition:all .2s;-webkit-user-select:none;user-select:none;outline:0}.reordering .add-new-menu-item,.reordering .add-new-widget{opacity:.2;pointer-events:none;cursor:not-allowed}#available-menu-items .new-content-item .add-content:before,.add-new-menu-item:before,.add-new-widget:before{content:"\f132";display:inline-block;position:relative;right:-2px;top:0;font:normal 20px/1 dashicons;vertical-align:middle;transition:all .2s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reorder-toggle{float:left;padding:5px 8px;text-decoration:none;cursor:pointer;outline:0}.reorder,.reordering .reorder-done{display:block;padding:5px 8px}.reorder-done,.reordering .reorder{display:none}.menu-item-reorder-nav button,.widget-reorder-nav span{position:relative;overflow:hidden;float:right;display:block;width:33px;height:43px;color:#8c8f94;text-indent:-9999px;cursor:pointer;outline:0}.menu-item-reorder-nav button{width:30px;height:40px;background:0 0;border:none;box-shadow:none}.menu-item-reorder-nav button:before,.widget-reorder-nav span:before{display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;font:normal 20px/43px dashicons;text-align:center;text-indent:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.menu-item-reorder-nav button:focus,.menu-item-reorder-nav button:hover,.widget-reorder-nav span:focus,.widget-reorder-nav span:hover{color:#1d2327;background:#f0f0f1}.menus-move-down:before,.move-widget-down:before{content:"\f347"}.menus-move-up:before,.move-widget-up:before{content:"\f343"}#customize-theme-controls .first-widget .move-widget-up,#customize-theme-controls .last-widget .move-widget-down,.move-down-disabled .menus-move-down,.move-left-disabled .menus-move-left,.move-right-disabled .menus-move-right,.move-up-disabled .menus-move-up{color:#dcdcde;background-color:#fff;cursor:default;pointer-events:none}.wp-full-overlay-main{left:auto;width:100%}.add-menu-toggle.open,.add-menu-toggle.open:hover,.adding-menu-items .add-new-menu-item,.adding-menu-items .add-new-menu-item:hover,body.adding-widget .add-new-widget,body.adding-widget .add-new-widget:hover{background:#f0f0f1;border-color:#8c8f94;color:#2c3338;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5)}#accordion-section-add_menu .add-new-menu-item.open:before,.adding-menu-items .add-new-menu-item:before,body.adding-widget .add-new-widget:before{transform:rotate(-45deg)}#available-menu-items,#available-widgets{position:absolute;top:0;bottom:0;right:-301px;visibility:hidden;overflow-x:hidden;overflow-y:auto;width:300px;margin:0;z-index:4;background:#f0f0f1;transition:right .18s;border-left:1px solid #dcdcde}#available-menu-items .customize-section-title,#available-widgets .customize-section-title{display:none}#available-widgets-list{top:60px;position:absolute;overflow:auto;bottom:0;width:100%;border-top:1px solid #dcdcde}.no-widgets-found #available-widgets-list{border-top:none}#available-widgets-filter{position:fixed;top:0;z-index:1;width:300px;background:#f0f0f1}#available-menu-items-search .accordion-section-title,#available-widgets-filter{padding:13px 15px;box-sizing:border-box}#available-menu-items-search input,#available-widgets-filter input{width:100%;min-height:32px;margin:1px 0;padding:0 30px}#available-menu-items-search input::-ms-clear,#available-widgets-filter input::-ms-clear{display:none}#available-menu-items-search .search-icon,#available-widgets-filter .search-icon{display:block;position:absolute;top:15px;right:16px;width:30px;height:30px;line-height:2.1;text-align:center;color:#646970}#available-menu-items-search .clear-results,#available-widgets-filter .clear-results{position:absolute;top:15px;left:16px;width:30px;height:30px;padding:0;border:0;cursor:pointer;background:0 0;color:#d63638;text-decoration:none;outline:0}#available-menu-items-search .clear-results,#available-menu-items-search.loading .clear-results.is-visible,#available-widgets-filter .clear-results{display:none}#available-menu-items-search .clear-results.is-visible,#available-widgets-filter .clear-results.is-visible{display:block}#available-menu-items-search .clear-results:before,#available-widgets-filter .clear-results:before{content:"\f335";font:normal 20px/1 dashicons;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-menu-items-search .clear-results:focus,#available-menu-items-search .clear-results:hover,#available-widgets-filter .clear-results:focus,#available-widgets-filter .clear-results:hover{color:#d63638}#available-menu-items-search .clear-results:focus,#available-widgets-filter .clear-results:focus{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}#available-menu-items-search .search-icon:after,#available-widgets-filter .search-icon:after,.themes-filter-bar .search-icon:after{content:"\f179";font:normal 20px/1 dashicons;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.themes-filter-bar .search-icon{position:absolute;top:7px;right:26px;z-index:1;color:#646970;height:30px;width:30px;line-height:2;text-align:center}.no-widgets-found-message{display:none;margin:0;padding:0 15px;line-height:inherit}.no-widgets-found .no-widgets-found-message{display:block}#available-menu-items .item-top,#available-menu-items .item-top:hover,#available-widgets .widget-top,#available-widgets .widget-top:hover{border:none;background:0 0;box-shadow:none}#available-menu-items .item-tpl,#available-widgets .widget-tpl{position:relative;padding:15px 60px 15px 15px;background:#fff;border-bottom:1px solid #dcdcde;border-right:4px solid #fff;transition:.15s color ease-in-out,.15s background-color ease-in-out,.15s border-color ease-in-out;cursor:pointer;display:none}#available-menu-items .item,#available-widgets .widget{position:static}.customize-controls-preview-toggle{display:none}@media only screen and (max-width:782px){.wp-customizer .theme:not(.active):focus .theme-actions,.wp-customizer .theme:not(.active):hover .theme-actions{display:block}.wp-customizer .theme-browser .theme.active .theme-name span{display:inline}.customize-control-header button.random .dice{margin-top:0}.customize-control-checkbox .customize-inside-control-row,.customize-control-nav_menu_auto_add .customize-inside-control-row,.customize-control-radio .customize-inside-control-row{margin-right:32px}.customize-control-checkbox input,.customize-control-nav_menu_auto_add input,.customize-control-radio input{margin-right:-32px}.customize-control input[type=checkbox]+label+br,.customize-control input[type=radio]+label+br{line-height:2.5}.customize-control .date-time-fields select{height:39px}.date-time-fields .date-input.month{width:79px}.date-time-fields .date-input.day,.date-time-fields .date-input.hour,.date-time-fields .date-input.minute{width:55px}.date-time-fields .date-input.year{width:80px}#customize-control-changeset_preview_link a{bottom:16px}.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button{bottom:10px}.media-widget-control .media-widget-buttons .button.change-media,.media-widget-control .media-widget-buttons .button.edit-media,.media-widget-control .media-widget-buttons .button.select-media{margin-top:12px}.wp-core-ui .themes-filter-bar .feature-filter-toggle{margin:3px 25px 3px 0}}@media screen and (max-width:1200px){.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main{right:67%}}@media screen and (max-width:640px){.wp-full-overlay.collapsed #customize-controls{margin-right:0}.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content{bottom:0}.customize-controls-preview-toggle{display:block;position:absolute;top:0;right:48px;line-height:2.6;font-size:14px;padding:0 12px 4px;margin:0;height:45px;background:#f0f0f1;border:0;border-left:1px solid #dcdcde;border-top:4px solid #f0f0f1;color:#50575e;cursor:pointer;transition:color .1s ease-in-out,background .1s ease-in-out}#customize-footer-actions,.customize-controls-preview-toggle .controls,.preview-only .customize-controls-preview-toggle .preview,.preview-only .wp-full-overlay-sidebar-content{display:none}.preview-only #customize-save-button-wrapper{margin-top:-46px}.customize-controls-preview-toggle .controls:before,.customize-controls-preview-toggle .preview:before{font:normal 20px/1 dashicons;content:"\f177";position:relative;top:4px;margin-left:6px}.customize-controls-preview-toggle .controls:before{content:"\f540"}.preview-only #customize-controls{height:45px}.preview-only #customize-preview,.preview-only .customize-controls-preview-toggle .controls{display:block}.wp-core-ui.wp-customizer .button{min-height:30px;padding:0 14px;line-height:2;font-size:14px;vertical-align:middle}#customize-control-changeset_status .customize-inside-control-row{padding-top:15px}body.adding-menu-items div#available-menu-items,body.adding-widget div#available-widgets,body.outer-section-open div#customize-sidebar-outer-content{width:100%}#available-menu-items .customize-section-title,#available-widgets .customize-section-title{display:block;margin:0}#available-menu-items .customize-section-back,#available-widgets .customize-section-back{height:69px}#available-menu-items .customize-section-title h3,#available-widgets .customize-section-title h3{font-size:20px;font-weight:200;padding:9px 14px 12px 10px;margin:0;line-height:24px;color:#50575e;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#available-menu-items .customize-section-title .customize-action,#available-widgets .customize-section-title .customize-action{font-size:13px;display:block;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#available-widgets-filter{position:relative;width:100%;height:auto}#available-widgets-list{top:130px}#available-menu-items-search .clear-results,#available-menu-items-search .search-icon{top:85px}.reorder,.reordering .reorder-done{padding:8px}.wp-core-ui .themes-filter-bar .feature-filter-toggle{margin:0}}@media screen and (max-width:600px){.wp-full-overlay.expanded{margin-right:0}body.adding-menu-items div#available-menu-items,body.adding-widget div#available-widgets,body.outer-section-open div#customize-sidebar-outer-content{top:46px;z-index:10}body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content{right:-100%}body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content{right:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/customize-controls.css b/tools/storybook/wordpress/css/customize-controls.css new file mode 100644 index 00000000000..a7129bbafd5 --- /dev/null +++ b/tools/storybook/wordpress/css/customize-controls.css @@ -0,0 +1,3002 @@ +body { + overflow: hidden; + -webkit-text-size-adjust: 100%; +} + +.customize-controls-close, +.widget-control-actions a { + text-decoration: none; +} + +#customize-controls h3 { + font-size: 14px; +} + +#customize-controls img { + max-width: 100%; +} + +#customize-controls .submit { + text-align: center; +} + +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked { + background-color: rgba(0, 0, 0, 0.7); + padding: 25px; +} + +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message { + margin-left: auto; + margin-right: auto; + max-width: 366px; + min-height: 64px; + width: auto; + padding: 25px 25px 25px 109px; + position: relative; + background: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + line-height: 1.5; + overflow-y: auto; + text-align: left; + top: calc( 50% - 100px ); +} + +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing { + margin-top: 0; +} +#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons { + margin-bottom: 0; +} + +.customize-changeset-locked-avatar { + width: 64px; + position: absolute; + left: 25px; + top: 25px; +} + +.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button { + margin-right: 10px; + margin-top: 0; +} + +#customize-controls .description { + color: #50575e; +} + +#customize-save-button-wrapper { + float: right; + margin-top: 9px; +} + +body:not(.ready) #customize-save-button-wrapper .save { + visibility: hidden; +} +#customize-save-button-wrapper .save { + float: left; + border-radius: 3px; + box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ + margin-top: 0; +} + +#customize-save-button-wrapper .save:focus, #publish-settings:focus { + box-shadow: 0 1px 0 #2271b1, 0 0 2px 1px #72aee6; /* This is default box shadow for focus */ +} + +#customize-save-button-wrapper .save.has-next-sibling { + border-radius: 3px 0 0 3px; +} + +#customize-sidebar-outer-content { + position: absolute; + top: 0; + bottom: 0; + left: 0; + visibility: hidden; + overflow-x: hidden; + overflow-y: auto; + width: 100%; + margin: 0; + z-index: -1; + background: #f0f0f1; + transition: left .18s; + border-right: 1px solid #dcdcde; + border-left: 1px solid #dcdcde; + height: 100%; +} + +@media (prefers-reduced-motion: reduce) { + #customize-sidebar-outer-content { + transition: none; + } +} + +#customize-theme-controls .control-section-outer { + display: none !important; +} + +#customize-outer-theme-controls .accordion-section-content { + padding: 12px; +} + +#customize-outer-theme-controls .accordion-section-content.open { + display: block; +} + +.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { + visibility: visible; + left: 100%; + transition: left .18s; +} + +@media (prefers-reduced-motion: reduce) { + .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { + transition: none; + } +} + +.customize-outer-pane-parent { + margin: 0; +} + +.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main { + left: 300px; + opacity: 0.4; +} + +.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, +.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, +.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, +.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, +.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, +.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { + left: 64%; +} + +#customize-outer-theme-controls li.notice { + padding-top: 8px; + padding-bottom: 8px; + margin-left: 0; + margin-bottom: 10px; +} + +#publish-settings { + text-indent: 0; + border-radius: 0 3px 3px 0; + padding-left: 0; + padding-right: 0; + box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ + font-size: 14px; + width: 30px; + float: left; + transform: none; + margin-top: 0; + line-height: 2; +} + +body:not(.ready) #publish-settings, +body.trashing #customize-save-button-wrapper .save, +body.trashing #publish-settings { + display: none; +} + +#customize-header-actions .spinner { + margin-top: 13px; + margin-right: 4px; +} + +.saving #customize-header-actions .spinner, +.trashing #customize-header-actions .spinner { + visibility: visible; +} + +#customize-header-actions { + border-bottom: 1px solid #dcdcde; +} + +#customize-controls .wp-full-overlay-sidebar-content { + overflow-y: auto; + overflow-x: hidden; +} + +.outer-section-open #customize-controls .wp-full-overlay-sidebar-content { + background: #f0f0f1; +} + +#customize-controls .customize-info { + border: none; + border-bottom: 1px solid #dcdcde; + margin-bottom: 15px; +} + +#customize-control-changeset_status .customize-inside-control-row, +#customize-control-changeset_preview_link input { + background-color: #fff; + border-bottom: 1px solid #dcdcde; + box-sizing: content-box; + width: 100%; + margin-left: -12px; + padding-left: 12px; + padding-right: 12px; +} + +#customize-control-trash_changeset { + margin-top: 20px; +} +#customize-control-trash_changeset .button-link { + position: relative; + padding-left: 24px; + display: inline-block; +} +#customize-control-trash_changeset .button-link:before { + content: "\f182"; + font: normal 22px dashicons; + text-decoration: none; + position: absolute; + left: 0; + top: -2px; +} + +#customize-controls .date-input:invalid { + border-color: #d63638; +} + +#customize-control-changeset_status .customize-inside-control-row { + padding-top: 10px; + padding-bottom: 10px; + font-weight: 500; +} + +#customize-control-changeset_status .customize-inside-control-row:first-of-type { + border-top: 1px solid #dcdcde; +} + +#customize-control-changeset_status .customize-control-title { + margin-bottom: 6px; +} + +#customize-control-changeset_status input { + margin-left: 0; +} + +#customize-control-changeset_preview_link { + position: relative; + display: block; +} + +.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { + margin: 0; + position: absolute; + bottom: 9px; + right: 0; +} + +.preview-link-wrapper { + position: relative; +} + +.customize-copy-preview-link:before, +.customize-copy-preview-link:after { + content: ""; + height: 28px; + position: absolute; + background: #fff; + top: -1px; +} + +.customize-copy-preview-link:before { + left: -10px; + width: 9px; + opacity: 0.75; +} + +.customize-copy-preview-link:after { + left: -5px; + width: 4px; + opacity: 0.8; +} + +#customize-control-changeset_preview_link input { + line-height: 2.85714286; /* 40px */ + border-top: 1px solid #dcdcde; + border-left: none; + border-right: none; + text-indent: -999px; + color: #fff; + /* Only necessary for IE11 */ + min-height: 40px; +} + +#customize-control-changeset_preview_link label { + position: relative; + display: block; +} + +#customize-control-changeset_preview_link a { + display: inline-block; + position: absolute; + white-space: nowrap; + overflow: hidden; + width: 90%; + bottom: 14px; + font-size: 14px; + text-decoration: none; +} + +#customize-control-changeset_preview_link a.disabled, +#customize-control-changeset_preview_link a.disabled:active, +#customize-control-changeset_preview_link a.disabled:focus, +#customize-control-changeset_preview_link a.disabled:visited { + color: #000; + opacity: 0.4; + cursor: default; + outline: none; + box-shadow: none; +} + +#sub-accordion-section-publish_settings .customize-section-description-container { + display: none; +} + +#customize-controls .customize-info.section-meta { + margin-bottom: 15px; +} + +.customize-control-date_time .customize-control-description + .date-time-fields.includes-time { + margin-top: 10px; +} + +.customize-control.customize-control-date_time .date-time-fields .date-input.day { + margin-right: 0; +} + +.date-time-fields .date-input.month { + width: auto; + margin: 0; +} + +.date-time-fields .date-input.day, +.date-time-fields .date-input.hour, +.date-time-fields .date-input.minute { + width: 46px; +} + +.date-time-fields .date-input.year { + width: 65px; +} + +.date-time-fields .date-input.meridian { + width: auto; + margin: 0; +} + +.date-time-fields .time-row { + margin-top: 12px; +} + +#customize-control-changeset_preview_link { + margin-top: 6px; +} + +#customize-control-changeset_status { + margin-bottom: 0; + padding-bottom: 0; +} + +#customize-control-changeset_scheduled_date { + box-sizing: content-box; + width: 100%; + margin-left: -12px; + padding: 12px; + background: #fff; + border-bottom: 1px solid #dcdcde; + margin-bottom: 0; +} + +#customize-control-changeset_scheduled_date .customize-control-description { + font-style: normal; +} + +#customize-controls .customize-info.is-in-view, +#customize-controls .customize-section-title.is-in-view { + position: absolute; + z-index: 9; + width: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); +} + +#customize-controls .customize-section-title.is-in-view { + margin-top: 0; +} + +#customize-controls .customize-info.is-in-view + .accordion-section { + margin-top: 15px; +} + +#customize-controls .customize-info.is-sticky, +#customize-controls .customize-section-title.is-sticky { + position: fixed; + top: 46px; +} + +#customize-controls .customize-info .accordion-section-title { + background: #fff; + color: #50575e; + border-left: none; + border-right: none; + border-bottom: none; + cursor: default; +} + +#customize-controls .customize-info.open .accordion-section-title:after, +#customize-controls .customize-info .accordion-section-title:hover:after, +#customize-controls .customize-info .accordion-section-title:focus:after { + color: #2c3338; +} + +#customize-controls .customize-info .accordion-section-title:after { + display: none; +} + +#customize-controls .customize-info .preview-notice { + font-size: 13px; + line-height: 1.9; +} + +#customize-controls .customize-pane-child .customize-section-title h3, +#customize-controls .customize-pane-child h3.customize-section-title, +#customize-outer-theme-controls .customize-pane-child .customize-section-title h3, +#customize-outer-theme-controls .customize-pane-child h3.customize-section-title, +#customize-controls .customize-info .panel-title { + font-size: 20px; + font-weight: 200; + line-height: 26px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#customize-controls .customize-section-title span.customize-action { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#customize-controls .customize-info .customize-help-toggle { + position: absolute; + top: 4px; + right: 1px; + padding: 20px 20px 10px 10px; + width: 20px; + height: 20px; + cursor: pointer; + box-shadow: none; + -webkit-appearance: none; + background: transparent; + color: #50575e; + border: none; +} + +#customize-controls .customize-info .customize-help-toggle:before { + position: absolute; + top: 5px; + left: 6px; +} + +#customize-controls .customize-info.open .customize-help-toggle, +#customize-controls .customize-info .customize-help-toggle:focus, +#customize-controls .customize-info .customize-help-toggle:hover { + color: #2271b1; +} + +#customize-controls .customize-info .customize-panel-description, +#customize-controls .customize-info .customize-section-description, +#customize-outer-theme-controls .customize-info .customize-section-description, +#customize-controls .no-widget-areas-rendered-notice { + color: #50575e; + display: none; + background: #fff; + padding: 12px 15px; + border-top: 1px solid #dcdcde; +} + +#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice { + border-top: none; +} +.no-widget-areas-rendered-notice { + font-style: italic; +} +.no-widget-areas-rendered-notice p:first-child { + margin-top: 0; +} +.no-widget-areas-rendered-notice p:last-child { + margin-bottom: 0; +} + +#customize-controls .customize-info .customize-section-description { + margin-bottom: 15px; +} + +#customize-controls .customize-info .customize-panel-description p:first-child, +#customize-controls .customize-info .customize-section-description p:first-child { + margin-top: 0; +} + +#customize-controls .customize-info .customize-panel-description p:last-child, +#customize-controls .customize-info .customize-section-description p:last-child { + margin-bottom: 0; +} + +#customize-controls .current-panel .control-section > h3.accordion-section-title { + padding-right: 30px; +} + +#customize-theme-controls .control-section, +#customize-outer-theme-controls .control-section { + border: none; +} + +#customize-theme-controls .accordion-section-title, +#customize-outer-theme-controls .accordion-section-title { + color: #50575e; + background-color: #fff; + border-bottom: 1px solid #dcdcde; + border-left: 4px solid #fff; + transition: + .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + #customize-theme-controls .accordion-section-title, + #customize-outer-theme-controls .accordion-section-title { + transition: none; + } +} + +#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title { + color: #50575e; + background-color: #fff; + border-left: 4px solid #fff; +} + +#customize-theme-controls .accordion-section-title:after, +#customize-outer-theme-controls .accordion-section-title:after { + content: "\f345"; + color: #a7aaad; +} + +#customize-theme-controls .accordion-section-content, +#customize-outer-theme-controls .accordion-section-content { + color: #50575e; + background: transparent; +} + +#customize-controls .control-section:hover > .accordion-section-title, +#customize-controls .control-section .accordion-section-title:hover, +#customize-controls .control-section.open .accordion-section-title, +#customize-controls .control-section .accordion-section-title:focus { + color: #2271b1; + background: #f6f7f7; + border-left-color: #2271b1; +} + +#accordion-section-themes + .control-section { + border-top: 1px solid #dcdcde; +} + +.js .control-section:hover .accordion-section-title, +.js .control-section .accordion-section-title:hover, +.js .control-section.open .accordion-section-title, +.js .control-section .accordion-section-title:focus { + background: #f6f7f7; +} + +#customize-theme-controls .control-section:hover > .accordion-section-title:after, +#customize-theme-controls .control-section .accordion-section-title:hover:after, +#customize-theme-controls .control-section.open .accordion-section-title:after, +#customize-theme-controls .control-section .accordion-section-title:focus:after, +#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +#customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +#customize-outer-theme-controls .control-section.open .accordion-section-title:after, +#customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: #2271b1; +} + +#customize-theme-controls .control-section.open { + border-bottom: 1px solid #f0f0f1; +} + +#customize-theme-controls .control-section.open .accordion-section-title, +#customize-outer-theme-controls .control-section.open .accordion-section-title { + border-bottom-color: #f0f0f1 !important; +} + +#customize-theme-controls .control-section:last-of-type.open, +#customize-theme-controls .control-section:last-of-type > .accordion-section-title { + border-bottom-color: #dcdcde; +} + +#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2), +#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu, +#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title { + border-top: 1px solid #dcdcde; +} + +#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu { + border-top: none; +} + +#customize-theme-controls > ul { + margin: 0; +} + +#customize-theme-controls .accordion-section-content { + position: absolute; + top: 0; + left: 100%; + width: 100%; + margin: 0; + padding: 12px; + box-sizing: border-box; +} + +#customize-info, +#customize-theme-controls .customize-pane-parent, +#customize-theme-controls .customize-pane-child { + overflow: visible; + width: 100%; + margin: 0; + padding: 0; + box-sizing: border-box; + transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */ +} + +@media (prefers-reduced-motion: reduce) { + #customize-info, + #customize-theme-controls .customize-pane-parent, + #customize-theme-controls .customize-pane-child { + transition: none; + } +} + +#customize-theme-controls .customize-pane-child.skip-transition { + transition: none; +} + +#customize-info, +#customize-theme-controls .customize-pane-parent { + position: relative; + visibility: visible; + height: auto; + max-height: none; + overflow: auto; + transform: none; +} + +#customize-theme-controls .customize-pane-child { + position: absolute; + top: 0; + left: 0; + visibility: hidden; + height: 0; + max-height: none; + overflow: hidden; + transform: translateX(100%); +} + +#customize-theme-controls .customize-pane-child.open, +#customize-theme-controls .customize-pane-child.current-panel { + transform: none; +} + +.section-open #customize-theme-controls .customize-pane-parent, +.in-sub-panel #customize-theme-controls .customize-pane-parent, +.section-open #customize-info, +.in-sub-panel #customize-info, +.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel { + visibility: hidden; + height: 0; + overflow: hidden; + transform: translateX(-100%); +} + +.section-open #customize-theme-controls .customize-pane-parent.busy, +.in-sub-panel #customize-theme-controls .customize-pane-parent.busy, +.section-open #customize-info.busy, +.in-sub-panel #customize-info.busy, +.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel, +#customize-theme-controls .customize-pane-child.open, +#customize-theme-controls .customize-pane-child.current-panel, +#customize-theme-controls .customize-pane-child.busy { + visibility: visible; + height: auto; + overflow: auto; +} + +#customize-theme-controls .customize-pane-child.accordion-section-content, +#customize-theme-controls .customize-pane-child.accordion-sub-container { + display: block; + overflow-x: hidden; +} + +#customize-theme-controls .customize-pane-child.accordion-section-content { + padding: 12px; +} + +#customize-theme-controls .customize-pane-child.menu li { + position: static; +} + +.customize-section-description-container, +.control-section-nav_menu .customize-section-description-container, +.control-section-new_menu .customize-section-description-container { + margin-bottom: 15px; +} + +.control-section-nav_menu .customize-control, +.control-section-new_menu .customize-control { + /* Override default `margin-bottom` for `.customize-control` */ + margin-bottom: 0; +} + +.customize-section-title { + margin: -12px -12px 0; + border-bottom: 1px solid #dcdcde; + background: #fff; +} + +div.customize-section-description { + margin-top: 22px; +} + +.customize-info div.customize-section-description { + margin-top: 0; +} + +div.customize-section-description p:first-child { + margin-top: 0; +} + +div.customize-section-description p:last-child { + margin-bottom: 0; +} + +#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + border-bottom: 1px solid #dcdcde; + padding: 12px; +} + +.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + padding: 12px 12px 13px; +} + +.customize-section-title h3, +h3.customize-section-title { + padding: 10px 10px 12px 14px; + margin: 0; + line-height: 21px; + color: #50575e; +} + +.accordion-sub-container.control-panel-content { + display: none; + position: absolute; + top: 0; + width: 100%; +} + +.accordion-sub-container.control-panel-content.busy { + display: block; +} + +.current-panel .accordion-sub-container.control-panel-content { + width: 100%; +} + +.customize-controls-close { + display: block; + position: absolute; + top: 0; + left: 0; + width: 45px; + height: 41px; + padding: 0 2px 0 0; + background: #f0f0f1; + border: none; + border-top: 4px solid #f0f0f1; + border-right: 1px solid #dcdcde; + color: #3c434a; + text-align: left; + cursor: pointer; + transition: + color .15s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; + box-sizing: content-box; +} + +.customize-panel-back, +.customize-section-back { + display: block; + float: left; + width: 48px; + height: 71px; + padding: 0 24px 0 0; + margin: 0; + background: #fff; + border: none; + border-right: 1px solid #dcdcde; + border-left: 4px solid #fff; + box-shadow: none; + cursor: pointer; + transition: + color .15s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; +} + +.customize-section-back { + height: 74px; +} + +.ios .customize-panel-back { + display: none; +} + +.ios .expanded.in-sub-panel .customize-panel-back { + display: block; +} + +#customize-controls .panel-meta.customize-info .accordion-section-title { + margin-left: 48px; + border-left: none; +} + +#customize-controls .panel-meta.customize-info .accordion-section-title:hover, +#customize-controls .cannot-expand:hover .accordion-section-title { + background: #fff; + color: #50575e; + border-left-color: #fff; +} + +.customize-controls-close:focus, +.customize-controls-close:hover, +.customize-controls-preview-toggle:focus, +.customize-controls-preview-toggle:hover { + background: #fff; + color: #2271b1; + border-top-color: #2271b1; + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +#customize-theme-controls .accordion-section-title:focus .customize-action { + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: 1px; +} + +.customize-panel-back:hover, +.customize-panel-back:focus, +.customize-section-back:hover, +.customize-section-back:focus { + color: #2271b1; + background: #f6f7f7; + border-left-color: #2271b1; + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.customize-controls-close:before { + font: normal 22px/45px dashicons; + content: "\f335"; + position: relative; + top: -3px; + left: 13px; +} + +.customize-panel-back:before, +.customize-section-back:before { + font: normal 20px/72px dashicons; + content: "\f341"; + position: relative; + left: 9px; +} + +.wp-full-overlay-sidebar .wp-full-overlay-header { + background-color: #f0f0f1; + transition: padding ease-in-out .18s; +} + +.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { + padding-left: 62px; +} + +p.customize-section-description { + font-style: normal; + margin-top: 22px; + margin-bottom: 0; +} + +.customize-section-description ul { + margin-left: 1em; +} + +.customize-section-description ul > li { + list-style: disc; +} + +.section-description-buttons { + text-align: right; +} + +.customize-control { + width: 100%; + float: left; + clear: both; + margin-bottom: 12px; +} + +.customize-control input[type="text"], +.customize-control input[type="password"], +.customize-control input[type="email"], +.customize-control input[type="number"], +.customize-control input[type="search"], +.customize-control input[type="tel"], +.customize-control input[type="url"], +.customize-control input[type="range"] { + width: 100%; + margin: 0; +} + +.customize-control-hidden { + margin: 0; +} + +.customize-control-textarea textarea { + width: 100%; + resize: vertical; +} + +.customize-control select { + width: 100%; +} + +.customize-control select[multiple] { + height: auto; +} + +.customize-control-title { + display: block; + font-size: 14px; + line-height: 1.75; + font-weight: 600; + margin-bottom: 4px; +} + +.customize-control-description { + display: block; + font-style: italic; + line-height: 1.4; + margin-top: 0; + margin-bottom: 5px; +} + +.customize-section-description a.external-link:after { + font: 16px/11px dashicons; + content: "\f504"; + top: 3px; + position: relative; + padding-left: 3px; + display: inline-block; + text-decoration: none; +} + +.customize-control-color .color-picker, +.customize-control-upload div { + line-height: 28px; +} + +.customize-control .customize-inside-control-row { + line-height: 1.6; + display: block; + margin-left: 24px; + padding-top: 6px; + padding-bottom: 6px; +} + +.customize-control-radio input, +.customize-control-checkbox input, +.customize-control-nav_menu_auto_add input { + margin-right: 4px; + margin-left: -24px; +} + +.customize-control-radio { + padding: 5px 0 10px; +} + +.customize-control-radio .customize-control-title { + margin-bottom: 0; + line-height: 1.6; +} + +.customize-control-radio .customize-control-title + .customize-control-description { + margin-top: 7px; +} + +.customize-control-radio label, +.customize-control-checkbox label { + vertical-align: top; +} + +.customize-control .attachment-thumb.type-icon { + float: left; + margin: 10px; + width: auto; +} + +.customize-control .attachment-title { + font-weight: 600; + margin: 0; + padding: 5px 10px; +} + +.customize-control .attachment-meta { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; + padding: 0 10px; +} + +.customize-control .attachment-meta-title { + padding-top: 7px; +} + +/* Remove descender space. */ +.customize-control .thumbnail-image, +.customize-control-header .current, +.customize-control .wp-media-wrapper.wp-video { + line-height: 0; +} + +/* Remove descender space. */ +.customize-control-site_icon .favicon-preview .browser-preview { + vertical-align: top; +} + +.customize-control .thumbnail-image img { + cursor: pointer; +} + +#customize-controls .thumbnail-audio .thumbnail { + max-width: 64px; + max-height: 64px; + margin: 10px; + float: left; +} + +#available-menu-items .accordion-section-content .new-content-item, +.customize-control-dropdown-pages .new-content-item { + width: calc(100% - 30px); + padding: 8px 15px; + position: absolute; + bottom: 0; + z-index: 10; + background: #f0f0f1; + display: flex; +} + +.customize-control-dropdown-pages .new-content-item { + width: 100%; + padding: 5px 0 5px 1px; + position: relative; +} + +#available-menu-items .new-content-item .create-item-input, +.customize-control-dropdown-pages .new-content-item .create-item-input { + flex-grow: 10; +} + +#available-menu-items .new-content-item .add-content, +.customize-control-dropdown-pages .new-content-item .add-content { + margin: 2px 0 2px 6px; + flex-grow: 1; +} + +.customize-control-dropdown-pages .new-content-item .create-item-input.invalid { + border: 1px solid #d63638; +} + +.customize-control-dropdown-pages .add-new-toggle { + margin-left: 1px; + font-weight: 600; + line-height: 2.2; +} + +#customize-preview iframe { + width: 100%; + height: 100%; + position: absolute; +} +#customize-preview iframe + iframe { + visibility: hidden; +} + +.wp-full-overlay-sidebar { + background: #f0f0f1; + border-right: 1px solid #dcdcde; +} + + +/** + * Notifications + */ + +#customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */ + margin: 4px 0 8px; + padding: 0; + cursor: default; +} + +#customize-controls .customize-control-widget_form.has-error .widget .widget-top, +.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle { + box-shadow: inset 0 0 0 2px #d63638; + transition: .15s box-shadow linear; +} + +#customize-controls .customize-control-notifications-container li.notice { + list-style: none; + margin: 0 0 6px; + padding: 9px 14px; + overflow: hidden; +} +#customize-controls .customize-control-notifications-container .notice.is-dismissible { + padding-right: 38px; +} + +.customize-control-notifications-container li.notice:last-child { + margin-bottom: 0; +} + +#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container { + margin-top: 0; +} + +#customize-controls .customize-control-widget_form .customize-control-notifications-container { + margin-top: 8px; +} + +.customize-control-text.has-error input { + outline: 2px solid #d63638; +} + +#customize-controls #customize-notifications-area { + position: absolute; + top: 46px; + width: 100%; + border-bottom: 1px solid #dcdcde; + display: block; + padding: 0; + margin: 0; +} + +.wp-full-overlay.collapsed #customize-controls #customize-notifications-area { + display: none !important; +} + +#customize-controls #customize-notifications-area:not(.has-overlay-notifications), +#customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications), +#customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) { + max-height: 210px; + overflow-x: hidden; + overflow-y: auto; +} + +#customize-controls #customize-notifications-area > ul, +#customize-controls #customize-notifications-area .notice, +#customize-controls .panel-meta > .customize-control-notifications-container, +#customize-controls .panel-meta > .customize-control-notifications-container .notice, +#customize-controls .customize-section-title > .customize-control-notifications-container, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice { + margin: 0; +} +#customize-controls .panel-meta > .customize-control-notifications-container, +#customize-controls .customize-section-title > .customize-control-notifications-container { + border-top: 1px solid #dcdcde; +} +#customize-controls #customize-notifications-area .notice, +#customize-controls .panel-meta > .customize-control-notifications-container .notice, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice { + padding: 9px 14px; +} +#customize-controls #customize-notifications-area .notice.is-dismissible, +#customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible { + padding-right: 38px; +} +#customize-controls #customize-notifications-area .notice + .notice, +#customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice, +#customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice { + margin-top: 1px; +} + +@keyframes customize-fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +#customize-controls .notice.notification-overlay, +#customize-controls #customize-notifications-area .notice.notification-overlay { + margin: 0; + border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */ +} + +#customize-controls .customize-control-notifications-container.has-overlay-notifications { + animation: customize-fade-in 0.5s; + z-index: 30; +} + +/* Note: Styles for this are also defined in themes.css */ +#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message { + clear: both; + color: #1d2327; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 2em 0; + text-align: center; + width: 100%; + display: block; + top: 50%; + position: relative; +} + +/* Style for custom settings */ + +/** + * Static front page + */ + +#customize-control-show_on_front.has-error { + margin-bottom: 0; +} +#customize-control-show_on_front.has-error .customize-control-notifications-container { + margin-top: 12px; +} + +/** + * Dropdowns + */ + +.accordion-section .dropdown { + float: left; + display: block; + position: relative; + cursor: pointer; +} + +.accordion-section .dropdown-content { + overflow: hidden; + float: left; + min-width: 30px; + height: 16px; + line-height: 16px; + margin-right: 16px; + padding: 4px 5px; + border: 2px solid #f0f0f1; + -webkit-user-select: none; + user-select: none; +} + +/* @todo maybe no more used? */ +.customize-control .dropdown-arrow { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 20px; + background: #f0f0f1; +} + +.customize-control .dropdown-arrow:after { + content: "\f140"; + font: normal 20px/1 dashicons; + speak: never; + display: block; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #2c3338; +} + +.customize-control .dropdown-status { + color: #2c3338; + background: #f0f0f1; + display: none; + max-width: 112px; +} + +.customize-control-color .dropdown { + margin-right: 5px; + margin-bottom: 5px; +} + +.customize-control-color .dropdown .dropdown-content { + background-color: #50575e; + border: 1px solid rgba(0, 0, 0, 0.15); +} + +.customize-control-color .dropdown:hover .dropdown-content { + border-color: rgba(0, 0, 0, 0.25); +} + +/** + * iOS can't scroll iframes, + * instead it expands the iframe size to match the size of the content + */ + +.ios .wp-full-overlay { + position: relative; +} + +.ios #customize-controls .wp-full-overlay-sidebar-content { + -webkit-overflow-scrolling: touch; +} + +/* Media controls */ + +.customize-control .actions .button { + margin-top: 12px; +} + +.customize-control-header .actions, +.customize-control-header .uploaded { + margin-bottom: 18px; +} + +.customize-control-header .uploaded button:not(.random), +.customize-control-header .default button:not(.random) { + width: 100%; + padding: 0; + margin: 0; + background: none; + border: none; + color: inherit; + cursor: pointer; +} + +.customize-control-header button img { + display: block; +} + +.customize-control .attachment-media-view .remove-button, +.customize-control .attachment-media-view .default-button, +.customize-control .attachment-media-view .upload-button, +.customize-control-header button.new, +.customize-control-header button.remove { + width: auto; + height: auto; + white-space: normal; +} + +.customize-control .attachment-media-view .thumbnail, +.customize-control-header .current .container { + overflow: hidden; +} + +.customize-control .attachment-media-view .placeholder, +.customize-control .attachment-media-view .button-add-media, +.customize-control-header .placeholder { + width: 100%; + position: relative; + text-align: center; + cursor: default; + border: 1px dashed #c3c4c7; + box-sizing: border-box; + padding: 9px 0; + line-height: 1.6; +} + +.customize-control .attachment-media-view .button-add-media { + cursor: pointer; + background-color: #f0f0f1; + color: #2c3338; +} + +.customize-control .attachment-media-view .button-add-media:hover { + background-color: #fff; +} + +.customize-control .attachment-media-view .button-add-media:focus { + background-color: #fff; + border-color: #3582c4; + border-style: solid; + box-shadow: 0 0 0 1px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.customize-control-header .inner { + display: none; + position: absolute; + width: 100%; + color: #50575e; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.customize-control-header .inner, +.customize-control-header .inner .dashicons { + line-height: 20px; + top: 8px; +} + +.customize-control-header .list .inner, +.customize-control-header .list .inner .dashicons { + top: 9px; +} + +.customize-control-header .header-view { + position: relative; + width: 100%; + margin-bottom: 12px; +} + +.customize-control-header .header-view:last-child { + margin-bottom: 0; +} + +/* Convoluted, but 'outline' support isn't good enough yet */ +.customize-control-header .header-view:after { + border: 0; +} + +.customize-control-header .header-view.selected .choice:focus { + outline: none; +} + +.customize-control-header .header-view.selected:after { + content: ""; + position: absolute; + height: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + border: 4px solid #72aee6; + border-radius: 2px; +} + +.customize-control-header .header-view.button.selected { + border: 0; +} + +/* Header control: overlay "close" button */ + +.customize-control-header .uploaded .header-view .close { + font-size: 20px; + color: #fff; + background: #50575e; + background: rgba(0, 0, 0, 0.5); + position: absolute; + top: 10px; + left: -999px; + z-index: 1; + width: 26px; + height: 26px; + cursor: pointer; +} + +.customize-control-header .header-view:hover .close, +.customize-control-header .header-view .close:focus { + left: auto; + right: 10px; +} + +.customize-control-header .header-view .close:focus { + outline: 1px solid #4f94d4; +} + +/* Header control: randomiz(s)er */ + +.customize-control-header .random.placeholder { + cursor: pointer; + border-radius: 2px; + height: 40px; +} + +.customize-control-header button.random { + width: 100%; + height: auto; + min-height: 40px; + white-space: normal; +} + +.customize-control-header button.random .dice { + margin-top: 4px; +} + +.customize-control-header .placeholder:hover .dice, +.customize-control-header .header-view:hover > button.random .dice { + animation: dice-color-change 3s infinite; +} + +.button-see-me { + animation: bounce .7s 1; + transform-origin: center bottom; +} + +@keyframes bounce { + from, 20%, 53%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transform: translate3d(0,0,0); + } + + 40%, 43% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -12px, 0); + } + + 70% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -6px, 0); + } + + 90% { + transform: translate3d(0,-1px,0); + } +} + +.customize-control-header .choice { + position: relative; + display: block; + margin-bottom: 9px; +} + +.customize-control-header .choice:focus { + outline: none; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 3px 1px rgba(79, 148, 212, 0.8); +} + +.customize-control-header .uploaded div:last-child > .choice { + margin-bottom: 0; +} + +.customize-control .attachment-media-view .thumbnail-image img, +.customize-control-header img { + max-width: 100%; +} + +.customize-control .attachment-media-view .remove-button, +.customize-control .attachment-media-view .default-button, +.customize-control-header .remove { + margin-right: 8px; +} + +/* Background position control */ +.customize-control-background_position .background-position-control .button-group { + display: block; +} + +/** + * Code Editor Control and Custom CSS Section + * + * Modifications to the Section Container to make the textarea full-width and + * full-height, if the control is the only control in the section. + */ + +.customize-control-code_editor textarea { + width: 100%; + font-family: Consolas, Monaco, monospace; + font-size: 12px; + padding: 6px 8px; + -o-tab-size: 2; + tab-size: 2; +} +.customize-control-code_editor textarea, +.customize-control-code_editor .CodeMirror { + height: 14em; +} + +#customize-controls .customize-section-description-container.section-meta.customize-info { + border-bottom: none; +} + +#sub-accordion-section-custom_css .customize-control-notifications-container { + margin-bottom: 15px; +} + +#customize-control-custom_css textarea { + display: block; + height: 500px; +} + +.customize-section-description-container + #customize-control-custom_css .customize-control-title { + margin-left: 12px; +} + +.customize-section-description-container + #customize-control-custom_css:last-child textarea { + border-right: 0; + border-left: 0; + height: calc( 100vh - 185px ); + resize: none; +} + +.customize-section-description-container + #customize-control-custom_css:last-child { + margin-left: -12px; + width: 299px; + width: calc( 100% + 24px ); + margin-bottom: -12px; +} + +.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror { + height: calc( 100vh - 185px ); +} + +.CodeMirror-lint-tooltip, +.CodeMirror-hints { + z-index: 500000 !important; +} + +.customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container { + margin-left: 12px; + margin-right: 12px; +} + +.theme-browser .theme.active .theme-actions, +.wp-customizer .theme-browser .theme .theme-actions { + padding: 9px 15px; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); +} + +@media screen and (max-width: 640px) { + .customize-section-description-container + #customize-control-custom_css:last-child { + margin-right: 0; + } + + .customize-section-description-container + #customize-control-custom_css:last-child textarea { + height: calc( 100vh - 140px ); + } +} + +/** + * Themes + */ + +#customize-theme-controls .control-panel-themes { + border-bottom: none; +} + +#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */ +#customize-theme-controls .control-panel-themes > .accordion-section-title { + cursor: default; + background: #fff; + color: #50575e; + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #dcdcde; + border-left: none; + border-right: none; + margin: 0 0 15px; + padding-right: 100px; /* Space for the button */ +} + +#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */ +#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child { + border-top: 0; +} + +#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */ +#customize-theme-controls .control-section-themes > .accordion-section-title { + margin: 0 0 15px; +} + +#customize-controls .customize-themes-panel .accordion-section-title:hover, +#customize-controls .customize-themes-panel .accordion-section-title { + margin: 15px -8px; +} + +#customize-controls .control-section-themes .accordion-section-title, +#customize-controls .customize-themes-panel .accordion-section-title { + padding-right: 100px; /* Space for the button */ +} + +.control-panel-themes .accordion-section-title span.customize-action, +#customize-controls .customize-section-title span.customize-action, +#customize-controls .control-section-themes .accordion-section-title span.customize-action, +#customize-controls .customize-section-title span.customize-action { + font-size: 13px; + display: block; + font-weight: 400; +} + +#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme { + position: absolute; + right: 10px; + top: 50%; + margin-top: -14px; + font-weight: 400; +} + +#customize-notifications-area .notification-message button.switch-to-editor { + display: block; + margin-top: 6px; + font-weight: 400; +} + +#customize-theme-controls .control-panel-themes > .accordion-section-title:after { + display: none; +} + +.control-panel-themes .customize-themes-full-container { + position: fixed; + top: 0; + left: 0; + transition: .18s left ease-in-out; + margin: 0 0 0 300px; + padding: 71px 0 25px; + overflow-y: scroll; + width: calc(100% - 300px); + height: calc(100% - 96px); + background: #f0f0f1; + z-index: 20; +} + +@media (prefers-reduced-motion: reduce) { + .control-panel-themes .customize-themes-full-container { + transition: none; + } +} + +@media screen and (min-width: 1670px) { + .control-panel-themes .customize-themes-full-container { + width: 82%; + right: 0; + left: initial; + } +} + +.modal-open .control-panel-themes .customize-themes-full-container { + overflow-y: visible; +} + +/* Animations for opening the themes panel */ +#customize-save-button-wrapper, +#customize-header-actions .spinner, +#customize-header-actions .customize-controls-preview-toggle { + transition: .18s margin ease-in-out; +} + +#customize-footer-actions, +#customize-footer-actions .collapse-sidebar { + bottom: 0; + transition: .18s bottom ease-in-out; +} + +.in-themes-panel:not(.animating) #customize-header-actions .spinner, +.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle, +.in-themes-panel:not(.animating) #customize-preview, +.in-themes-panel:not(.animating) #customize-footer-actions { + visibility: hidden; +} + +.wp-full-overlay.in-themes-panel { + background: #f0f0f1; /* Prevents a black flash when fading in the panel */ +} + +.in-themes-panel #customize-save-button-wrapper, +.in-themes-panel #customize-header-actions .spinner, +.in-themes-panel #customize-header-actions .customize-controls-preview-toggle { + margin-top: -46px; /* Height of header actions bar */ +} + +.in-themes-panel #customize-footer-actions, +.in-themes-panel #customize-footer-actions .collapse-sidebar { + bottom: -45px; +} + +/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */ +.in-themes-panel.animating .control-panel-themes .filter-themes-count { + display: none; +} + +.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content { + bottom: 0; +} + +.themes-filter-bar .feature-filter-toggle { + float: right; + margin: 3px 0 3px 25px; +} + +.themes-filter-bar .feature-filter-toggle:before { + content: "\f111"; + margin: 0 5px 0 0; + font: normal 16px/1 dashicons; + vertical-align: text-bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.themes-filter-bar .feature-filter-toggle.open { + background: #f0f0f1; + border-color: #8c8f94; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); +} + +.themes-filter-bar .feature-filter-toggle .filter-count-filters { + display: none; +} + +.filter-drawer { + box-sizing: border-box; + width: 100%; + position: absolute; + top: 46px; + left: 0; + padding: 25px 0 25px 25px; + border-top: 0; + margin: 0; + background: #f0f0f1; + border-bottom: 1px solid #dcdcde; +} + +.filter-drawer .filter-group { + margin: 0 25px 0 0; + width: calc( (100% - 75px) / 3); + min-width: 200px; + max-width: 320px; +} + +/* Adds a delay before fading in to avoid it "jumping" */ +@keyframes themes-fade-in { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.control-panel-themes .customize-themes-full-container.animate { + animation: .6s themes-fade-in 1; +} + +.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count { + animation: .6s themes-fade-in 1; +} + +.control-panel-themes .filter-themes-count { + position: relative; + float: right; + line-height: 2.6; +} + +.control-panel-themes .filter-themes-count .themes-displayed { + font-weight: 600; + color: #50575e; +} + +.customize-themes-notifications { + margin: 0; +} + +.control-panel-themes .customize-themes-notifications .notice { + margin: 0 0 25px; +} + +.customize-themes-full-container .customize-themes-section { + display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ + overflow: hidden; +} + +.customize-themes-full-container .customize-themes-section.current-section { + display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ +} + +.control-section .customize-section-text-before { + padding: 0 0 8px 15px; + margin: 15px 0 0; + line-height: 16px; + border-bottom: 1px solid #dcdcde; + color: #50575e; +} + +.control-panel-themes .customize-themes-section-title { + width: 100%; + background: #fff; + box-shadow: none; + outline: none; + border-top: none; + border-bottom: 1px solid #dcdcde; + border-left: 4px solid #fff; + border-right: none; + cursor: pointer; + padding: 10px 15px; + position: relative; + text-align: left; + font-size: 14px; + font-weight: 600; + color: #50575e; + text-shadow: none; +} + +.control-panel-themes #accordion-section-installed_themes { + border-top: 1px solid #dcdcde; +} + +.control-panel-themes .theme-section { + margin: 0; + position: relative; +} + +.control-panel-themes .customize-themes-section-title:focus, +.control-panel-themes .customize-themes-section-title:hover { + border-left-color: #2271b1; + color: #2271b1; + background: #f6f7f7; +} + +.customize-themes-section-title:not(.selected):after { + content: ""; + display: block; + position: absolute; + top: 9px; + right: 15px; + width: 18px; + height: 18px; + border-radius: 100%; + border: 1px solid #c3c4c7; + background: #fff; +} + +.control-panel-themes .theme-section .customize-themes-section-title.selected:after { + content: "\f147"; + font: 16px/1 dashicons; + box-sizing: border-box; + width: 20px; + height: 20px; + padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */ + border-radius: 100%; + position: absolute; + top: 9px; + right: 15px; + background: #2271b1; + color: #fff; +} + +.control-panel-themes .customize-themes-section-title.selected { + color: #2271b1; +} + +#customize-theme-controls .themes.accordion-section-content { + position: relative; + left: 0; + padding: 0; + width: 100%; +} + +.loading .customize-themes-section .spinner { + display: block; + visibility: visible; + position: relative; + clear: both; + width: 20px; + height: 20px; + left: calc(50% - 10px); + float: none; + margin-top: 50px; +} + +.customize-themes-section .no-themes, +.customize-themes-section .no-themes-local { + display: none; +} + +.themes-section-installed_themes .theme .notice-success:not(.updated-message) { + display: none; /* Hide "installed" notice on installed themes tab. */ +} + +.customize-control-theme .theme { + width: 100%; + margin: 0; + border: 1px solid #dcdcde; + background: #fff; +} + +.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions { + background: #fff; + border: none; +} + +.customize-control.customize-control-theme { /* override most properties on .customize-control */ + box-sizing: border-box; + width: 25%; + max-width: 600px; /* Max. screenshot size / 2 */ + margin: 0 25px 25px 0; + padding: 0; + clear: none; +} + +/* 5 columns above 2100px */ +@media screen and (min-width: 2101px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */ + } +} + +/* 4 columns up to 2100px */ +@media screen and (min-width: 1601px) and (max-width: 2100px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 100px ) / 4 - 1px ); + } +} + +/* 3 columns up to 1600px */ +@media screen and (min-width: 1201px) and (max-width: 1600px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 75px ) / 3 - 1px ); + } +} + +/* 2 columns up to 1200px */ +@media screen and (min-width: 851px) and (max-width: 1200px) { + .customize-control.customize-control-theme { + width: calc( ( 100% - 50px ) / 2 - 1px ); + + } +} + +/* 1 column up to 850 px */ +@media screen and (max-width: 850px) { + .customize-control.customize-control-theme { + width: 100%; + } +} + +.wp-customizer .theme-browser .themes { + padding: 0 0 25px 25px; + transition: .18s margin-top linear; +} + +.wp-customizer .theme-browser .theme .theme-actions { + opacity: 1; +} + +#customize-controls h3.theme-name { + font-size: 15px; +} + +#customize-controls .theme-overlay .theme-name { + font-size: 32px; +} + +.customize-preview-header.themes-filter-bar { + position: fixed; + top: 0; + left: 300px; + width: calc(100% - 300px); + height: 46px; + background: #f0f0f1; + z-index: 10; + padding: 6px 25px; + box-sizing: border-box; + border-bottom: 1px solid #dcdcde; +} + +@media screen and (min-width: 1670px) { + .customize-preview-header.themes-filter-bar { + width: 82%; + right: 0; + left: initial; + } +} + +.themes-filter-bar .themes-filter-container { + margin: 0; + padding: 0; +} + +.themes-filter-bar .wp-filter-search { + line-height: 1.8; + padding: 6px 10px 6px 30px; + max-width: 100%; + width: 40%; + min-width: 300px; + position: absolute; + top: 6px; + left: 25px; + height: 32px; + margin: 1px 0; +} + +/* Unstick the filter bar on short windows/screens. This breakpoint is based on the + current length of .org feature filters assuming translations do not wrap lines. */ +@media screen and (max-height: 540px), screen and (max-width: 1018px) { + .customize-preview-header.themes-filter-bar { + position: relative; + left: 0; + width: 100%; + margin: 0 0 25px; + } + .filter-drawer { + top: 46px; + } + .wp-customizer .theme-browser .themes { + padding: 0 0 25px 25px; + overflow: hidden; + } + + .control-panel-themes .customize-themes-full-container { + margin-top: 0; + padding: 0; + height: 100%; + width: calc(100% - 300px); + } +} + +@media screen and (max-width: 1018px) { + .filter-drawer .filter-group { + width: calc( (100% - 50px) / 2); + } +} + +@media screen and (max-width: 900px) { + .customize-preview-header.themes-filter-bar { + height: 86px; + padding-top: 46px; + } + + .themes-filter-bar .wp-filter-search { + width: calc(100% - 50px); + margin: 0; + min-width: 200px; + } + + .filter-drawer { + top: 86px; + } + + .control-panel-themes .filter-themes-count { + float: left; + } +} + +@media screen and (max-width: 792px) { + .filter-drawer .filter-group { + width: calc( 100% - 25px); + } +} + +.control-panel-themes .customize-themes-mobile-back { + display: none; +} + +/* Mobile - toggle between themes and filters */ +@media screen and (max-width: 600px) { + + .filter-drawer { + top: 132px; + } + + .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes { + display: block; + float: right; + } + + .control-panel-themes .customize-themes-full-container { + width: 100%; + margin: 0; + padding-top: 46px; + height: calc(100% - 46px); + z-index: 1; + display: none; + } + + .showing-themes .control-panel-themes .customize-themes-full-container { + display: block; + } + + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back { + display: block; + position: fixed; + top: 0; + left: 0; + background: #f0f0f1; + color: #3c434a; + border-radius: 0; + box-shadow: none; + border: none; + height: 46px; + width: 100%; + z-index: 10; + text-align: left; + text-shadow: none; + border-bottom: 1px solid #dcdcde; + border-left: 4px solid transparent; + margin: 0; + padding: 0; + font-size: 0; + overflow: hidden; + } + + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before { + left: 0; + top: 0; + height: 46px; + width: 26px; + display: block; + line-height: 2.3; + padding: 0 8px; + border-right: 1px solid #dcdcde; + } + + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover, + .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus { + color: #2271b1; + background: #f6f7f7; + border-left-color: #2271b1; + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; + } + + .showing-themes #customize-header-actions { + display: none; + } + + #customize-controls { + width: 100%; + } +} + +/* Details View */ +.wp-customizer .theme-overlay { + display: none; +} + +.wp-customizer.modal-open .theme-overlay { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 109; +} + +/* Avoid a z-index war by resetting elements that should be under the overlay. + This is likely required because of the way that sections and panels are positioned. */ +.wp-customizer.modal-open #customize-header-actions, +.wp-customizer.modal-open .control-panel-themes .filter-themes-count, +.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after { + z-index: -1; +} + +.wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content { + overflow: visible; +} + +.wp-customizer .theme-overlay .theme-backdrop { + background: rgba(240, 240, 241, 0.75); + position: fixed; + z-index: 110; +} + +.wp-customizer .theme-overlay .star-rating { + float: left; + margin-right: 8px; +} + +.wp-customizer .theme-rating .num-ratings { + line-height: 20px; +} + +.wp-customizer .theme-overlay .theme-wrap { + left: 90px; + right: 90px; + top: 45px; + bottom: 45px; + z-index: 120; +} + +.wp-customizer .theme-overlay .theme-actions { + text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */ + padding: 10px 25px; + background: #f0f0f1; + border-top: 1px solid #dcdcde; +} + +.wp-customizer .theme-overlay .theme-actions .theme-install.preview { + margin-left: 8px; +} + +.control-panel-themes .theme-actions .delete-theme { + left: 15px; /* these override themes.css on mobile */ + right: auto; + bottom: auto; + position: absolute; +} + +.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { + overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */ +} + +.wp-customizer .theme-header { + background: #f0f0f1; +} + +.wp-customizer .theme-overlay .theme-header button, +.wp-customizer .theme-overlay .theme-header .close:before { + color: #3c434a; +} + +.wp-customizer .theme-overlay .theme-header .close:focus, +.wp-customizer .theme-overlay .theme-header .close:hover, +.wp-customizer .theme-overlay .theme-header .right:focus, +.wp-customizer .theme-overlay .theme-header .right:hover, +.wp-customizer .theme-overlay .theme-header .left:focus, +.wp-customizer .theme-overlay .theme-header .left:hover { + background: #fff; + border-bottom: 4px solid #2271b1; + color: #2271b1; +} + +.wp-customizer .theme-overlay .theme-header .close:focus:before, +.wp-customizer .theme-overlay .theme-header .close:hover:before { + color: #2271b1; +} + +.wp-customizer .theme-overlay .theme-header button.disabled, +.wp-customizer .theme-overlay .theme-header button.disabled:hover, +.wp-customizer .theme-overlay .theme-header button.disabled:focus { + border-bottom: none; + background: transparent; + color: #c3c4c7; +} + +/* Small Screens */ +@media (max-width: 850px), (max-height: 472px) { + .wp-customizer .theme-overlay .theme-wrap { + left: 0; + right: 0; + top: 0; + bottom: 0; + } + + .wp-customizer .theme-browser .themes { + padding-right: 25px; + } +} + +/* Handle cheaters. */ +body.cheatin { + font-size: medium; + height: auto; + background: #fff; + border: 1px solid #c3c4c7; + margin: 50px auto 2em; + padding: 1em 2em; + max-width: 700px; + min-width: 0; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +body.cheatin h1 { + border-bottom: 1px solid #dcdcde; + clear: both; + color: #50575e; + font-size: 24px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin: 30px 0 0; + padding: 0 0 7px; +} + +body.cheatin p { + font-size: 14px; + line-height: 1.5; + margin: 25px 0 20px; +} + +/** + * Widgets and Menus common styles + */ + +/* higher specificity than .wp-core-ui .button */ +#customize-theme-controls .add-new-widget, +#customize-theme-controls .add-new-menu-item { + cursor: pointer; + float: right; + margin: 0 0 0 10px; + transition: all 0.2s; + -webkit-user-select: none; + user-select: none; + outline: none; +} + +.reordering .add-new-widget, +.reordering .add-new-menu-item { + opacity: 0.2; + pointer-events: none; + cursor: not-allowed; /* doesn't work in conjunction with pointer-events */ +} + +.add-new-widget:before, +.add-new-menu-item:before, +#available-menu-items .new-content-item .add-content:before { + content: "\f132"; + display: inline-block; + position: relative; + left: -2px; + top: 0; + font: normal 20px/1 dashicons; + vertical-align: middle; + transition: all 0.2s; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Reordering */ +.reorder-toggle { + float: right; + padding: 5px 8px; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.reorder, +.reordering .reorder-done { + display: block; + padding: 5px 8px; +} + +.reorder-done, +.reordering .reorder { + display: none; +} + +.widget-reorder-nav span, +.menu-item-reorder-nav button { + position: relative; + overflow: hidden; + float: left; + display: block; + width: 33px; /* was 42px for mobile */ + height: 43px; + color: #8c8f94; + text-indent: -9999px; + cursor: pointer; + outline: none; +} + +.menu-item-reorder-nav button { + width: 30px; + height: 40px; + background: transparent; + border: none; + box-shadow: none; +} + +.widget-reorder-nav span:before, +.menu-item-reorder-nav button:before { + display: inline-block; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + font: normal 20px/43px dashicons; + text-align: center; + text-indent: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.widget-reorder-nav span:hover, +.widget-reorder-nav span:focus, +.menu-item-reorder-nav button:hover, +.menu-item-reorder-nav button:focus { + color: #1d2327; + background: #f0f0f1; +} + +.move-widget-down:before, +.menus-move-down:before { + content: "\f347"; +} + +.move-widget-up:before, +.menus-move-up:before { + content: "\f343"; +} + +#customize-theme-controls .first-widget .move-widget-up, +#customize-theme-controls .last-widget .move-widget-down, +.move-up-disabled .menus-move-up, +.move-down-disabled .menus-move-down, +.move-right-disabled .menus-move-right, +.move-left-disabled .menus-move-left { + color: #dcdcde; + background-color: #fff; + cursor: default; + pointer-events: none; +} + +/** + * New widget and Add-menu-items modes and panels + */ + +.wp-full-overlay-main { + right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ + width: 100%; +} + +body.adding-widget .add-new-widget, +body.adding-widget .add-new-widget:hover, +.adding-menu-items .add-new-menu-item, +.adding-menu-items .add-new-menu-item:hover, +.add-menu-toggle.open, +.add-menu-toggle.open:hover { + background: #f0f0f1; + border-color: #8c8f94; + color: #2c3338; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); +} + +body.adding-widget .add-new-widget:before, +.adding-menu-items .add-new-menu-item:before, +#accordion-section-add_menu .add-new-menu-item.open:before { + transform: rotate(45deg); +} + +#available-widgets, +#available-menu-items { + position: absolute; + top: 0; + bottom: 0; + left: -301px; + visibility: hidden; + overflow-x: hidden; + overflow-y: auto; + width: 300px; + margin: 0; + z-index: 4; + background: #f0f0f1; + transition: left .18s; + border-right: 1px solid #dcdcde; +} + +#available-widgets .customize-section-title, +#available-menu-items .customize-section-title { + display: none; +} + +#available-widgets-list { + top: 60px; + position: absolute; + overflow: auto; + bottom: 0; + width: 100%; + border-top: 1px solid #dcdcde; +} + +.no-widgets-found #available-widgets-list { + border-top: none; +} + +#available-widgets-filter { + position: fixed; + top: 0; + z-index: 1; + width: 300px; + background: #f0f0f1; +} + +/* search field container */ +#available-widgets-filter, +#available-menu-items-search .accordion-section-title { + padding: 13px 15px; + box-sizing: border-box; +} + +#available-widgets-filter input, +#available-menu-items-search input { + width: 100%; + min-height: 32px; + margin: 1px 0; + padding: 0 30px; +} + +#available-widgets-filter input::-ms-clear, +#available-menu-items-search input::-ms-clear { + display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */ +} + +#available-menu-items-search .search-icon, +#available-widgets-filter .search-icon { + display: block; + position: absolute; + top: 15px; /* 13 container padding +1 input margin +1 input border */ + left: 16px; + width: 30px; + height: 30px; + line-height: 2.1; + text-align: center; + color: #646970; +} + +#available-widgets-filter .clear-results, +#available-menu-items-search .clear-results { + position: absolute; + top: 15px; /* 13 container padding +1 input margin +1 input border */ + right: 16px; + width: 30px; + height: 30px; + padding: 0; + border: 0; + cursor: pointer; + background: none; + color: #d63638; + text-decoration: none; + outline: 0; +} + +#available-widgets-filter .clear-results, +#available-menu-items-search .clear-results, +#available-menu-items-search.loading .clear-results.is-visible { + display: none; +} + +#available-widgets-filter .clear-results.is-visible, +#available-menu-items-search .clear-results.is-visible { + display: block; +} + +#available-widgets-filter .clear-results:before, +#available-menu-items-search .clear-results:before { + content: "\f335"; + font: normal 20px/1 dashicons; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +#available-widgets-filter .clear-results:hover, +#available-widgets-filter .clear-results:focus, +#available-menu-items-search .clear-results:hover, +#available-menu-items-search .clear-results:focus { + color: #d63638; +} + +#available-widgets-filter .clear-results:focus, +#available-menu-items-search .clear-results:focus { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +#available-menu-items-search .search-icon:after, +#available-widgets-filter .search-icon:after, +.themes-filter-bar .search-icon:after { + content: "\f179"; + font: normal 20px/1 dashicons; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.themes-filter-bar .search-icon { + position: absolute; + top: 7px; + left: 26px; + z-index: 1; + color: #646970; + height: 30px; + width: 30px; + line-height: 2; + text-align: center; +} + +.no-widgets-found-message { + display: none; + margin: 0; + padding: 0 15px; + line-height: inherit; +} + +.no-widgets-found .no-widgets-found-message { + display: block; +} + +#available-widgets .widget-top, +#available-widgets .widget-top:hover, +#available-menu-items .item-top, +#available-menu-items .item-top:hover { + border: none; + background: transparent; + box-shadow: none; +} + +#available-widgets .widget-tpl, +#available-menu-items .item-tpl { + position: relative; + padding: 15px 15px 15px 60px; + background: #fff; + border-bottom: 1px solid #dcdcde; + border-left: 4px solid #fff; + transition: + .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; + cursor: pointer; + display: none; +} + +#available-widgets .widget, +#available-menu-items .item { + position: static; +} + + +/* Responsive */ +.customize-controls-preview-toggle { + display: none; +} + +@media only screen and (max-width: 782px) { + .wp-customizer .theme:not(.active):hover .theme-actions, + .wp-customizer .theme:not(.active):focus .theme-actions { + display: block; + } + + .wp-customizer .theme-browser .theme.active .theme-name span { + display: inline; + } + + .customize-control-header button.random .dice { + margin-top: 0; + } + + .customize-control-radio .customize-inside-control-row, + .customize-control-checkbox .customize-inside-control-row, + .customize-control-nav_menu_auto_add .customize-inside-control-row { + margin-left: 32px; + } + + .customize-control-radio input, + .customize-control-checkbox input, + .customize-control-nav_menu_auto_add input { + margin-left: -32px; + } + + .customize-control input[type="radio"] + label + br, + .customize-control input[type="checkbox"] + label + br { + line-height: 2.5; /* For widgets checkboxes */ + } + + .customize-control .date-time-fields select { + height: 39px; + } + + .date-time-fields .date-input.month { + width: 79px; + } + + .date-time-fields .date-input.day, + .date-time-fields .date-input.hour, + .date-time-fields .date-input.minute { + width: 55px; + } + + .date-time-fields .date-input.year { + width: 80px; + } + + #customize-control-changeset_preview_link a { + bottom: 16px; + } + + .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { + bottom: 10px; + } + + .media-widget-control .media-widget-buttons .button.edit-media, + .media-widget-control .media-widget-buttons .button.change-media, + .media-widget-control .media-widget-buttons .button.select-media { + margin-top: 12px; + } + + .wp-core-ui .themes-filter-bar .feature-filter-toggle { + margin: 3px 0 3px 25px; + } +} + +@media screen and (max-width: 1200px) { + .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, + .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, + .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { + left: 67%; + } +} + +@media screen and (max-width: 640px) { + + /* when the sidebar is collapsed and switching to responsive view, + bring it back see ticket #35220 */ + .wp-full-overlay.collapsed #customize-controls { + margin-left: 0; + } + + .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { + bottom: 0; + } + + .customize-controls-preview-toggle { + display: block; + position: absolute; + top: 0; + left: 48px; + line-height: 2.6; + font-size: 14px; + padding: 0 12px 4px; + margin: 0; + height: 45px; + background: #f0f0f1; + border: 0; + border-right: 1px solid #dcdcde; + border-top: 4px solid #f0f0f1; + color: #50575e; + cursor: pointer; + transition: color .1s ease-in-out, background .1s ease-in-out; + } + + #customize-footer-actions, + /*#customize-preview,*/ + .customize-controls-preview-toggle .controls, + .preview-only .wp-full-overlay-sidebar-content, + .preview-only .customize-controls-preview-toggle .preview { + display: none; + } + + .preview-only #customize-save-button-wrapper { + margin-top: -46px; + } + + .customize-controls-preview-toggle .preview:before, + .customize-controls-preview-toggle .controls:before { + font: normal 20px/1 dashicons; + content: "\f177"; + position: relative; + top: 4px; + margin-right: 6px; + } + + .customize-controls-preview-toggle .controls:before { + content: "\f540"; + } + + .preview-only #customize-controls { + height: 45px; + } + + .preview-only #customize-preview, + .preview-only .customize-controls-preview-toggle .controls { + display: block; + } + + .wp-core-ui.wp-customizer .button { + min-height: 30px; + padding: 0 14px; + line-height: 2; + font-size: 14px; + vertical-align: middle; + } + + #customize-control-changeset_status .customize-inside-control-row { + padding-top: 15px; + } + + body.adding-widget div#available-widgets, + body.adding-menu-items div#available-menu-items, + body.outer-section-open div#customize-sidebar-outer-content { + width: 100%; + } + + #available-widgets .customize-section-title, + #available-menu-items .customize-section-title { + display: block; + margin: 0; + } + + #available-widgets .customize-section-back, + #available-menu-items .customize-section-back { + height: 69px; + } + + #available-widgets .customize-section-title h3, + #available-menu-items .customize-section-title h3 { + font-size: 20px; + font-weight: 200; + padding: 9px 10px 12px 14px; + margin: 0; + line-height: 24px; + color: #50575e; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #available-widgets .customize-section-title .customize-action, + #available-menu-items .customize-section-title .customize-action { + font-size: 13px; + display: block; + font-weight: 400; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #available-widgets-filter { + position: relative; + width: 100%; + height: auto; + } + + #available-widgets-list { + top: 130px; + } + + #available-menu-items-search .clear-results, + #available-menu-items-search .search-icon { + top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */ + } + + .reorder, + .reordering .reorder-done { + padding: 8px; + } + + .wp-core-ui .themes-filter-bar .feature-filter-toggle { + margin: 0; + } +} + +@media screen and (max-width: 600px) { + .wp-full-overlay.expanded { + margin-left: 0; + } + + body.adding-widget div#available-widgets, + body.adding-menu-items div#available-menu-items, + body.outer-section-open div#customize-sidebar-outer-content { + top: 46px; + z-index: 10; + } + + body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content { + left: -100%; + } + + body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { + left: 0; + } +} diff --git a/tools/storybook/wordpress/css/customize-controls.min.css b/tools/storybook/wordpress/css/customize-controls.min.css new file mode 100644 index 00000000000..e55d086a5b8 --- /dev/null +++ b/tools/storybook/wordpress/css/customize-controls.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body{overflow:hidden;-webkit-text-size-adjust:100%}.customize-controls-close,.widget-control-actions a{text-decoration:none}#customize-controls h3{font-size:14px}#customize-controls img{max-width:100%}#customize-controls .submit{text-align:center}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked{background-color:rgba(0,0,0,.7);padding:25px}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message{margin-left:auto;margin-right:auto;max-width:366px;min-height:64px;width:auto;padding:25px 25px 25px 109px;position:relative;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3);line-height:1.5;overflow-y:auto;text-align:left;top:calc(50% - 100px)}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing{margin-top:0}#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons{margin-bottom:0}.customize-changeset-locked-avatar{width:64px;position:absolute;left:25px;top:25px}.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button{margin-right:10px;margin-top:0}#customize-controls .description{color:#50575e}#customize-save-button-wrapper{float:right;margin-top:9px}body:not(.ready) #customize-save-button-wrapper .save{visibility:hidden}#customize-save-button-wrapper .save{float:left;border-radius:3px;box-shadow:none;margin-top:0}#customize-save-button-wrapper .save:focus,#publish-settings:focus{box-shadow:0 1px 0 #2271b1,0 0 2px 1px #72aee6}#customize-save-button-wrapper .save.has-next-sibling{border-radius:3px 0 0 3px}#customize-sidebar-outer-content{position:absolute;top:0;bottom:0;left:0;visibility:hidden;overflow-x:hidden;overflow-y:auto;width:100%;margin:0;z-index:-1;background:#f0f0f1;transition:left .18s;border-right:1px solid #dcdcde;border-left:1px solid #dcdcde;height:100%}@media (prefers-reduced-motion:reduce){#customize-sidebar-outer-content{transition:none}}#customize-theme-controls .control-section-outer{display:none!important}#customize-outer-theme-controls .accordion-section-content{padding:12px}#customize-outer-theme-controls .accordion-section-content.open{display:block}.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content{visibility:visible;left:100%;transition:left .18s}@media (prefers-reduced-motion:reduce){.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content{transition:none}}.customize-outer-pane-parent{margin:0}.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main{left:300px;opacity:.4}.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main{left:64%}#customize-outer-theme-controls li.notice{padding-top:8px;padding-bottom:8px;margin-left:0;margin-bottom:10px}#publish-settings{text-indent:0;border-radius:0 3px 3px 0;padding-left:0;padding-right:0;box-shadow:none;font-size:14px;width:30px;float:left;transform:none;margin-top:0;line-height:2}body.trashing #customize-save-button-wrapper .save,body.trashing #publish-settings,body:not(.ready) #publish-settings{display:none}#customize-header-actions .spinner{margin-top:13px;margin-right:4px}.saving #customize-header-actions .spinner,.trashing #customize-header-actions .spinner{visibility:visible}#customize-header-actions{border-bottom:1px solid #dcdcde}#customize-controls .wp-full-overlay-sidebar-content{overflow-y:auto;overflow-x:hidden}.outer-section-open #customize-controls .wp-full-overlay-sidebar-content{background:#f0f0f1}#customize-controls .customize-info{border:none;border-bottom:1px solid #dcdcde;margin-bottom:15px}#customize-control-changeset_preview_link input,#customize-control-changeset_status .customize-inside-control-row{background-color:#fff;border-bottom:1px solid #dcdcde;box-sizing:content-box;width:100%;margin-left:-12px;padding-left:12px;padding-right:12px}#customize-control-trash_changeset{margin-top:20px}#customize-control-trash_changeset .button-link{position:relative;padding-left:24px;display:inline-block}#customize-control-trash_changeset .button-link:before{content:"\f182";font:normal 22px dashicons;text-decoration:none;position:absolute;left:0;top:-2px}#customize-controls .date-input:invalid{border-color:#d63638}#customize-control-changeset_status .customize-inside-control-row{padding-top:10px;padding-bottom:10px;font-weight:500}#customize-control-changeset_status .customize-inside-control-row:first-of-type{border-top:1px solid #dcdcde}#customize-control-changeset_status .customize-control-title{margin-bottom:6px}#customize-control-changeset_status input{margin-left:0}#customize-control-changeset_preview_link{position:relative;display:block}.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button{margin:0;position:absolute;bottom:9px;right:0}.preview-link-wrapper{position:relative}.customize-copy-preview-link:after,.customize-copy-preview-link:before{content:"";height:28px;position:absolute;background:#fff;top:-1px}.customize-copy-preview-link:before{left:-10px;width:9px;opacity:.75}.customize-copy-preview-link:after{left:-5px;width:4px;opacity:.8}#customize-control-changeset_preview_link input{line-height:2.85714286;border-top:1px solid #dcdcde;border-left:none;border-right:none;text-indent:-999px;color:#fff;min-height:40px}#customize-control-changeset_preview_link label{position:relative;display:block}#customize-control-changeset_preview_link a{display:inline-block;position:absolute;white-space:nowrap;overflow:hidden;width:90%;bottom:14px;font-size:14px;text-decoration:none}#customize-control-changeset_preview_link a.disabled,#customize-control-changeset_preview_link a.disabled:active,#customize-control-changeset_preview_link a.disabled:focus,#customize-control-changeset_preview_link a.disabled:visited{color:#000;opacity:.4;cursor:default;outline:0;box-shadow:none}#sub-accordion-section-publish_settings .customize-section-description-container{display:none}#customize-controls .customize-info.section-meta{margin-bottom:15px}.customize-control-date_time .customize-control-description+.date-time-fields.includes-time{margin-top:10px}.customize-control.customize-control-date_time .date-time-fields .date-input.day{margin-right:0}.date-time-fields .date-input.month{width:auto;margin:0}.date-time-fields .date-input.day,.date-time-fields .date-input.hour,.date-time-fields .date-input.minute{width:46px}.date-time-fields .date-input.year{width:65px}.date-time-fields .date-input.meridian{width:auto;margin:0}.date-time-fields .time-row{margin-top:12px}#customize-control-changeset_preview_link{margin-top:6px}#customize-control-changeset_status{margin-bottom:0;padding-bottom:0}#customize-control-changeset_scheduled_date{box-sizing:content-box;width:100%;margin-left:-12px;padding:12px;background:#fff;border-bottom:1px solid #dcdcde;margin-bottom:0}#customize-control-changeset_scheduled_date .customize-control-description{font-style:normal}#customize-controls .customize-info.is-in-view,#customize-controls .customize-section-title.is-in-view{position:absolute;z-index:9;width:100%;box-shadow:0 1px 0 rgba(0,0,0,.1)}#customize-controls .customize-section-title.is-in-view{margin-top:0}#customize-controls .customize-info.is-in-view+.accordion-section{margin-top:15px}#customize-controls .customize-info.is-sticky,#customize-controls .customize-section-title.is-sticky{position:fixed;top:46px}#customize-controls .customize-info .accordion-section-title{background:#fff;color:#50575e;border-left:none;border-right:none;border-bottom:none;cursor:default}#customize-controls .customize-info .accordion-section-title:focus:after,#customize-controls .customize-info .accordion-section-title:hover:after,#customize-controls .customize-info.open .accordion-section-title:after{color:#2c3338}#customize-controls .customize-info .accordion-section-title:after{display:none}#customize-controls .customize-info .preview-notice{font-size:13px;line-height:1.9}#customize-controls .customize-info .panel-title,#customize-controls .customize-pane-child .customize-section-title h3,#customize-controls .customize-pane-child h3.customize-section-title,#customize-outer-theme-controls .customize-pane-child .customize-section-title h3,#customize-outer-theme-controls .customize-pane-child h3.customize-section-title{font-size:20px;font-weight:200;line-height:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-section-title span.customize-action{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-info .customize-help-toggle{position:absolute;top:4px;right:1px;padding:20px 20px 10px 10px;width:20px;height:20px;cursor:pointer;box-shadow:none;-webkit-appearance:none;background:0 0;color:#50575e;border:none}#customize-controls .customize-info .customize-help-toggle:before{position:absolute;top:5px;left:6px}#customize-controls .customize-info .customize-help-toggle:focus,#customize-controls .customize-info .customize-help-toggle:hover,#customize-controls .customize-info.open .customize-help-toggle{color:#2271b1}#customize-controls .customize-info .customize-panel-description,#customize-controls .customize-info .customize-section-description,#customize-controls .no-widget-areas-rendered-notice,#customize-outer-theme-controls .customize-info .customize-section-description{color:#50575e;display:none;background:#fff;padding:12px 15px;border-top:1px solid #dcdcde}#customize-controls .customize-info .customize-panel-description.open+.no-widget-areas-rendered-notice{border-top:none}.no-widget-areas-rendered-notice{font-style:italic}.no-widget-areas-rendered-notice p:first-child{margin-top:0}.no-widget-areas-rendered-notice p:last-child{margin-bottom:0}#customize-controls .customize-info .customize-section-description{margin-bottom:15px}#customize-controls .customize-info .customize-panel-description p:first-child,#customize-controls .customize-info .customize-section-description p:first-child{margin-top:0}#customize-controls .customize-info .customize-panel-description p:last-child,#customize-controls .customize-info .customize-section-description p:last-child{margin-bottom:0}#customize-controls .current-panel .control-section>h3.accordion-section-title{padding-right:30px}#customize-outer-theme-controls .control-section,#customize-theme-controls .control-section{border:none}#customize-outer-theme-controls .accordion-section-title,#customize-theme-controls .accordion-section-title{color:#50575e;background-color:#fff;border-bottom:1px solid #dcdcde;border-left:4px solid #fff;transition:.15s color ease-in-out,.15s background-color ease-in-out,.15s border-color ease-in-out}@media (prefers-reduced-motion:reduce){#customize-outer-theme-controls .accordion-section-title,#customize-theme-controls .accordion-section-title{transition:none}}#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title{color:#50575e;background-color:#fff;border-left:4px solid #fff}#customize-outer-theme-controls .accordion-section-title:after,#customize-theme-controls .accordion-section-title:after{content:"\f345";color:#a7aaad}#customize-outer-theme-controls .accordion-section-content,#customize-theme-controls .accordion-section-content{color:#50575e;background:0 0}#customize-controls .control-section .accordion-section-title:focus,#customize-controls .control-section .accordion-section-title:hover,#customize-controls .control-section.open .accordion-section-title,#customize-controls .control-section:hover>.accordion-section-title{color:#2271b1;background:#f6f7f7;border-left-color:#2271b1}#accordion-section-themes+.control-section{border-top:1px solid #dcdcde}.js .control-section .accordion-section-title:focus,.js .control-section .accordion-section-title:hover,.js .control-section.open .accordion-section-title,.js .control-section:hover .accordion-section-title{background:#f6f7f7}#customize-outer-theme-controls .control-section .accordion-section-title:focus:after,#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,#customize-outer-theme-controls .control-section.open .accordion-section-title:after,#customize-outer-theme-controls .control-section:hover>.accordion-section-title:after,#customize-theme-controls .control-section .accordion-section-title:focus:after,#customize-theme-controls .control-section .accordion-section-title:hover:after,#customize-theme-controls .control-section.open .accordion-section-title:after,#customize-theme-controls .control-section:hover>.accordion-section-title:after{color:#2271b1}#customize-theme-controls .control-section.open{border-bottom:1px solid #f0f0f1}#customize-outer-theme-controls .control-section.open .accordion-section-title,#customize-theme-controls .control-section.open .accordion-section-title{border-bottom-color:#f0f0f1!important}#customize-theme-controls .control-section:last-of-type.open,#customize-theme-controls .control-section:last-of-type>.accordion-section-title{border-bottom-color:#dcdcde}#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title{border-top:1px solid #dcdcde}#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu+.control-section-nav_menu{border-top:none}#customize-theme-controls>ul{margin:0}#customize-theme-controls .accordion-section-content{position:absolute;top:0;left:100%;width:100%;margin:0;padding:12px;box-sizing:border-box}#customize-info,#customize-theme-controls .customize-pane-child,#customize-theme-controls .customize-pane-parent{overflow:visible;width:100%;margin:0;padding:0;box-sizing:border-box;transition:.18s transform cubic-bezier(.645, .045, .355, 1)}@media (prefers-reduced-motion:reduce){#customize-info,#customize-theme-controls .customize-pane-child,#customize-theme-controls .customize-pane-parent{transition:none}}#customize-theme-controls .customize-pane-child.skip-transition{transition:none}#customize-info,#customize-theme-controls .customize-pane-parent{position:relative;visibility:visible;height:auto;max-height:none;overflow:auto;transform:none}#customize-theme-controls .customize-pane-child{position:absolute;top:0;left:0;visibility:hidden;height:0;max-height:none;overflow:hidden;transform:translateX(100%)}#customize-theme-controls .customize-pane-child.current-panel,#customize-theme-controls .customize-pane-child.open{transform:none}.in-sub-panel #customize-info,.in-sub-panel #customize-theme-controls .customize-pane-parent,.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,.section-open #customize-info,.section-open #customize-theme-controls .customize-pane-parent{visibility:hidden;height:0;overflow:hidden;transform:translateX(-100%)}#customize-theme-controls .customize-pane-child.busy,#customize-theme-controls .customize-pane-child.current-panel,#customize-theme-controls .customize-pane-child.open,.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,.in-sub-panel #customize-info.busy,.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,.section-open #customize-info.busy,.section-open #customize-theme-controls .customize-pane-parent.busy{visibility:visible;height:auto;overflow:auto}#customize-theme-controls .customize-pane-child.accordion-section-content,#customize-theme-controls .customize-pane-child.accordion-sub-container{display:block;overflow-x:hidden}#customize-theme-controls .customize-pane-child.accordion-section-content{padding:12px}#customize-theme-controls .customize-pane-child.menu li{position:static}.control-section-nav_menu .customize-section-description-container,.control-section-new_menu .customize-section-description-container,.customize-section-description-container{margin-bottom:15px}.control-section-nav_menu .customize-control,.control-section-new_menu .customize-control{margin-bottom:0}.customize-section-title{margin:-12px -12px 0;border-bottom:1px solid #dcdcde;background:#fff}div.customize-section-description{margin-top:22px}.customize-info div.customize-section-description{margin-top:0}div.customize-section-description p:first-child{margin-top:0}div.customize-section-description p:last-child{margin-bottom:0}#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child{border-bottom:1px solid #dcdcde;padding:12px}.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child{padding:12px 12px 13px}.customize-section-title h3,h3.customize-section-title{padding:10px 10px 12px 14px;margin:0;line-height:21px;color:#50575e}.accordion-sub-container.control-panel-content{display:none;position:absolute;top:0;width:100%}.accordion-sub-container.control-panel-content.busy{display:block}.current-panel .accordion-sub-container.control-panel-content{width:100%}.customize-controls-close{display:block;position:absolute;top:0;left:0;width:45px;height:41px;padding:0 2px 0 0;background:#f0f0f1;border:none;border-top:4px solid #f0f0f1;border-right:1px solid #dcdcde;color:#3c434a;text-align:left;cursor:pointer;transition:color .15s ease-in-out,border-color .15s ease-in-out,background .15s ease-in-out;box-sizing:content-box}.customize-panel-back,.customize-section-back{display:block;float:left;width:48px;height:71px;padding:0 24px 0 0;margin:0;background:#fff;border:none;border-right:1px solid #dcdcde;border-left:4px solid #fff;box-shadow:none;cursor:pointer;transition:color .15s ease-in-out,border-color .15s ease-in-out,background .15s ease-in-out}.customize-section-back{height:74px}.ios .customize-panel-back{display:none}.ios .expanded.in-sub-panel .customize-panel-back{display:block}#customize-controls .panel-meta.customize-info .accordion-section-title{margin-left:48px;border-left:none}#customize-controls .cannot-expand:hover .accordion-section-title,#customize-controls .panel-meta.customize-info .accordion-section-title:hover{background:#fff;color:#50575e;border-left-color:#fff}.customize-controls-close:focus,.customize-controls-close:hover,.customize-controls-preview-toggle:focus,.customize-controls-preview-toggle:hover{background:#fff;color:#2271b1;border-top-color:#2271b1;box-shadow:none;outline:1px solid transparent}#customize-theme-controls .accordion-section-title:focus .customize-action{outline:1px solid transparent;outline-offset:1px}.customize-panel-back:focus,.customize-panel-back:hover,.customize-section-back:focus,.customize-section-back:hover{color:#2271b1;background:#f6f7f7;border-left-color:#2271b1;box-shadow:none;outline:2px solid transparent;outline-offset:-2px}.customize-controls-close:before{font:normal 22px/45px dashicons;content:"\f335";position:relative;top:-3px;left:13px}.customize-panel-back:before,.customize-section-back:before{font:normal 20px/72px dashicons;content:"\f341";position:relative;left:9px}.wp-full-overlay-sidebar .wp-full-overlay-header{background-color:#f0f0f1;transition:padding ease-in-out .18s}.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header{padding-left:62px}p.customize-section-description{font-style:normal;margin-top:22px;margin-bottom:0}.customize-section-description ul{margin-left:1em}.customize-section-description ul>li{list-style:disc}.section-description-buttons{text-align:right}.customize-control{width:100%;float:left;clear:both;margin-bottom:12px}.customize-control input[type=email],.customize-control input[type=number],.customize-control input[type=password],.customize-control input[type=range],.customize-control input[type=search],.customize-control input[type=tel],.customize-control input[type=text],.customize-control input[type=url]{width:100%;margin:0}.customize-control-hidden{margin:0}.customize-control-textarea textarea{width:100%;resize:vertical}.customize-control select{width:100%}.customize-control select[multiple]{height:auto}.customize-control-title{display:block;font-size:14px;line-height:1.75;font-weight:600;margin-bottom:4px}.customize-control-description{display:block;font-style:italic;line-height:1.4;margin-top:0;margin-bottom:5px}.customize-section-description a.external-link:after{font:16px/11px dashicons;content:"\f504";top:3px;position:relative;padding-left:3px;display:inline-block;text-decoration:none}.customize-control-color .color-picker,.customize-control-upload div{line-height:28px}.customize-control .customize-inside-control-row{line-height:1.6;display:block;margin-left:24px;padding-top:6px;padding-bottom:6px}.customize-control-checkbox input,.customize-control-nav_menu_auto_add input,.customize-control-radio input{margin-right:4px;margin-left:-24px}.customize-control-radio{padding:5px 0 10px}.customize-control-radio .customize-control-title{margin-bottom:0;line-height:1.6}.customize-control-radio .customize-control-title+.customize-control-description{margin-top:7px}.customize-control-checkbox label,.customize-control-radio label{vertical-align:top}.customize-control .attachment-thumb.type-icon{float:left;margin:10px;width:auto}.customize-control .attachment-title{font-weight:600;margin:0;padding:5px 10px}.customize-control .attachment-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 10px}.customize-control .attachment-meta-title{padding-top:7px}.customize-control .thumbnail-image,.customize-control .wp-media-wrapper.wp-video,.customize-control-header .current{line-height:0}.customize-control-site_icon .favicon-preview .browser-preview{vertical-align:top}.customize-control .thumbnail-image img{cursor:pointer}#customize-controls .thumbnail-audio .thumbnail{max-width:64px;max-height:64px;margin:10px;float:left}#available-menu-items .accordion-section-content .new-content-item,.customize-control-dropdown-pages .new-content-item{width:calc(100% - 30px);padding:8px 15px;position:absolute;bottom:0;z-index:10;background:#f0f0f1;display:flex}.customize-control-dropdown-pages .new-content-item{width:100%;padding:5px 0 5px 1px;position:relative}#available-menu-items .new-content-item .create-item-input,.customize-control-dropdown-pages .new-content-item .create-item-input{flex-grow:10}#available-menu-items .new-content-item .add-content,.customize-control-dropdown-pages .new-content-item .add-content{margin:2px 0 2px 6px;flex-grow:1}.customize-control-dropdown-pages .new-content-item .create-item-input.invalid{border:1px solid #d63638}.customize-control-dropdown-pages .add-new-toggle{margin-left:1px;font-weight:600;line-height:2.2}#customize-preview iframe{width:100%;height:100%;position:absolute}#customize-preview iframe+iframe{visibility:hidden}.wp-full-overlay-sidebar{background:#f0f0f1;border-right:1px solid #dcdcde}#customize-controls .customize-control-notifications-container{margin:4px 0 8px;padding:0;cursor:default}#customize-controls .customize-control-widget_form.has-error .widget .widget-top,.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle{box-shadow:inset 0 0 0 2px #d63638;transition:.15s box-shadow linear}#customize-controls .customize-control-notifications-container li.notice{list-style:none;margin:0 0 6px;padding:9px 14px;overflow:hidden}#customize-controls .customize-control-notifications-container .notice.is-dismissible{padding-right:38px}.customize-control-notifications-container li.notice:last-child{margin-bottom:0}#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container{margin-top:0}#customize-controls .customize-control-widget_form .customize-control-notifications-container{margin-top:8px}.customize-control-text.has-error input{outline:2px solid #d63638}#customize-controls #customize-notifications-area{position:absolute;top:46px;width:100%;border-bottom:1px solid #dcdcde;display:block;padding:0;margin:0}.wp-full-overlay.collapsed #customize-controls #customize-notifications-area{display:none!important}#customize-controls #customize-notifications-area:not(.has-overlay-notifications),#customize-controls .customize-section-title>.customize-control-notifications-container:not(.has-overlay-notifications),#customize-controls .panel-meta>.customize-control-notifications-container:not(.has-overlay-notifications){max-height:210px;overflow-x:hidden;overflow-y:auto}#customize-controls #customize-notifications-area .notice,#customize-controls #customize-notifications-area>ul,#customize-controls .customize-section-title>.customize-control-notifications-container,#customize-controls .customize-section-title>.customize-control-notifications-container .notice,#customize-controls .panel-meta>.customize-control-notifications-container,#customize-controls .panel-meta>.customize-control-notifications-container .notice{margin:0}#customize-controls .customize-section-title>.customize-control-notifications-container,#customize-controls .panel-meta>.customize-control-notifications-container{border-top:1px solid #dcdcde}#customize-controls #customize-notifications-area .notice,#customize-controls .customize-section-title>.customize-control-notifications-container .notice,#customize-controls .panel-meta>.customize-control-notifications-container .notice{padding:9px 14px}#customize-controls #customize-notifications-area .notice.is-dismissible,#customize-controls .customize-section-title>.customize-control-notifications-container .notice.is-dismissible,#customize-controls .panel-meta>.customize-control-notifications-container .notice.is-dismissible{padding-right:38px}#customize-controls #customize-notifications-area .notice+.notice,#customize-controls .customize-section-title>.customize-control-notifications-container .notice+.notice,#customize-controls .panel-meta>.customize-control-notifications-container .notice+.notice{margin-top:1px}@keyframes customize-fade-in{0%{opacity:0}100%{opacity:1}}#customize-controls #customize-notifications-area .notice.notification-overlay,#customize-controls .notice.notification-overlay{margin:0;border-left:0}#customize-controls .customize-control-notifications-container.has-overlay-notifications{animation:customize-fade-in .5s;z-index:30}#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message{clear:both;color:#1d2327;font-size:18px;font-style:normal;margin:0;padding:2em 0;text-align:center;width:100%;display:block;top:50%;position:relative}#customize-control-show_on_front.has-error{margin-bottom:0}#customize-control-show_on_front.has-error .customize-control-notifications-container{margin-top:12px}.accordion-section .dropdown{float:left;display:block;position:relative;cursor:pointer}.accordion-section .dropdown-content{overflow:hidden;float:left;min-width:30px;height:16px;line-height:16px;margin-right:16px;padding:4px 5px;border:2px solid #f0f0f1;-webkit-user-select:none;user-select:none}.customize-control .dropdown-arrow{position:absolute;top:0;bottom:0;right:0;width:20px;background:#f0f0f1}.customize-control .dropdown-arrow:after{content:"\f140";font:normal 20px/1 dashicons;speak:never;display:block;padding:0;text-indent:0;text-align:center;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#2c3338}.customize-control .dropdown-status{color:#2c3338;background:#f0f0f1;display:none;max-width:112px}.customize-control-color .dropdown{margin-right:5px;margin-bottom:5px}.customize-control-color .dropdown .dropdown-content{background-color:#50575e;border:1px solid rgba(0,0,0,.15)}.customize-control-color .dropdown:hover .dropdown-content{border-color:rgba(0,0,0,.25)}.ios .wp-full-overlay{position:relative}.ios #customize-controls .wp-full-overlay-sidebar-content{-webkit-overflow-scrolling:touch}.customize-control .actions .button{margin-top:12px}.customize-control-header .actions,.customize-control-header .uploaded{margin-bottom:18px}.customize-control-header .default button:not(.random),.customize-control-header .uploaded button:not(.random){width:100%;padding:0;margin:0;background:0 0;border:none;color:inherit;cursor:pointer}.customize-control-header button img{display:block}.customize-control .attachment-media-view .default-button,.customize-control .attachment-media-view .remove-button,.customize-control .attachment-media-view .upload-button,.customize-control-header button.new,.customize-control-header button.remove{width:auto;height:auto;white-space:normal}.customize-control .attachment-media-view .thumbnail,.customize-control-header .current .container{overflow:hidden}.customize-control .attachment-media-view .button-add-media,.customize-control .attachment-media-view .placeholder,.customize-control-header .placeholder{width:100%;position:relative;text-align:center;cursor:default;border:1px dashed #c3c4c7;box-sizing:border-box;padding:9px 0;line-height:1.6}.customize-control .attachment-media-view .button-add-media{cursor:pointer;background-color:#f0f0f1;color:#2c3338}.customize-control .attachment-media-view .button-add-media:hover{background-color:#fff}.customize-control .attachment-media-view .button-add-media:focus{background-color:#fff;border-color:#3582c4;border-style:solid;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.customize-control-header .inner{display:none;position:absolute;width:100%;color:#50575e;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.customize-control-header .inner,.customize-control-header .inner .dashicons{line-height:20px;top:8px}.customize-control-header .list .inner,.customize-control-header .list .inner .dashicons{top:9px}.customize-control-header .header-view{position:relative;width:100%;margin-bottom:12px}.customize-control-header .header-view:last-child{margin-bottom:0}.customize-control-header .header-view:after{border:0}.customize-control-header .header-view.selected .choice:focus{outline:0}.customize-control-header .header-view.selected:after{content:"";position:absolute;height:auto;top:0;left:0;bottom:0;right:0;border:4px solid #72aee6;border-radius:2px}.customize-control-header .header-view.button.selected{border:0}.customize-control-header .uploaded .header-view .close{font-size:20px;color:#fff;background:#50575e;background:rgba(0,0,0,.5);position:absolute;top:10px;left:-999px;z-index:1;width:26px;height:26px;cursor:pointer}.customize-control-header .header-view .close:focus,.customize-control-header .header-view:hover .close{left:auto;right:10px}.customize-control-header .header-view .close:focus{outline:1px solid #4f94d4}.customize-control-header .random.placeholder{cursor:pointer;border-radius:2px;height:40px}.customize-control-header button.random{width:100%;height:auto;min-height:40px;white-space:normal}.customize-control-header button.random .dice{margin-top:4px}.customize-control-header .header-view:hover>button.random .dice,.customize-control-header .placeholder:hover .dice{animation:dice-color-change 3s infinite}.button-see-me{animation:bounce .7s 1;transform-origin:center bottom}@keyframes bounce{20%,53%,80%,from,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform:translate3d(0,-12px,0)}70%{animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform:translate3d(0,-6px,0)}90%{transform:translate3d(0,-1px,0)}}.customize-control-header .choice{position:relative;display:block;margin-bottom:9px}.customize-control-header .choice:focus{outline:0;box-shadow:0 0 0 1px #4f94d4,0 0 3px 1px rgba(79,148,212,.8)}.customize-control-header .uploaded div:last-child>.choice{margin-bottom:0}.customize-control .attachment-media-view .thumbnail-image img,.customize-control-header img{max-width:100%}.customize-control .attachment-media-view .default-button,.customize-control .attachment-media-view .remove-button,.customize-control-header .remove{margin-right:8px}.customize-control-background_position .background-position-control .button-group{display:block}.customize-control-code_editor textarea{width:100%;font-family:Consolas,Monaco,monospace;font-size:12px;padding:6px 8px;-o-tab-size:2;tab-size:2}.customize-control-code_editor .CodeMirror,.customize-control-code_editor textarea{height:14em}#customize-controls .customize-section-description-container.section-meta.customize-info{border-bottom:none}#sub-accordion-section-custom_css .customize-control-notifications-container{margin-bottom:15px}#customize-control-custom_css textarea{display:block;height:500px}.customize-section-description-container+#customize-control-custom_css .customize-control-title{margin-left:12px}.customize-section-description-container+#customize-control-custom_css:last-child textarea{border-right:0;border-left:0;height:calc(100vh - 185px);resize:none}.customize-section-description-container+#customize-control-custom_css:last-child{margin-left:-12px;width:299px;width:calc(100% + 24px);margin-bottom:-12px}.customize-section-description-container+#customize-control-custom_css:last-child .CodeMirror{height:calc(100vh - 185px)}.CodeMirror-hints,.CodeMirror-lint-tooltip{z-index:500000!important}.customize-section-description-container+#customize-control-custom_css:last-child .customize-control-notifications-container{margin-left:12px;margin-right:12px}.theme-browser .theme.active .theme-actions,.wp-customizer .theme-browser .theme .theme-actions{padding:9px 15px;box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}@media screen and (max-width:640px){.customize-section-description-container+#customize-control-custom_css:last-child{margin-right:0}.customize-section-description-container+#customize-control-custom_css:last-child textarea{height:calc(100vh - 140px)}}#customize-theme-controls .control-panel-themes{border-bottom:none}#customize-theme-controls .control-panel-themes>.accordion-section-title,#customize-theme-controls .control-panel-themes>.accordion-section-title:hover{cursor:default;background:#fff;color:#50575e;border-top:1px solid #dcdcde;border-bottom:1px solid #dcdcde;border-left:none;border-right:none;margin:0 0 15px;padding-right:100px}#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child,#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover{border-top:0}#customize-theme-controls .control-section-themes>.accordion-section-title,#customize-theme-controls .control-section-themes>.accordion-section-title:hover{margin:0 0 15px}#customize-controls .customize-themes-panel .accordion-section-title,#customize-controls .customize-themes-panel .accordion-section-title:hover{margin:15px -8px}#customize-controls .control-section-themes .accordion-section-title,#customize-controls .customize-themes-panel .accordion-section-title{padding-right:100px}#customize-controls .control-section-themes .accordion-section-title span.customize-action,#customize-controls .customize-section-title span.customize-action,.control-panel-themes .accordion-section-title span.customize-action{font-size:13px;display:block;font-weight:400}#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme{position:absolute;right:10px;top:50%;margin-top:-14px;font-weight:400}#customize-notifications-area .notification-message button.switch-to-editor{display:block;margin-top:6px;font-weight:400}#customize-theme-controls .control-panel-themes>.accordion-section-title:after{display:none}.control-panel-themes .customize-themes-full-container{position:fixed;top:0;left:0;transition:.18s left ease-in-out;margin:0 0 0 300px;padding:71px 0 25px;overflow-y:scroll;width:calc(100% - 300px);height:calc(100% - 96px);background:#f0f0f1;z-index:20}@media (prefers-reduced-motion:reduce){.control-panel-themes .customize-themes-full-container{transition:none}}@media screen and (min-width:1670px){.control-panel-themes .customize-themes-full-container{width:82%;right:0;left:initial}}.modal-open .control-panel-themes .customize-themes-full-container{overflow-y:visible}#customize-header-actions .customize-controls-preview-toggle,#customize-header-actions .spinner,#customize-save-button-wrapper{transition:.18s margin ease-in-out}#customize-footer-actions,#customize-footer-actions .collapse-sidebar{bottom:0;transition:.18s bottom ease-in-out}.in-themes-panel:not(.animating) #customize-footer-actions,.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,.in-themes-panel:not(.animating) #customize-header-actions .spinner,.in-themes-panel:not(.animating) #customize-preview{visibility:hidden}.wp-full-overlay.in-themes-panel{background:#f0f0f1}.in-themes-panel #customize-header-actions .customize-controls-preview-toggle,.in-themes-panel #customize-header-actions .spinner,.in-themes-panel #customize-save-button-wrapper{margin-top:-46px}.in-themes-panel #customize-footer-actions,.in-themes-panel #customize-footer-actions .collapse-sidebar{bottom:-45px}.in-themes-panel.animating .control-panel-themes .filter-themes-count{display:none}.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content{bottom:0}.themes-filter-bar .feature-filter-toggle{float:right;margin:3px 0 3px 25px}.themes-filter-bar .feature-filter-toggle:before{content:"\f111";margin:0 5px 0 0;font:normal 16px/1 dashicons;vertical-align:text-bottom;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.themes-filter-bar .feature-filter-toggle.open{background:#f0f0f1;border-color:#8c8f94;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5)}.themes-filter-bar .feature-filter-toggle .filter-count-filters{display:none}.filter-drawer{box-sizing:border-box;width:100%;position:absolute;top:46px;left:0;padding:25px 0 25px 25px;border-top:0;margin:0;background:#f0f0f1;border-bottom:1px solid #dcdcde}.filter-drawer .filter-group{margin:0 25px 0 0;width:calc((100% - 75px)/ 3);min-width:200px;max-width:320px}@keyframes themes-fade-in{0%{opacity:0}50%{opacity:0}100%{opacity:1}}.control-panel-themes .customize-themes-full-container.animate{animation:.6s themes-fade-in 1}.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count{animation:.6s themes-fade-in 1}.control-panel-themes .filter-themes-count{position:relative;float:right;line-height:2.6}.control-panel-themes .filter-themes-count .themes-displayed{font-weight:600;color:#50575e}.customize-themes-notifications{margin:0}.control-panel-themes .customize-themes-notifications .notice{margin:0 0 25px}.customize-themes-full-container .customize-themes-section{display:none!important;overflow:hidden}.customize-themes-full-container .customize-themes-section.current-section{display:list-item!important}.control-section .customize-section-text-before{padding:0 0 8px 15px;margin:15px 0 0;line-height:16px;border-bottom:1px solid #dcdcde;color:#50575e}.control-panel-themes .customize-themes-section-title{width:100%;background:#fff;box-shadow:none;outline:0;border-top:none;border-bottom:1px solid #dcdcde;border-left:4px solid #fff;border-right:none;cursor:pointer;padding:10px 15px;position:relative;text-align:left;font-size:14px;font-weight:600;color:#50575e;text-shadow:none}.control-panel-themes #accordion-section-installed_themes{border-top:1px solid #dcdcde}.control-panel-themes .theme-section{margin:0;position:relative}.control-panel-themes .customize-themes-section-title:focus,.control-panel-themes .customize-themes-section-title:hover{border-left-color:#2271b1;color:#2271b1;background:#f6f7f7}.customize-themes-section-title:not(.selected):after{content:"";display:block;position:absolute;top:9px;right:15px;width:18px;height:18px;border-radius:100%;border:1px solid #c3c4c7;background:#fff}.control-panel-themes .theme-section .customize-themes-section-title.selected:after{content:"\f147";font:16px/1 dashicons;box-sizing:border-box;width:20px;height:20px;padding:3px 3px 1px 1px;border-radius:100%;position:absolute;top:9px;right:15px;background:#2271b1;color:#fff}.control-panel-themes .customize-themes-section-title.selected{color:#2271b1}#customize-theme-controls .themes.accordion-section-content{position:relative;left:0;padding:0;width:100%}.loading .customize-themes-section .spinner{display:block;visibility:visible;position:relative;clear:both;width:20px;height:20px;left:calc(50% - 10px);float:none;margin-top:50px}.customize-themes-section .no-themes,.customize-themes-section .no-themes-local{display:none}.themes-section-installed_themes .theme .notice-success:not(.updated-message){display:none}.customize-control-theme .theme{width:100%;margin:0;border:1px solid #dcdcde;background:#fff}.customize-control-theme .theme .theme-actions,.customize-control-theme .theme .theme-name{background:#fff;border:none}.customize-control.customize-control-theme{box-sizing:border-box;width:25%;max-width:600px;margin:0 25px 25px 0;padding:0;clear:none}@media screen and (min-width:2101px){.customize-control.customize-control-theme{width:calc((100% - 125px)/ 5 - 1px)}}@media screen and (min-width:1601px) and (max-width:2100px){.customize-control.customize-control-theme{width:calc((100% - 100px)/ 4 - 1px)}}@media screen and (min-width:1201px) and (max-width:1600px){.customize-control.customize-control-theme{width:calc((100% - 75px)/ 3 - 1px)}}@media screen and (min-width:851px) and (max-width:1200px){.customize-control.customize-control-theme{width:calc((100% - 50px)/ 2 - 1px)}}@media screen and (max-width:850px){.customize-control.customize-control-theme{width:100%}}.wp-customizer .theme-browser .themes{padding:0 0 25px 25px;transition:.18s margin-top linear}.wp-customizer .theme-browser .theme .theme-actions{opacity:1}#customize-controls h3.theme-name{font-size:15px}#customize-controls .theme-overlay .theme-name{font-size:32px}.customize-preview-header.themes-filter-bar{position:fixed;top:0;left:300px;width:calc(100% - 300px);height:46px;background:#f0f0f1;z-index:10;padding:6px 25px;box-sizing:border-box;border-bottom:1px solid #dcdcde}@media screen and (min-width:1670px){.customize-preview-header.themes-filter-bar{width:82%;right:0;left:initial}}.themes-filter-bar .themes-filter-container{margin:0;padding:0}.themes-filter-bar .wp-filter-search{line-height:1.8;padding:6px 10px 6px 30px;max-width:100%;width:40%;min-width:300px;position:absolute;top:6px;left:25px;height:32px;margin:1px 0}@media screen and (max-height:540px),screen and (max-width:1018px){.customize-preview-header.themes-filter-bar{position:relative;left:0;width:100%;margin:0 0 25px}.filter-drawer{top:46px}.wp-customizer .theme-browser .themes{padding:0 0 25px 25px;overflow:hidden}.control-panel-themes .customize-themes-full-container{margin-top:0;padding:0;height:100%;width:calc(100% - 300px)}}@media screen and (max-width:1018px){.filter-drawer .filter-group{width:calc((100% - 50px)/ 2)}}@media screen and (max-width:900px){.customize-preview-header.themes-filter-bar{height:86px;padding-top:46px}.themes-filter-bar .wp-filter-search{width:calc(100% - 50px);margin:0;min-width:200px}.filter-drawer{top:86px}.control-panel-themes .filter-themes-count{float:left}}@media screen and (max-width:792px){.filter-drawer .filter-group{width:calc(100% - 25px)}}.control-panel-themes .customize-themes-mobile-back{display:none}@media screen and (max-width:600px){.filter-drawer{top:132px}.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes{display:block;float:right}.control-panel-themes .customize-themes-full-container{width:100%;margin:0;padding-top:46px;height:calc(100% - 46px);z-index:1;display:none}.showing-themes .control-panel-themes .customize-themes-full-container{display:block}.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back{display:block;position:fixed;top:0;left:0;background:#f0f0f1;color:#3c434a;border-radius:0;box-shadow:none;border:none;height:46px;width:100%;z-index:10;text-align:left;text-shadow:none;border-bottom:1px solid #dcdcde;border-left:4px solid transparent;margin:0;padding:0;font-size:0;overflow:hidden}.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before{left:0;top:0;height:46px;width:26px;display:block;line-height:2.3;padding:0 8px;border-right:1px solid #dcdcde}.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus,.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover{color:#2271b1;background:#f6f7f7;border-left-color:#2271b1;box-shadow:none;outline:2px solid transparent;outline-offset:-2px}.showing-themes #customize-header-actions{display:none}#customize-controls{width:100%}}.wp-customizer .theme-overlay{display:none}.wp-customizer.modal-open .theme-overlay{position:fixed;left:0;top:0;right:0;bottom:0;z-index:109}.wp-customizer.modal-open #customize-header-actions,.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after,.wp-customizer.modal-open .control-panel-themes .filter-themes-count{z-index:-1}.wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content{overflow:visible}.wp-customizer .theme-overlay .theme-backdrop{background:rgba(240,240,241,.75);position:fixed;z-index:110}.wp-customizer .theme-overlay .star-rating{float:left;margin-right:8px}.wp-customizer .theme-rating .num-ratings{line-height:20px}.wp-customizer .theme-overlay .theme-wrap{left:90px;right:90px;top:45px;bottom:45px;z-index:120}.wp-customizer .theme-overlay .theme-actions{text-align:right;padding:10px 25px;background:#f0f0f1;border-top:1px solid #dcdcde}.wp-customizer .theme-overlay .theme-actions .theme-install.preview{margin-left:8px}.control-panel-themes .theme-actions .delete-theme{left:15px;right:auto;bottom:auto;position:absolute}.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content{overflow:visible}.wp-customizer .theme-header{background:#f0f0f1}.wp-customizer .theme-overlay .theme-header .close:before,.wp-customizer .theme-overlay .theme-header button{color:#3c434a}.wp-customizer .theme-overlay .theme-header .close:focus,.wp-customizer .theme-overlay .theme-header .close:hover,.wp-customizer .theme-overlay .theme-header .left:focus,.wp-customizer .theme-overlay .theme-header .left:hover,.wp-customizer .theme-overlay .theme-header .right:focus,.wp-customizer .theme-overlay .theme-header .right:hover{background:#fff;border-bottom:4px solid #2271b1;color:#2271b1}.wp-customizer .theme-overlay .theme-header .close:focus:before,.wp-customizer .theme-overlay .theme-header .close:hover:before{color:#2271b1}.wp-customizer .theme-overlay .theme-header button.disabled,.wp-customizer .theme-overlay .theme-header button.disabled:focus,.wp-customizer .theme-overlay .theme-header button.disabled:hover{border-bottom:none;background:0 0;color:#c3c4c7}@media (max-width:850px),(max-height:472px){.wp-customizer .theme-overlay .theme-wrap{left:0;right:0;top:0;bottom:0}.wp-customizer .theme-browser .themes{padding-right:25px}}body.cheatin{font-size:medium;height:auto;background:#fff;border:1px solid #c3c4c7;margin:50px auto 2em;padding:1em 2em;max-width:700px;min-width:0;box-shadow:0 1px 1px rgba(0,0,0,.04)}body.cheatin h1{border-bottom:1px solid #dcdcde;clear:both;color:#50575e;font-size:24px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:30px 0 0;padding:0 0 7px}body.cheatin p{font-size:14px;line-height:1.5;margin:25px 0 20px}#customize-theme-controls .add-new-menu-item,#customize-theme-controls .add-new-widget{cursor:pointer;float:right;margin:0 0 0 10px;transition:all .2s;-webkit-user-select:none;user-select:none;outline:0}.reordering .add-new-menu-item,.reordering .add-new-widget{opacity:.2;pointer-events:none;cursor:not-allowed}#available-menu-items .new-content-item .add-content:before,.add-new-menu-item:before,.add-new-widget:before{content:"\f132";display:inline-block;position:relative;left:-2px;top:0;font:normal 20px/1 dashicons;vertical-align:middle;transition:all .2s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reorder-toggle{float:right;padding:5px 8px;text-decoration:none;cursor:pointer;outline:0}.reorder,.reordering .reorder-done{display:block;padding:5px 8px}.reorder-done,.reordering .reorder{display:none}.menu-item-reorder-nav button,.widget-reorder-nav span{position:relative;overflow:hidden;float:left;display:block;width:33px;height:43px;color:#8c8f94;text-indent:-9999px;cursor:pointer;outline:0}.menu-item-reorder-nav button{width:30px;height:40px;background:0 0;border:none;box-shadow:none}.menu-item-reorder-nav button:before,.widget-reorder-nav span:before{display:inline-block;position:absolute;top:0;right:0;width:100%;height:100%;font:normal 20px/43px dashicons;text-align:center;text-indent:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.menu-item-reorder-nav button:focus,.menu-item-reorder-nav button:hover,.widget-reorder-nav span:focus,.widget-reorder-nav span:hover{color:#1d2327;background:#f0f0f1}.menus-move-down:before,.move-widget-down:before{content:"\f347"}.menus-move-up:before,.move-widget-up:before{content:"\f343"}#customize-theme-controls .first-widget .move-widget-up,#customize-theme-controls .last-widget .move-widget-down,.move-down-disabled .menus-move-down,.move-left-disabled .menus-move-left,.move-right-disabled .menus-move-right,.move-up-disabled .menus-move-up{color:#dcdcde;background-color:#fff;cursor:default;pointer-events:none}.wp-full-overlay-main{right:auto;width:100%}.add-menu-toggle.open,.add-menu-toggle.open:hover,.adding-menu-items .add-new-menu-item,.adding-menu-items .add-new-menu-item:hover,body.adding-widget .add-new-widget,body.adding-widget .add-new-widget:hover{background:#f0f0f1;border-color:#8c8f94;color:#2c3338;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5)}#accordion-section-add_menu .add-new-menu-item.open:before,.adding-menu-items .add-new-menu-item:before,body.adding-widget .add-new-widget:before{transform:rotate(45deg)}#available-menu-items,#available-widgets{position:absolute;top:0;bottom:0;left:-301px;visibility:hidden;overflow-x:hidden;overflow-y:auto;width:300px;margin:0;z-index:4;background:#f0f0f1;transition:left .18s;border-right:1px solid #dcdcde}#available-menu-items .customize-section-title,#available-widgets .customize-section-title{display:none}#available-widgets-list{top:60px;position:absolute;overflow:auto;bottom:0;width:100%;border-top:1px solid #dcdcde}.no-widgets-found #available-widgets-list{border-top:none}#available-widgets-filter{position:fixed;top:0;z-index:1;width:300px;background:#f0f0f1}#available-menu-items-search .accordion-section-title,#available-widgets-filter{padding:13px 15px;box-sizing:border-box}#available-menu-items-search input,#available-widgets-filter input{width:100%;min-height:32px;margin:1px 0;padding:0 30px}#available-menu-items-search input::-ms-clear,#available-widgets-filter input::-ms-clear{display:none}#available-menu-items-search .search-icon,#available-widgets-filter .search-icon{display:block;position:absolute;top:15px;left:16px;width:30px;height:30px;line-height:2.1;text-align:center;color:#646970}#available-menu-items-search .clear-results,#available-widgets-filter .clear-results{position:absolute;top:15px;right:16px;width:30px;height:30px;padding:0;border:0;cursor:pointer;background:0 0;color:#d63638;text-decoration:none;outline:0}#available-menu-items-search .clear-results,#available-menu-items-search.loading .clear-results.is-visible,#available-widgets-filter .clear-results{display:none}#available-menu-items-search .clear-results.is-visible,#available-widgets-filter .clear-results.is-visible{display:block}#available-menu-items-search .clear-results:before,#available-widgets-filter .clear-results:before{content:"\f335";font:normal 20px/1 dashicons;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-menu-items-search .clear-results:focus,#available-menu-items-search .clear-results:hover,#available-widgets-filter .clear-results:focus,#available-widgets-filter .clear-results:hover{color:#d63638}#available-menu-items-search .clear-results:focus,#available-widgets-filter .clear-results:focus{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}#available-menu-items-search .search-icon:after,#available-widgets-filter .search-icon:after,.themes-filter-bar .search-icon:after{content:"\f179";font:normal 20px/1 dashicons;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.themes-filter-bar .search-icon{position:absolute;top:7px;left:26px;z-index:1;color:#646970;height:30px;width:30px;line-height:2;text-align:center}.no-widgets-found-message{display:none;margin:0;padding:0 15px;line-height:inherit}.no-widgets-found .no-widgets-found-message{display:block}#available-menu-items .item-top,#available-menu-items .item-top:hover,#available-widgets .widget-top,#available-widgets .widget-top:hover{border:none;background:0 0;box-shadow:none}#available-menu-items .item-tpl,#available-widgets .widget-tpl{position:relative;padding:15px 15px 15px 60px;background:#fff;border-bottom:1px solid #dcdcde;border-left:4px solid #fff;transition:.15s color ease-in-out,.15s background-color ease-in-out,.15s border-color ease-in-out;cursor:pointer;display:none}#available-menu-items .item,#available-widgets .widget{position:static}.customize-controls-preview-toggle{display:none}@media only screen and (max-width:782px){.wp-customizer .theme:not(.active):focus .theme-actions,.wp-customizer .theme:not(.active):hover .theme-actions{display:block}.wp-customizer .theme-browser .theme.active .theme-name span{display:inline}.customize-control-header button.random .dice{margin-top:0}.customize-control-checkbox .customize-inside-control-row,.customize-control-nav_menu_auto_add .customize-inside-control-row,.customize-control-radio .customize-inside-control-row{margin-left:32px}.customize-control-checkbox input,.customize-control-nav_menu_auto_add input,.customize-control-radio input{margin-left:-32px}.customize-control input[type=checkbox]+label+br,.customize-control input[type=radio]+label+br{line-height:2.5}.customize-control .date-time-fields select{height:39px}.date-time-fields .date-input.month{width:79px}.date-time-fields .date-input.day,.date-time-fields .date-input.hour,.date-time-fields .date-input.minute{width:55px}.date-time-fields .date-input.year{width:80px}#customize-control-changeset_preview_link a{bottom:16px}.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button{bottom:10px}.media-widget-control .media-widget-buttons .button.change-media,.media-widget-control .media-widget-buttons .button.edit-media,.media-widget-control .media-widget-buttons .button.select-media{margin-top:12px}.wp-core-ui .themes-filter-bar .feature-filter-toggle{margin:3px 0 3px 25px}}@media screen and (max-width:1200px){.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main{left:67%}}@media screen and (max-width:640px){.wp-full-overlay.collapsed #customize-controls{margin-left:0}.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content{bottom:0}.customize-controls-preview-toggle{display:block;position:absolute;top:0;left:48px;line-height:2.6;font-size:14px;padding:0 12px 4px;margin:0;height:45px;background:#f0f0f1;border:0;border-right:1px solid #dcdcde;border-top:4px solid #f0f0f1;color:#50575e;cursor:pointer;transition:color .1s ease-in-out,background .1s ease-in-out}#customize-footer-actions,.customize-controls-preview-toggle .controls,.preview-only .customize-controls-preview-toggle .preview,.preview-only .wp-full-overlay-sidebar-content{display:none}.preview-only #customize-save-button-wrapper{margin-top:-46px}.customize-controls-preview-toggle .controls:before,.customize-controls-preview-toggle .preview:before{font:normal 20px/1 dashicons;content:"\f177";position:relative;top:4px;margin-right:6px}.customize-controls-preview-toggle .controls:before{content:"\f540"}.preview-only #customize-controls{height:45px}.preview-only #customize-preview,.preview-only .customize-controls-preview-toggle .controls{display:block}.wp-core-ui.wp-customizer .button{min-height:30px;padding:0 14px;line-height:2;font-size:14px;vertical-align:middle}#customize-control-changeset_status .customize-inside-control-row{padding-top:15px}body.adding-menu-items div#available-menu-items,body.adding-widget div#available-widgets,body.outer-section-open div#customize-sidebar-outer-content{width:100%}#available-menu-items .customize-section-title,#available-widgets .customize-section-title{display:block;margin:0}#available-menu-items .customize-section-back,#available-widgets .customize-section-back{height:69px}#available-menu-items .customize-section-title h3,#available-widgets .customize-section-title h3{font-size:20px;font-weight:200;padding:9px 10px 12px 14px;margin:0;line-height:24px;color:#50575e;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#available-menu-items .customize-section-title .customize-action,#available-widgets .customize-section-title .customize-action{font-size:13px;display:block;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#available-widgets-filter{position:relative;width:100%;height:auto}#available-widgets-list{top:130px}#available-menu-items-search .clear-results,#available-menu-items-search .search-icon{top:85px}.reorder,.reordering .reorder-done{padding:8px}.wp-core-ui .themes-filter-bar .feature-filter-toggle{margin:0}}@media screen and (max-width:600px){.wp-full-overlay.expanded{margin-left:0}body.adding-menu-items div#available-menu-items,body.adding-widget div#available-widgets,body.outer-section-open div#customize-sidebar-outer-content{top:46px;z-index:10}body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content{left:-100%}body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content{left:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/customize-nav-menus-rtl.css b/tools/storybook/wordpress/css/customize-nav-menus-rtl.css new file mode 100644 index 00000000000..677a29e22e6 --- /dev/null +++ b/tools/storybook/wordpress/css/customize-nav-menus-rtl.css @@ -0,0 +1,884 @@ +/*! This file is auto-generated */ +#customize-theme-controls #accordion-section-menu_locations { + position: relative; + margin-top: 30px; +} + +#customize-theme-controls #accordion-section-menu_locations > .accordion-section-title { + border-bottom-color: #dcdcde; + margin-top: 15px; +} + +#customize-theme-controls .customize-section-title-nav_menus-heading, +#customize-theme-controls .customize-section-title-menu_locations-heading, +#customize-theme-controls .customize-section-title-menu_locations-description { + padding: 0 12px; +} + +#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description { + /* Override the default italic style for control descriptions */ + font-style: normal; +} + +.menu-in-location, +.menu-in-locations { + display: block; + font-weight: 600; + font-size: 10px; +} + +#customize-controls .theme-location-set, +#customize-controls .control-section .accordion-section-title:focus .menu-in-location, +#customize-controls .control-section .accordion-section-title:hover .menu-in-location { + color: #50575e; +} + +/* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */ +.customize-control-nav_menu_location .edit-menu, +.customize-control-nav_menu_location .create-menu { + margin-right: 6px; + vertical-align: middle; + line-height: 2.2; +} + +#customize-controls .customize-control-nav_menu_name { + margin-bottom: 12px; +} + +.customize-control-nav_menu_name p:last-of-type { + margin-bottom: 0; +} + +#customize-new-menu-submit { + float: left; + min-width: 85px; +} + +.wp-customizer .menu-item-bar .menu-item-handle, +.wp-customizer .menu-item-settings, +.wp-customizer .menu-item-settings .description-thin { + box-sizing: border-box; +} + +.wp-customizer .menu-item-bar { + margin: 0; +} + +.wp-customizer .menu-item-bar .menu-item-handle { + width: 100%; + max-width: 100%; + background: #fff; +} + +.wp-customizer .menu-item-handle .item-title { + margin-left: 0; +} + +.wp-customizer .menu-item-handle .item-type { + padding: 1px 5px 0 21px; + float: left; + text-align: left; +} + +.wp-customizer .menu-item-handle:hover { + z-index: 8; +} + +.customize-control-nav_menu_item.has-notifications .menu-item-handle { + border-right: 4px solid #72aee6; +} + +.wp-customizer .menu-item-settings { + max-width: 100%; + overflow: hidden; + z-index: 8; + padding: 10px; + background: #f0f0f1; + border: 1px solid #8c8f94; + border-top: none; +} + +.wp-customizer .menu-item-settings .description-thin { + width: 100%; + height: auto; + margin: 0 0 8px; +} + +.wp-customizer .menu-item-settings input[type="text"] { + width: 100%; +} + +.wp-customizer .menu-item-settings .submitbox { + margin: 0; + padding: 0; +} + +.wp-customizer .menu-item-settings .link-to-original { + padding: 5px 0; + border: none; + font-style: normal; + margin: 0; + width: 100%; +} + +.wp-customizer .menu-item .submitbox .submitdelete { + float: right; + margin: 6px 0 0; + padding: 0; + cursor: pointer; +} + + +/** + * Menu items reordering styles + */ + +.menu-item-reorder-nav { + display: none; + background-color: #fff; + position: absolute; + top: 0; + left: 0; +} + +.menus-move-left:before { + content: "\f345"; +} + +.menus-move-right:before { + content: "\f341"; +} + +.reordering .menu-item .item-controls, +.reordering .menu-item .item-type { + display: none; +} + +.reordering .menu-item-reorder-nav { + display: block; +} + +.customize-control input.menu-name-field { + width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */ +} + +.wp-customizer .menu-item .item-edit { + position: absolute; + left: -19px; + top: 2px; + display: block; + width: 30px; + height: 38px; + margin-left: 0 !important; + box-shadow: none; + outline: none; + overflow: hidden; + cursor: pointer; + text-align: center; +} + +.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before { + content: "\f142"; +} + +.wp-customizer .menu-item-settings p.description { + font-style: normal; +} + +.wp-customizer .menu-settings dl { + margin: 12px 0 0; + padding: 0; +} + +.wp-customizer .menu-settings .checkbox-input { + margin-top: 8px; +} + +.wp-customizer .menu-settings .menu-theme-locations { + border-top: 1px solid #c3c4c7; +} + +.wp-customizer .menu-settings { + margin-top: 36px; + border-top: none; +} + +.wp-customizer .menu-location-settings { + margin-top: 12px; + border-top: none; +} + +.wp-customizer .control-section-nav_menu .menu-location-settings { + margin-top: 24px; + border-top: 1px solid #dcdcde; +} + +.wp-customizer .control-section-nav_menu .menu-location-settings, +.customize-control-nav_menu_auto_add { + padding-top: 12px; +} + +.menu-location-settings .customize-control-checkbox .theme-location-set { + line-height: 1; +} + +.customize-control-nav_menu_auto_add label { + vertical-align: top; +} + +.menu-location-settings .new-menu-locations-widget-note { + display: block; +} + +.customize-control-menu { + margin-top: 4px; +} + +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle { + color: #50575e; +} + +/* Screen Options */ +.customize-screen-options-toggle { + background: none; + border: none; + color: #50575e; + cursor: pointer; + margin: 0; + padding: 20px; + position: absolute; + left: 0; + top: 30px; +} + +#customize-controls .customize-info .customize-help-toggle { + padding: 20px; +} + +#customize-controls .customize-info .customize-help-toggle:before { + padding: 4px; +} + +.customize-screen-options-toggle:hover, +.customize-screen-options-toggle:active, +.customize-screen-options-toggle:focus, +.active-menu-screen-options .customize-screen-options-toggle, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #2271b1; +} + +.customize-screen-options-toggle:focus, +#customize-controls .customize-info .customize-help-toggle:focus { + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.customize-screen-options-toggle:before { + -moz-osx-font-smoothing: grayscale; + border: none; + content: "\f111"; + display: block; + font: 18px/1 dashicons; + padding: 5px; + text-align: center; + text-decoration: none !important; + text-indent: 0; + right: 6px; + position: absolute; + top: 6px; +} + +.customize-screen-options-toggle:focus:before, +#customize-controls .customize-info .customize-help-toggle:focus:before { + border-radius: 100%; +} + +.wp-customizer #screen-options-wrap { + display: none; + background: #fff; + border-top: 1px solid #dcdcde; + padding: 4px 15px 15px; +} + +.wp-customizer .metabox-prefs label { + display: block; + padding-left: 0; + line-height: 30px; +} + +/* rework the arrow indicator implementation for NVDA bug same as #32715 */ +.wp-customizer .toggle-indicator { + display: inline-block; + font-size: 20px; + line-height: 1; +} + +.rtl .wp-customizer .toggle-indicator { + text-indent: 1px; /* account for the dashicon alignment */ +} + +.wp-customizer .menu-item .item-edit .toggle-indicator:before, +#available-menu-items .accordion-section-title .toggle-indicator:before { + content: "\f140"; + display: block; + padding: 1px 0 1px 2px; + speak: never; + border-radius: 50%; + color: #787c82; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +.control-section-nav_menu .field-link-target, +.control-section-nav_menu .field-title-attribute, +.control-section-nav_menu .field-css-classes, +.control-section-nav_menu .field-xfn, +.control-section-nav_menu .field-description { + display: none; +} + +.control-section-nav_menu.field-link-target-active .field-link-target, +.control-section-nav_menu.field-title-attribute-active .field-title-attribute, +.control-section-nav_menu.field-css-classes-active .field-css-classes, +.control-section-nav_menu.field-xfn-active .field-xfn, +.control-section-nav_menu.field-description-active .field-description { + display: block; +} + +/* WARNING: The 20px factor is hard-coded in JS. */ +.menu-item-depth-0 { margin-right: 0; } +.menu-item-depth-1 { margin-right: 20px; } +.menu-item-depth-2 { margin-right: 40px; } +.menu-item-depth-3 { margin-right: 60px; } +.menu-item-depth-4 { margin-right: 80px; } +.menu-item-depth-5 { margin-right: 100px; } +.menu-item-depth-6 { margin-right: 120px; } +.menu-item-depth-7 { margin-right: 140px; } +.menu-item-depth-8 { margin-right: 160px; } /* Not likely to be used or useful beyond this depth */ +.menu-item-depth-9 { margin-right: 180px; } +.menu-item-depth-10 { margin-right: 200px; } +.menu-item-depth-11 { margin-right: 220px; } + +/* @todo handle .menu-item-settings width */ +.menu-item-depth-0 > .menu-item-bar { margin-left: 0; } +.menu-item-depth-1 > .menu-item-bar { margin-left: 20px; } +.menu-item-depth-2 > .menu-item-bar { margin-left: 40px; } +.menu-item-depth-3 > .menu-item-bar { margin-left: 60px; } +.menu-item-depth-4 > .menu-item-bar { margin-left: 80px; } +.menu-item-depth-5 > .menu-item-bar { margin-left: 100px; } +.menu-item-depth-6 > .menu-item-bar { margin-left: 120px; } +.menu-item-depth-7 > .menu-item-bar { margin-left: 140px; } +.menu-item-depth-8 > .menu-item-bar { margin-left: 160px; } +.menu-item-depth-9 > .menu-item-bar { margin-left: 180px; } +.menu-item-depth-10 > .menu-item-bar { margin-left: 200px; } +.menu-item-depth-11 > .menu-item-bar { margin-left: 220px; } + +/* Submenu left margin. */ +.menu-item-depth-0 .menu-item-transport { margin-right: 0; } +.menu-item-depth-1 .menu-item-transport { margin-right: -20px; } +.menu-item-depth-3 .menu-item-transport { margin-right: -60px; } +.menu-item-depth-4 .menu-item-transport { margin-right: -80px; } +.menu-item-depth-2 .menu-item-transport { margin-right: -40px; } +.menu-item-depth-5 .menu-item-transport { margin-right: -100px; } +.menu-item-depth-6 .menu-item-transport { margin-right: -120px; } +.menu-item-depth-7 .menu-item-transport { margin-right: -140px; } +.menu-item-depth-8 .menu-item-transport { margin-right: -160px; } +.menu-item-depth-9 .menu-item-transport { margin-right: -180px; } +.menu-item-depth-10 .menu-item-transport { margin-right: -200px; } +.menu-item-depth-11 .menu-item-transport { margin-right: -220px; } + +/* WARNING: The 20px factor is hard-coded in JS. */ +.reordering .menu-item-depth-0 { margin-right: 0; } +.reordering .menu-item-depth-1 { margin-right: 15px; } +.reordering .menu-item-depth-2 { margin-right: 30px; } +.reordering .menu-item-depth-3 { margin-right: 45px; } +.reordering .menu-item-depth-4 { margin-right: 60px; } +.reordering .menu-item-depth-5 { margin-right: 75px; } +.reordering .menu-item-depth-6 { margin-right: 90px; } +.reordering .menu-item-depth-7 { margin-right: 105px; } +.reordering .menu-item-depth-8 { margin-right: 120px; } /* Not likely to be used or useful beyond this depth */ +.reordering .menu-item-depth-9 { margin-right: 135px; } +.reordering .menu-item-depth-10 { margin-right: 150px; } +.reordering .menu-item-depth-11 { margin-right: 165px; } + +.reordering .menu-item-depth-0 > .menu-item-bar { margin-left: 0; } +.reordering .menu-item-depth-1 > .menu-item-bar { margin-left: 15px; } +.reordering .menu-item-depth-2 > .menu-item-bar { margin-left: 30px; } +.reordering .menu-item-depth-3 > .menu-item-bar { margin-left: 45px; } +.reordering .menu-item-depth-4 > .menu-item-bar { margin-left: 60px; } +.reordering .menu-item-depth-5 > .menu-item-bar { margin-left: 75px; } +.reordering .menu-item-depth-6 > .menu-item-bar { margin-left: 90px; } +.reordering .menu-item-depth-7 > .menu-item-bar { margin-left: 105px; } +.reordering .menu-item-depth-8 > .menu-item-bar { margin-left: 120px; } +.reordering .menu-item-depth-9 > .menu-item-bar { margin-left: 135px; } +.reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; } +.reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; } + +.control-section-nav_menu.menu .menu-item-edit-active { + margin-right: 0; +} + +.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar { + margin-left: 0; +} + +.control-section-nav_menu.menu .sortable-placeholder { + margin-top: 0; + margin-bottom: 1px; + max-width: calc(100% - 2px); + float: right; + display: list-item; + border-color: #a7aaad; +} + +.menu-item-transport li.customize-control { + float: none; +} + +.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar { + margin-top: 0; +} + +/** + * Add-menu-items mode + */ + +.adding-menu-items .control-section { + opacity: .4; +} + +.adding-menu-items .control-panel.control-section, +.adding-menu-items .control-section.open { + opacity: 1; +} + +.menu-item-bar .item-delete { + color: #d63638; + position: absolute; + top: 2px; + left: -19px; + width: 30px; + height: 38px; + cursor: pointer; + display: none; +} + +.menu-item-bar .item-delete:before { + content: "\f335"; + position: absolute; + top: 9px; + right: 5px; + border-radius: 50%; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.menu-item-bar .item-delete:hover, +.menu-item-bar .item-delete:focus { + box-shadow: none; + outline: none; + color: #d63638; +} + +.adding-menu-items .menu-item-bar .item-edit { + display: none; +} + +.adding-menu-items .menu-item-bar .item-delete { + display: block; +} + +/** + * Styles for menu-item addition panel + */ + +#available-menu-items.opening { + overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ +} + +#available-menu-items #available-menu-items-search.open { + height: 100%; + border-bottom: none; +} + +#available-menu-items .accordion-section-title { + border-right: none; + border-left: none; + background: #fff; + transition: background-color 0.15s; + /* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */ + -webkit-user-select: auto; + user-select: auto; +} + +#available-menu-items .open .accordion-section-title, +#available-menu-items #available-menu-items-search .accordion-section-title { + background: #f0f0f1; +} + +/* rework the arrow indicator implementation for NVDA bug see #32715 */ +#available-menu-items .accordion-section-title:after { + content: none !important; +} + +#available-menu-items .accordion-section-title:hover .toggle-indicator:before, +#available-menu-items .button-link:hover .toggle-indicator:before, +#available-menu-items .button-link:focus .toggle-indicator:before { + color: #1d2327; +} + +#available-menu-items .open .accordion-section-title .toggle-indicator:before { + content: "\f142"; + color: #1d2327; +} + +#available-menu-items .available-menu-items-list { + overflow-y: auto; + max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */ + background: transparent; +} + +#available-menu-items .accordion-section-title button { + display: block; + width: 28px; + height: 35px; + position: absolute; + top: 5px; + left: 5px; + box-shadow: none; + outline: none; + cursor: pointer; + text-align: center; +} + +#available-menu-items .accordion-section-title .no-items, +#available-menu-items .cannot-expand .accordion-section-title .spinner, +#available-menu-items .cannot-expand .accordion-section-title > button { + display: none; +} + +#available-menu-items-search.cannot-expand .accordion-section-title .spinner { + display: block; +} + +#available-menu-items .cannot-expand .accordion-section-title .no-items { + float: left; + color: #50575e; + font-weight: 400; + margin-right: 5px; +} + +#available-menu-items .accordion-section-content { + max-height: 290px; + margin: 0; + padding: 0; + position: relative; + background: transparent; +} + +#available-menu-items .accordion-section-content .available-menu-items-list { + margin: 0 0 45px; + padding: 1px 15px 15px; +} + +#available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */ + margin-bottom: 0; +} + +#new-custom-menu-item .accordion-section-content { + padding: 0 15px 15px; +} + +#available-menu-items .menu-item-tpl { + margin: 0; +} + +#custom-menu-item-name.invalid, +#custom-menu-item-url.invalid, +.edit-menu-item-url.invalid, +.menu-name-field.invalid, +.menu-name-field.invalid:focus, +#available-menu-items .new-content-item .create-item-input.invalid, +#available-menu-items .new-content-item .create-item-input.invalid:focus { + border: 1px solid #d63638; +} + +#available-menu-items .menu-item-handle .item-type { + padding-left: 0; +} + +#available-menu-items .menu-item-handle .item-title { + padding-right: 20px; +} + +#available-menu-items .menu-item-handle { + cursor: pointer; +} + +#available-menu-items .menu-item-handle { + box-shadow: none; + margin-top: -1px; +} + +#available-menu-items .menu-item-handle:hover { + z-index: 1; +} + +#available-menu-items .item-title h4 { + padding: 0 0 5px; + font-size: 14px; +} + +#available-menu-items .item-add { + position: absolute; + top: 1px; + right: 1px; + color: #8c8f94; + width: 30px; + height: 38px; + box-shadow: none; + outline: none; + cursor: pointer; + text-align: center; +} + +#available-menu-items .menu-item-handle .item-add:focus { + color: #1d2327; +} + +#available-menu-items .item-add:before { + content: "\f543"; + position: relative; + right: 2px; + top: 3px; + display: inline-block; + height: 20px; + border-radius: 50%; + font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */ +} + +#available-menu-items .menu-item-handle.item-added .item-type, +#available-menu-items .menu-item-handle.item-added .item-title, +#available-menu-items .menu-item-handle.item-added:hover .item-add, +#available-menu-items .menu-item-handle.item-added .item-add:focus { + color: #8c8f94; +} + +#available-menu-items .menu-item-handle.item-added .item-add:before { + content: "\f147"; +} + +#available-menu-items .accordion-section-title.loading .spinner, +#available-menu-items-search.loading .accordion-section-title .spinner { + visibility: visible; + margin: 0 20px; +} + +#available-menu-items-search .spinner { + position: absolute; + top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */ + left: 21px; + margin: 0 !important; +} + +/* search results list */ +#available-menu-items #available-menu-items-search .accordion-section-content { + position: absolute; + right: 0; + top: 60px; /* below title div / search input */ + bottom: 0; /* 100% height that still triggers lazy load */ + max-height: none; + width: 100%; + padding: 1px 15px 15px; + box-sizing: border-box; +} + +#available-menu-items-search .nothing-found { + /* Compensate the 1px top padding of the container. */ + margin-top: -1px; +} + +#available-menu-items-search .accordion-section-title:after { + display: none; +} + +#available-menu-items-search .accordion-section-content:empty { + min-height: 0; + padding: 0; +} + +#available-menu-items-search.loading .accordion-section-content div { + opacity: .5; +} + +#available-menu-items-search.loading.loading-more .accordion-section-content div { + opacity: 1; +} + +#customize-preview { + transition: all 0.2s; +} + +body.adding-menu-items #available-menu-items { + right: 0; + visibility: visible; +} + +body.adding-menu-items .wp-full-overlay-main { + right: 300px; +} + +body.adding-menu-items #customize-preview { + opacity: 0.4; +} + +body.adding-menu-items #customize-preview iframe { + pointer-events: none; +} + +.menu-item-handle .spinner { + display: none; + float: right; + margin: 0 0 0 8px; +} + +.nav-menu-inserted-item-loading .spinner { + display: block; +} + +.nav-menu-inserted-item-loading .menu-item-handle .item-type { + padding: 0 8px 0 0; +} + +.nav-menu-inserted-item-loading .menu-item-handle, +.added-menu-item .menu-item-handle.loading { + padding: 10px 8px 10px 15px; + cursor: default; + opacity: .5; + background: #fff; + color: #787c82; +} + +.added-menu-item .menu-item-handle { + transition-property: opacity, background, color; + transition-duration: 1.25s; + transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */ +} + +/* Add/delete Menus */ + +#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title { + border-bottom-color: #dcdcde; +} + +/* @todo update selector */ +#accordion-section-add_menu { + margin: 15px 12px; +} + +#accordion-section-add_menu h3 { + text-align: left; +} + +#accordion-section-add_menu h3, +#accordion-section-add_menu .customize-add-menu-button { + margin: 0; +} + +#accordion-section-add_menu .customize-add-menu-button { + font-weight: 400; +} + +#create-new-menu-submit { + float: left; + margin: 0 0 12px; +} + +.menu-delete-item { + float: right; + padding: 1em 0; + width: 100%; +} + +.assigned-menu-locations-title p { + margin: 0 0 8px; +} + +li.assigned-to-menu-location .menu-delete-item { + display: none; +} + +li.assigned-to-menu-location .add-new-menu-item { + margin-bottom: 1em; +} + +.menu-item-handle { + margin-top: -1px; +} +.ui-sortable-disabled .menu-item-handle { + cursor: default; +} + +.menu-item-handle:hover { + position: relative; + z-index: 10; + color: #2271b1; +} + +.menu-item-handle:hover .item-type, +.menu-item-handle:hover .item-edit, +#available-menu-items .menu-item-handle:hover .item-add { + color: #2271b1; +} + +.menu-item-edit-active .menu-item-handle { + border-color: #8c8f94; + border-bottom: none; +} + +.customize-control-nav_menu_item { + margin-bottom: 0; +} + +.customize-control-nav_menu .new-menu-item-invitation { + margin-top: 0; + margin-bottom: 0; +} + +.customize-control-nav_menu .customize-control-nav_menu-buttons { + margin-top: 12px; +} + +/** + * box-shadows + */ + +.wp-customizer .menu-item .submitbox .submitdelete:focus, +.customize-screen-options-toggle:focus:before, +#customize-controls .customize-info .customize-help-toggle:focus:before, +.wp-customizer button:focus .toggle-indicator:before, +.menu-delete:focus, +.menu-item-bar .item-delete:focus:before, +#available-menu-items .item-add:focus:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + + +@media screen and (max-width: 782px) { + #available-menu-items #available-menu-items-search .accordion-section-content { + top: 63px; + } +} + +@media screen and (max-width: 640px) { + #available-menu-items #available-menu-items-search .accordion-section-content { + top: 130px; + } +} diff --git a/tools/storybook/wordpress/css/customize-nav-menus-rtl.min.css b/tools/storybook/wordpress/css/customize-nav-menus-rtl.min.css new file mode 100644 index 00000000000..e5af0a370ac --- /dev/null +++ b/tools/storybook/wordpress/css/customize-nav-menus-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#customize-theme-controls #accordion-section-menu_locations{position:relative;margin-top:30px}#customize-theme-controls #accordion-section-menu_locations>.accordion-section-title{border-bottom-color:#dcdcde;margin-top:15px}#customize-theme-controls .customize-section-title-menu_locations-description,#customize-theme-controls .customize-section-title-menu_locations-heading,#customize-theme-controls .customize-section-title-nav_menus-heading{padding:0 12px}#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description{font-style:normal}.menu-in-location,.menu-in-locations{display:block;font-weight:600;font-size:10px}#customize-controls .control-section .accordion-section-title:focus .menu-in-location,#customize-controls .control-section .accordion-section-title:hover .menu-in-location,#customize-controls .theme-location-set{color:#50575e}.customize-control-nav_menu_location .create-menu,.customize-control-nav_menu_location .edit-menu{margin-right:6px;vertical-align:middle;line-height:2.2}#customize-controls .customize-control-nav_menu_name{margin-bottom:12px}.customize-control-nav_menu_name p:last-of-type{margin-bottom:0}#customize-new-menu-submit{float:left;min-width:85px}.wp-customizer .menu-item-bar .menu-item-handle,.wp-customizer .menu-item-settings,.wp-customizer .menu-item-settings .description-thin{box-sizing:border-box}.wp-customizer .menu-item-bar{margin:0}.wp-customizer .menu-item-bar .menu-item-handle{width:100%;max-width:100%;background:#fff}.wp-customizer .menu-item-handle .item-title{margin-left:0}.wp-customizer .menu-item-handle .item-type{padding:1px 5px 0 21px;float:left;text-align:left}.wp-customizer .menu-item-handle:hover{z-index:8}.customize-control-nav_menu_item.has-notifications .menu-item-handle{border-right:4px solid #72aee6}.wp-customizer .menu-item-settings{max-width:100%;overflow:hidden;z-index:8;padding:10px;background:#f0f0f1;border:1px solid #8c8f94;border-top:none}.wp-customizer .menu-item-settings .description-thin{width:100%;height:auto;margin:0 0 8px}.wp-customizer .menu-item-settings input[type=text]{width:100%}.wp-customizer .menu-item-settings .submitbox{margin:0;padding:0}.wp-customizer .menu-item-settings .link-to-original{padding:5px 0;border:none;font-style:normal;margin:0;width:100%}.wp-customizer .menu-item .submitbox .submitdelete{float:right;margin:6px 0 0;padding:0;cursor:pointer}.menu-item-reorder-nav{display:none;background-color:#fff;position:absolute;top:0;left:0}.menus-move-left:before{content:"\f345"}.menus-move-right:before{content:"\f341"}.reordering .menu-item .item-controls,.reordering .menu-item .item-type{display:none}.reordering .menu-item-reorder-nav{display:block}.customize-control input.menu-name-field{width:100%}.wp-customizer .menu-item .item-edit{position:absolute;left:-19px;top:2px;display:block;width:30px;height:38px;margin-left:0!important;box-shadow:none;outline:0;overflow:hidden;cursor:pointer;text-align:center}.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before{content:"\f142"}.wp-customizer .menu-item-settings p.description{font-style:normal}.wp-customizer .menu-settings dl{margin:12px 0 0;padding:0}.wp-customizer .menu-settings .checkbox-input{margin-top:8px}.wp-customizer .menu-settings .menu-theme-locations{border-top:1px solid #c3c4c7}.wp-customizer .menu-settings{margin-top:36px;border-top:none}.wp-customizer .menu-location-settings{margin-top:12px;border-top:none}.wp-customizer .control-section-nav_menu .menu-location-settings{margin-top:24px;border-top:1px solid #dcdcde}.customize-control-nav_menu_auto_add,.wp-customizer .control-section-nav_menu .menu-location-settings{padding-top:12px}.menu-location-settings .customize-control-checkbox .theme-location-set{line-height:1}.customize-control-nav_menu_auto_add label{vertical-align:top}.menu-location-settings .new-menu-locations-widget-note{display:block}.customize-control-menu{margin-top:4px}#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle{color:#50575e}.customize-screen-options-toggle{background:0 0;border:none;color:#50575e;cursor:pointer;margin:0;padding:20px;position:absolute;left:0;top:30px}#customize-controls .customize-info .customize-help-toggle{padding:20px}#customize-controls .customize-info .customize-help-toggle:before{padding:4px}#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.active-menu-screen-options .customize-screen-options-toggle,.customize-screen-options-toggle:active,.customize-screen-options-toggle:focus,.customize-screen-options-toggle:hover{color:#2271b1}#customize-controls .customize-info .customize-help-toggle:focus,.customize-screen-options-toggle:focus{outline:1px solid transparent}.customize-screen-options-toggle:before{-moz-osx-font-smoothing:grayscale;border:none;content:"\f111";display:block;font:18px/1 dashicons;padding:5px;text-align:center;text-decoration:none!important;text-indent:0;right:6px;position:absolute;top:6px}#customize-controls .customize-info .customize-help-toggle:focus:before,.customize-screen-options-toggle:focus:before{border-radius:100%}.wp-customizer #screen-options-wrap{display:none;background:#fff;border-top:1px solid #dcdcde;padding:4px 15px 15px}.wp-customizer .metabox-prefs label{display:block;padding-left:0;line-height:30px}.wp-customizer .toggle-indicator{display:inline-block;font-size:20px;line-height:1}.rtl .wp-customizer .toggle-indicator{text-indent:1px}#available-menu-items .accordion-section-title .toggle-indicator:before,.wp-customizer .menu-item .item-edit .toggle-indicator:before{content:"\f140";display:block;padding:1px 0 1px 2px;speak:never;border-radius:50%;color:#787c82;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important}.control-section-nav_menu .field-css-classes,.control-section-nav_menu .field-description,.control-section-nav_menu .field-link-target,.control-section-nav_menu .field-title-attribute,.control-section-nav_menu .field-xfn{display:none}.control-section-nav_menu.field-css-classes-active .field-css-classes,.control-section-nav_menu.field-description-active .field-description,.control-section-nav_menu.field-link-target-active .field-link-target,.control-section-nav_menu.field-title-attribute-active .field-title-attribute,.control-section-nav_menu.field-xfn-active .field-xfn{display:block}.menu-item-depth-0{margin-right:0}.menu-item-depth-1{margin-right:20px}.menu-item-depth-2{margin-right:40px}.menu-item-depth-3{margin-right:60px}.menu-item-depth-4{margin-right:80px}.menu-item-depth-5{margin-right:100px}.menu-item-depth-6{margin-right:120px}.menu-item-depth-7{margin-right:140px}.menu-item-depth-8{margin-right:160px}.menu-item-depth-9{margin-right:180px}.menu-item-depth-10{margin-right:200px}.menu-item-depth-11{margin-right:220px}.menu-item-depth-0>.menu-item-bar{margin-left:0}.menu-item-depth-1>.menu-item-bar{margin-left:20px}.menu-item-depth-2>.menu-item-bar{margin-left:40px}.menu-item-depth-3>.menu-item-bar{margin-left:60px}.menu-item-depth-4>.menu-item-bar{margin-left:80px}.menu-item-depth-5>.menu-item-bar{margin-left:100px}.menu-item-depth-6>.menu-item-bar{margin-left:120px}.menu-item-depth-7>.menu-item-bar{margin-left:140px}.menu-item-depth-8>.menu-item-bar{margin-left:160px}.menu-item-depth-9>.menu-item-bar{margin-left:180px}.menu-item-depth-10>.menu-item-bar{margin-left:200px}.menu-item-depth-11>.menu-item-bar{margin-left:220px}.menu-item-depth-0 .menu-item-transport{margin-right:0}.menu-item-depth-1 .menu-item-transport{margin-right:-20px}.menu-item-depth-3 .menu-item-transport{margin-right:-60px}.menu-item-depth-4 .menu-item-transport{margin-right:-80px}.menu-item-depth-2 .menu-item-transport{margin-right:-40px}.menu-item-depth-5 .menu-item-transport{margin-right:-100px}.menu-item-depth-6 .menu-item-transport{margin-right:-120px}.menu-item-depth-7 .menu-item-transport{margin-right:-140px}.menu-item-depth-8 .menu-item-transport{margin-right:-160px}.menu-item-depth-9 .menu-item-transport{margin-right:-180px}.menu-item-depth-10 .menu-item-transport{margin-right:-200px}.menu-item-depth-11 .menu-item-transport{margin-right:-220px}.reordering .menu-item-depth-0{margin-right:0}.reordering .menu-item-depth-1{margin-right:15px}.reordering .menu-item-depth-2{margin-right:30px}.reordering .menu-item-depth-3{margin-right:45px}.reordering .menu-item-depth-4{margin-right:60px}.reordering .menu-item-depth-5{margin-right:75px}.reordering .menu-item-depth-6{margin-right:90px}.reordering .menu-item-depth-7{margin-right:105px}.reordering .menu-item-depth-8{margin-right:120px}.reordering .menu-item-depth-9{margin-right:135px}.reordering .menu-item-depth-10{margin-right:150px}.reordering .menu-item-depth-11{margin-right:165px}.reordering .menu-item-depth-0>.menu-item-bar{margin-left:0}.reordering .menu-item-depth-1>.menu-item-bar{margin-left:15px}.reordering .menu-item-depth-2>.menu-item-bar{margin-left:30px}.reordering .menu-item-depth-3>.menu-item-bar{margin-left:45px}.reordering .menu-item-depth-4>.menu-item-bar{margin-left:60px}.reordering .menu-item-depth-5>.menu-item-bar{margin-left:75px}.reordering .menu-item-depth-6>.menu-item-bar{margin-left:90px}.reordering .menu-item-depth-7>.menu-item-bar{margin-left:105px}.reordering .menu-item-depth-8>.menu-item-bar{margin-left:120px}.reordering .menu-item-depth-9>.menu-item-bar{margin-left:135px}.reordering .menu-item-depth-10>.menu-item-bar{margin-left:150px}.reordering .menu-item-depth-11>.menu-item-bar{margin-left:165px}.control-section-nav_menu.menu .menu-item-edit-active{margin-right:0}.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar{margin-left:0}.control-section-nav_menu.menu .sortable-placeholder{margin-top:0;margin-bottom:1px;max-width:calc(100% - 2px);float:right;display:list-item;border-color:#a7aaad}.menu-item-transport li.customize-control{float:none}.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar{margin-top:0}.adding-menu-items .control-section{opacity:.4}.adding-menu-items .control-panel.control-section,.adding-menu-items .control-section.open{opacity:1}.menu-item-bar .item-delete{color:#d63638;position:absolute;top:2px;left:-19px;width:30px;height:38px;cursor:pointer;display:none}.menu-item-bar .item-delete:before{content:"\f335";position:absolute;top:9px;right:5px;border-radius:50%;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.menu-item-bar .item-delete:focus,.menu-item-bar .item-delete:hover{box-shadow:none;outline:0;color:#d63638}.adding-menu-items .menu-item-bar .item-edit{display:none}.adding-menu-items .menu-item-bar .item-delete{display:block}#available-menu-items.opening{overflow-y:hidden}#available-menu-items #available-menu-items-search.open{height:100%;border-bottom:none}#available-menu-items .accordion-section-title{border-right:none;border-left:none;background:#fff;transition:background-color .15s;-webkit-user-select:auto;user-select:auto}#available-menu-items #available-menu-items-search .accordion-section-title,#available-menu-items .open .accordion-section-title{background:#f0f0f1}#available-menu-items .accordion-section-title:after{content:none!important}#available-menu-items .accordion-section-title:hover .toggle-indicator:before,#available-menu-items .button-link:focus .toggle-indicator:before,#available-menu-items .button-link:hover .toggle-indicator:before{color:#1d2327}#available-menu-items .open .accordion-section-title .toggle-indicator:before{content:"\f142";color:#1d2327}#available-menu-items .available-menu-items-list{overflow-y:auto;max-height:200px;background:0 0}#available-menu-items .accordion-section-title button{display:block;width:28px;height:35px;position:absolute;top:5px;left:5px;box-shadow:none;outline:0;cursor:pointer;text-align:center}#available-menu-items .accordion-section-title .no-items,#available-menu-items .cannot-expand .accordion-section-title .spinner,#available-menu-items .cannot-expand .accordion-section-title>button{display:none}#available-menu-items-search.cannot-expand .accordion-section-title .spinner{display:block}#available-menu-items .cannot-expand .accordion-section-title .no-items{float:left;color:#50575e;font-weight:400;margin-right:5px}#available-menu-items .accordion-section-content{max-height:290px;margin:0;padding:0;position:relative;background:0 0}#available-menu-items .accordion-section-content .available-menu-items-list{margin:0 0 45px;padding:1px 15px 15px}#available-menu-items .accordion-section-content .available-menu-items-list:only-child{margin-bottom:0}#new-custom-menu-item .accordion-section-content{padding:0 15px 15px}#available-menu-items .menu-item-tpl{margin:0}#available-menu-items .new-content-item .create-item-input.invalid,#available-menu-items .new-content-item .create-item-input.invalid:focus,#custom-menu-item-name.invalid,#custom-menu-item-url.invalid,.edit-menu-item-url.invalid,.menu-name-field.invalid,.menu-name-field.invalid:focus{border:1px solid #d63638}#available-menu-items .menu-item-handle .item-type{padding-left:0}#available-menu-items .menu-item-handle .item-title{padding-right:20px}#available-menu-items .menu-item-handle{cursor:pointer}#available-menu-items .menu-item-handle{box-shadow:none;margin-top:-1px}#available-menu-items .menu-item-handle:hover{z-index:1}#available-menu-items .item-title h4{padding:0 0 5px;font-size:14px}#available-menu-items .item-add{position:absolute;top:1px;right:1px;color:#8c8f94;width:30px;height:38px;box-shadow:none;outline:0;cursor:pointer;text-align:center}#available-menu-items .menu-item-handle .item-add:focus{color:#1d2327}#available-menu-items .item-add:before{content:"\f543";position:relative;right:2px;top:3px;display:inline-block;height:20px;border-radius:50%;font:normal 20px/1.05 dashicons}#available-menu-items .menu-item-handle.item-added .item-add:focus,#available-menu-items .menu-item-handle.item-added .item-title,#available-menu-items .menu-item-handle.item-added .item-type,#available-menu-items .menu-item-handle.item-added:hover .item-add{color:#8c8f94}#available-menu-items .menu-item-handle.item-added .item-add:before{content:"\f147"}#available-menu-items .accordion-section-title.loading .spinner,#available-menu-items-search.loading .accordion-section-title .spinner{visibility:visible;margin:0 20px}#available-menu-items-search .spinner{position:absolute;top:20px;left:21px;margin:0!important}#available-menu-items #available-menu-items-search .accordion-section-content{position:absolute;right:0;top:60px;bottom:0;max-height:none;width:100%;padding:1px 15px 15px;box-sizing:border-box}#available-menu-items-search .nothing-found{margin-top:-1px}#available-menu-items-search .accordion-section-title:after{display:none}#available-menu-items-search .accordion-section-content:empty{min-height:0;padding:0}#available-menu-items-search.loading .accordion-section-content div{opacity:.5}#available-menu-items-search.loading.loading-more .accordion-section-content div{opacity:1}#customize-preview{transition:all .2s}body.adding-menu-items #available-menu-items{right:0;visibility:visible}body.adding-menu-items .wp-full-overlay-main{right:300px}body.adding-menu-items #customize-preview{opacity:.4}body.adding-menu-items #customize-preview iframe{pointer-events:none}.menu-item-handle .spinner{display:none;float:right;margin:0 0 0 8px}.nav-menu-inserted-item-loading .spinner{display:block}.nav-menu-inserted-item-loading .menu-item-handle .item-type{padding:0 8px 0 0}.added-menu-item .menu-item-handle.loading,.nav-menu-inserted-item-loading .menu-item-handle{padding:10px 8px 10px 15px;cursor:default;opacity:.5;background:#fff;color:#787c82}.added-menu-item .menu-item-handle{transition-property:opacity,background,color;transition-duration:1.25s;transition-timing-function:cubic-bezier(.25,-2.5,.75,8)}#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title{border-bottom-color:#dcdcde}#accordion-section-add_menu{margin:15px 12px}#accordion-section-add_menu h3{text-align:left}#accordion-section-add_menu .customize-add-menu-button,#accordion-section-add_menu h3{margin:0}#accordion-section-add_menu .customize-add-menu-button{font-weight:400}#create-new-menu-submit{float:left;margin:0 0 12px}.menu-delete-item{float:right;padding:1em 0;width:100%}.assigned-menu-locations-title p{margin:0 0 8px}li.assigned-to-menu-location .menu-delete-item{display:none}li.assigned-to-menu-location .add-new-menu-item{margin-bottom:1em}.menu-item-handle{margin-top:-1px}.ui-sortable-disabled .menu-item-handle{cursor:default}.menu-item-handle:hover{position:relative;z-index:10;color:#2271b1}#available-menu-items .menu-item-handle:hover .item-add,.menu-item-handle:hover .item-edit,.menu-item-handle:hover .item-type{color:#2271b1}.menu-item-edit-active .menu-item-handle{border-color:#8c8f94;border-bottom:none}.customize-control-nav_menu_item{margin-bottom:0}.customize-control-nav_menu .new-menu-item-invitation{margin-top:0;margin-bottom:0}.customize-control-nav_menu .customize-control-nav_menu-buttons{margin-top:12px}#available-menu-items .item-add:focus:before,#customize-controls .customize-info .customize-help-toggle:focus:before,.customize-screen-options-toggle:focus:before,.menu-delete:focus,.menu-item-bar .item-delete:focus:before,.wp-customizer .menu-item .submitbox .submitdelete:focus,.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}@media screen and (max-width:782px){#available-menu-items #available-menu-items-search .accordion-section-content{top:63px}}@media screen and (max-width:640px){#available-menu-items #available-menu-items-search .accordion-section-content{top:130px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/customize-nav-menus.css b/tools/storybook/wordpress/css/customize-nav-menus.css new file mode 100644 index 00000000000..46ac3066efd --- /dev/null +++ b/tools/storybook/wordpress/css/customize-nav-menus.css @@ -0,0 +1,883 @@ +#customize-theme-controls #accordion-section-menu_locations { + position: relative; + margin-top: 30px; +} + +#customize-theme-controls #accordion-section-menu_locations > .accordion-section-title { + border-bottom-color: #dcdcde; + margin-top: 15px; +} + +#customize-theme-controls .customize-section-title-nav_menus-heading, +#customize-theme-controls .customize-section-title-menu_locations-heading, +#customize-theme-controls .customize-section-title-menu_locations-description { + padding: 0 12px; +} + +#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description { + /* Override the default italic style for control descriptions */ + font-style: normal; +} + +.menu-in-location, +.menu-in-locations { + display: block; + font-weight: 600; + font-size: 10px; +} + +#customize-controls .theme-location-set, +#customize-controls .control-section .accordion-section-title:focus .menu-in-location, +#customize-controls .control-section .accordion-section-title:hover .menu-in-location { + color: #50575e; +} + +/* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */ +.customize-control-nav_menu_location .edit-menu, +.customize-control-nav_menu_location .create-menu { + margin-left: 6px; + vertical-align: middle; + line-height: 2.2; +} + +#customize-controls .customize-control-nav_menu_name { + margin-bottom: 12px; +} + +.customize-control-nav_menu_name p:last-of-type { + margin-bottom: 0; +} + +#customize-new-menu-submit { + float: right; + min-width: 85px; +} + +.wp-customizer .menu-item-bar .menu-item-handle, +.wp-customizer .menu-item-settings, +.wp-customizer .menu-item-settings .description-thin { + box-sizing: border-box; +} + +.wp-customizer .menu-item-bar { + margin: 0; +} + +.wp-customizer .menu-item-bar .menu-item-handle { + width: 100%; + max-width: 100%; + background: #fff; +} + +.wp-customizer .menu-item-handle .item-title { + margin-right: 0; +} + +.wp-customizer .menu-item-handle .item-type { + padding: 1px 21px 0 5px; + float: right; + text-align: right; +} + +.wp-customizer .menu-item-handle:hover { + z-index: 8; +} + +.customize-control-nav_menu_item.has-notifications .menu-item-handle { + border-left: 4px solid #72aee6; +} + +.wp-customizer .menu-item-settings { + max-width: 100%; + overflow: hidden; + z-index: 8; + padding: 10px; + background: #f0f0f1; + border: 1px solid #8c8f94; + border-top: none; +} + +.wp-customizer .menu-item-settings .description-thin { + width: 100%; + height: auto; + margin: 0 0 8px; +} + +.wp-customizer .menu-item-settings input[type="text"] { + width: 100%; +} + +.wp-customizer .menu-item-settings .submitbox { + margin: 0; + padding: 0; +} + +.wp-customizer .menu-item-settings .link-to-original { + padding: 5px 0; + border: none; + font-style: normal; + margin: 0; + width: 100%; +} + +.wp-customizer .menu-item .submitbox .submitdelete { + float: left; + margin: 6px 0 0; + padding: 0; + cursor: pointer; +} + + +/** + * Menu items reordering styles + */ + +.menu-item-reorder-nav { + display: none; + background-color: #fff; + position: absolute; + top: 0; + right: 0; +} + +.menus-move-left:before { + content: "\f341"; +} + +.menus-move-right:before { + content: "\f345"; +} + +.reordering .menu-item .item-controls, +.reordering .menu-item .item-type { + display: none; +} + +.reordering .menu-item-reorder-nav { + display: block; +} + +.customize-control input.menu-name-field { + width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */ +} + +.wp-customizer .menu-item .item-edit { + position: absolute; + right: -19px; + top: 2px; + display: block; + width: 30px; + height: 38px; + margin-right: 0 !important; + box-shadow: none; + outline: none; + overflow: hidden; + cursor: pointer; + text-align: center; +} + +.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before { + content: "\f142"; +} + +.wp-customizer .menu-item-settings p.description { + font-style: normal; +} + +.wp-customizer .menu-settings dl { + margin: 12px 0 0; + padding: 0; +} + +.wp-customizer .menu-settings .checkbox-input { + margin-top: 8px; +} + +.wp-customizer .menu-settings .menu-theme-locations { + border-top: 1px solid #c3c4c7; +} + +.wp-customizer .menu-settings { + margin-top: 36px; + border-top: none; +} + +.wp-customizer .menu-location-settings { + margin-top: 12px; + border-top: none; +} + +.wp-customizer .control-section-nav_menu .menu-location-settings { + margin-top: 24px; + border-top: 1px solid #dcdcde; +} + +.wp-customizer .control-section-nav_menu .menu-location-settings, +.customize-control-nav_menu_auto_add { + padding-top: 12px; +} + +.menu-location-settings .customize-control-checkbox .theme-location-set { + line-height: 1; +} + +.customize-control-nav_menu_auto_add label { + vertical-align: top; +} + +.menu-location-settings .new-menu-locations-widget-note { + display: block; +} + +.customize-control-menu { + margin-top: 4px; +} + +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle { + color: #50575e; +} + +/* Screen Options */ +.customize-screen-options-toggle { + background: none; + border: none; + color: #50575e; + cursor: pointer; + margin: 0; + padding: 20px; + position: absolute; + right: 0; + top: 30px; +} + +#customize-controls .customize-info .customize-help-toggle { + padding: 20px; +} + +#customize-controls .customize-info .customize-help-toggle:before { + padding: 4px; +} + +.customize-screen-options-toggle:hover, +.customize-screen-options-toggle:active, +.customize-screen-options-toggle:focus, +.active-menu-screen-options .customize-screen-options-toggle, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: #2271b1; +} + +.customize-screen-options-toggle:focus, +#customize-controls .customize-info .customize-help-toggle:focus { + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +.customize-screen-options-toggle:before { + -moz-osx-font-smoothing: grayscale; + border: none; + content: "\f111"; + display: block; + font: 18px/1 dashicons; + padding: 5px; + text-align: center; + text-decoration: none !important; + text-indent: 0; + left: 6px; + position: absolute; + top: 6px; +} + +.customize-screen-options-toggle:focus:before, +#customize-controls .customize-info .customize-help-toggle:focus:before { + border-radius: 100%; +} + +.wp-customizer #screen-options-wrap { + display: none; + background: #fff; + border-top: 1px solid #dcdcde; + padding: 4px 15px 15px; +} + +.wp-customizer .metabox-prefs label { + display: block; + padding-right: 0; + line-height: 30px; +} + +/* rework the arrow indicator implementation for NVDA bug same as #32715 */ +.wp-customizer .toggle-indicator { + display: inline-block; + font-size: 20px; + line-height: 1; +} + +.rtl .wp-customizer .toggle-indicator { + text-indent: 1px; /* account for the dashicon alignment */ +} + +.wp-customizer .menu-item .item-edit .toggle-indicator:before, +#available-menu-items .accordion-section-title .toggle-indicator:before { + content: "\f140"; + display: block; + padding: 1px 2px 1px 0; + speak: never; + border-radius: 50%; + color: #787c82; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +.control-section-nav_menu .field-link-target, +.control-section-nav_menu .field-title-attribute, +.control-section-nav_menu .field-css-classes, +.control-section-nav_menu .field-xfn, +.control-section-nav_menu .field-description { + display: none; +} + +.control-section-nav_menu.field-link-target-active .field-link-target, +.control-section-nav_menu.field-title-attribute-active .field-title-attribute, +.control-section-nav_menu.field-css-classes-active .field-css-classes, +.control-section-nav_menu.field-xfn-active .field-xfn, +.control-section-nav_menu.field-description-active .field-description { + display: block; +} + +/* WARNING: The 20px factor is hard-coded in JS. */ +.menu-item-depth-0 { margin-left: 0; } +.menu-item-depth-1 { margin-left: 20px; } +.menu-item-depth-2 { margin-left: 40px; } +.menu-item-depth-3 { margin-left: 60px; } +.menu-item-depth-4 { margin-left: 80px; } +.menu-item-depth-5 { margin-left: 100px; } +.menu-item-depth-6 { margin-left: 120px; } +.menu-item-depth-7 { margin-left: 140px; } +.menu-item-depth-8 { margin-left: 160px; } /* Not likely to be used or useful beyond this depth */ +.menu-item-depth-9 { margin-left: 180px; } +.menu-item-depth-10 { margin-left: 200px; } +.menu-item-depth-11 { margin-left: 220px; } + +/* @todo handle .menu-item-settings width */ +.menu-item-depth-0 > .menu-item-bar { margin-right: 0; } +.menu-item-depth-1 > .menu-item-bar { margin-right: 20px; } +.menu-item-depth-2 > .menu-item-bar { margin-right: 40px; } +.menu-item-depth-3 > .menu-item-bar { margin-right: 60px; } +.menu-item-depth-4 > .menu-item-bar { margin-right: 80px; } +.menu-item-depth-5 > .menu-item-bar { margin-right: 100px; } +.menu-item-depth-6 > .menu-item-bar { margin-right: 120px; } +.menu-item-depth-7 > .menu-item-bar { margin-right: 140px; } +.menu-item-depth-8 > .menu-item-bar { margin-right: 160px; } +.menu-item-depth-9 > .menu-item-bar { margin-right: 180px; } +.menu-item-depth-10 > .menu-item-bar { margin-right: 200px; } +.menu-item-depth-11 > .menu-item-bar { margin-right: 220px; } + +/* Submenu left margin. */ +.menu-item-depth-0 .menu-item-transport { margin-left: 0; } +.menu-item-depth-1 .menu-item-transport { margin-left: -20px; } +.menu-item-depth-3 .menu-item-transport { margin-left: -60px; } +.menu-item-depth-4 .menu-item-transport { margin-left: -80px; } +.menu-item-depth-2 .menu-item-transport { margin-left: -40px; } +.menu-item-depth-5 .menu-item-transport { margin-left: -100px; } +.menu-item-depth-6 .menu-item-transport { margin-left: -120px; } +.menu-item-depth-7 .menu-item-transport { margin-left: -140px; } +.menu-item-depth-8 .menu-item-transport { margin-left: -160px; } +.menu-item-depth-9 .menu-item-transport { margin-left: -180px; } +.menu-item-depth-10 .menu-item-transport { margin-left: -200px; } +.menu-item-depth-11 .menu-item-transport { margin-left: -220px; } + +/* WARNING: The 20px factor is hard-coded in JS. */ +.reordering .menu-item-depth-0 { margin-left: 0; } +.reordering .menu-item-depth-1 { margin-left: 15px; } +.reordering .menu-item-depth-2 { margin-left: 30px; } +.reordering .menu-item-depth-3 { margin-left: 45px; } +.reordering .menu-item-depth-4 { margin-left: 60px; } +.reordering .menu-item-depth-5 { margin-left: 75px; } +.reordering .menu-item-depth-6 { margin-left: 90px; } +.reordering .menu-item-depth-7 { margin-left: 105px; } +.reordering .menu-item-depth-8 { margin-left: 120px; } /* Not likely to be used or useful beyond this depth */ +.reordering .menu-item-depth-9 { margin-left: 135px; } +.reordering .menu-item-depth-10 { margin-left: 150px; } +.reordering .menu-item-depth-11 { margin-left: 165px; } + +.reordering .menu-item-depth-0 > .menu-item-bar { margin-right: 0; } +.reordering .menu-item-depth-1 > .menu-item-bar { margin-right: 15px; } +.reordering .menu-item-depth-2 > .menu-item-bar { margin-right: 30px; } +.reordering .menu-item-depth-3 > .menu-item-bar { margin-right: 45px; } +.reordering .menu-item-depth-4 > .menu-item-bar { margin-right: 60px; } +.reordering .menu-item-depth-5 > .menu-item-bar { margin-right: 75px; } +.reordering .menu-item-depth-6 > .menu-item-bar { margin-right: 90px; } +.reordering .menu-item-depth-7 > .menu-item-bar { margin-right: 105px; } +.reordering .menu-item-depth-8 > .menu-item-bar { margin-right: 120px; } +.reordering .menu-item-depth-9 > .menu-item-bar { margin-right: 135px; } +.reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; } +.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; } + +.control-section-nav_menu.menu .menu-item-edit-active { + margin-left: 0; +} + +.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar { + margin-right: 0; +} + +.control-section-nav_menu.menu .sortable-placeholder { + margin-top: 0; + margin-bottom: 1px; + max-width: calc(100% - 2px); + float: left; + display: list-item; + border-color: #a7aaad; +} + +.menu-item-transport li.customize-control { + float: none; +} + +.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar { + margin-top: 0; +} + +/** + * Add-menu-items mode + */ + +.adding-menu-items .control-section { + opacity: .4; +} + +.adding-menu-items .control-panel.control-section, +.adding-menu-items .control-section.open { + opacity: 1; +} + +.menu-item-bar .item-delete { + color: #d63638; + position: absolute; + top: 2px; + right: -19px; + width: 30px; + height: 38px; + cursor: pointer; + display: none; +} + +.menu-item-bar .item-delete:before { + content: "\f335"; + position: absolute; + top: 9px; + left: 5px; + border-radius: 50%; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.menu-item-bar .item-delete:hover, +.menu-item-bar .item-delete:focus { + box-shadow: none; + outline: none; + color: #d63638; +} + +.adding-menu-items .menu-item-bar .item-edit { + display: none; +} + +.adding-menu-items .menu-item-bar .item-delete { + display: block; +} + +/** + * Styles for menu-item addition panel + */ + +#available-menu-items.opening { + overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ +} + +#available-menu-items #available-menu-items-search.open { + height: 100%; + border-bottom: none; +} + +#available-menu-items .accordion-section-title { + border-left: none; + border-right: none; + background: #fff; + transition: background-color 0.15s; + /* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */ + -webkit-user-select: auto; + user-select: auto; +} + +#available-menu-items .open .accordion-section-title, +#available-menu-items #available-menu-items-search .accordion-section-title { + background: #f0f0f1; +} + +/* rework the arrow indicator implementation for NVDA bug see #32715 */ +#available-menu-items .accordion-section-title:after { + content: none !important; +} + +#available-menu-items .accordion-section-title:hover .toggle-indicator:before, +#available-menu-items .button-link:hover .toggle-indicator:before, +#available-menu-items .button-link:focus .toggle-indicator:before { + color: #1d2327; +} + +#available-menu-items .open .accordion-section-title .toggle-indicator:before { + content: "\f142"; + color: #1d2327; +} + +#available-menu-items .available-menu-items-list { + overflow-y: auto; + max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */ + background: transparent; +} + +#available-menu-items .accordion-section-title button { + display: block; + width: 28px; + height: 35px; + position: absolute; + top: 5px; + right: 5px; + box-shadow: none; + outline: none; + cursor: pointer; + text-align: center; +} + +#available-menu-items .accordion-section-title .no-items, +#available-menu-items .cannot-expand .accordion-section-title .spinner, +#available-menu-items .cannot-expand .accordion-section-title > button { + display: none; +} + +#available-menu-items-search.cannot-expand .accordion-section-title .spinner { + display: block; +} + +#available-menu-items .cannot-expand .accordion-section-title .no-items { + float: right; + color: #50575e; + font-weight: 400; + margin-left: 5px; +} + +#available-menu-items .accordion-section-content { + max-height: 290px; + margin: 0; + padding: 0; + position: relative; + background: transparent; +} + +#available-menu-items .accordion-section-content .available-menu-items-list { + margin: 0 0 45px; + padding: 1px 15px 15px; +} + +#available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */ + margin-bottom: 0; +} + +#new-custom-menu-item .accordion-section-content { + padding: 0 15px 15px; +} + +#available-menu-items .menu-item-tpl { + margin: 0; +} + +#custom-menu-item-name.invalid, +#custom-menu-item-url.invalid, +.edit-menu-item-url.invalid, +.menu-name-field.invalid, +.menu-name-field.invalid:focus, +#available-menu-items .new-content-item .create-item-input.invalid, +#available-menu-items .new-content-item .create-item-input.invalid:focus { + border: 1px solid #d63638; +} + +#available-menu-items .menu-item-handle .item-type { + padding-right: 0; +} + +#available-menu-items .menu-item-handle .item-title { + padding-left: 20px; +} + +#available-menu-items .menu-item-handle { + cursor: pointer; +} + +#available-menu-items .menu-item-handle { + box-shadow: none; + margin-top: -1px; +} + +#available-menu-items .menu-item-handle:hover { + z-index: 1; +} + +#available-menu-items .item-title h4 { + padding: 0 0 5px; + font-size: 14px; +} + +#available-menu-items .item-add { + position: absolute; + top: 1px; + left: 1px; + color: #8c8f94; + width: 30px; + height: 38px; + box-shadow: none; + outline: none; + cursor: pointer; + text-align: center; +} + +#available-menu-items .menu-item-handle .item-add:focus { + color: #1d2327; +} + +#available-menu-items .item-add:before { + content: "\f543"; + position: relative; + left: 2px; + top: 3px; + display: inline-block; + height: 20px; + border-radius: 50%; + font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */ +} + +#available-menu-items .menu-item-handle.item-added .item-type, +#available-menu-items .menu-item-handle.item-added .item-title, +#available-menu-items .menu-item-handle.item-added:hover .item-add, +#available-menu-items .menu-item-handle.item-added .item-add:focus { + color: #8c8f94; +} + +#available-menu-items .menu-item-handle.item-added .item-add:before { + content: "\f147"; +} + +#available-menu-items .accordion-section-title.loading .spinner, +#available-menu-items-search.loading .accordion-section-title .spinner { + visibility: visible; + margin: 0 20px; +} + +#available-menu-items-search .spinner { + position: absolute; + top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */ + right: 21px; + margin: 0 !important; +} + +/* search results list */ +#available-menu-items #available-menu-items-search .accordion-section-content { + position: absolute; + left: 0; + top: 60px; /* below title div / search input */ + bottom: 0; /* 100% height that still triggers lazy load */ + max-height: none; + width: 100%; + padding: 1px 15px 15px; + box-sizing: border-box; +} + +#available-menu-items-search .nothing-found { + /* Compensate the 1px top padding of the container. */ + margin-top: -1px; +} + +#available-menu-items-search .accordion-section-title:after { + display: none; +} + +#available-menu-items-search .accordion-section-content:empty { + min-height: 0; + padding: 0; +} + +#available-menu-items-search.loading .accordion-section-content div { + opacity: .5; +} + +#available-menu-items-search.loading.loading-more .accordion-section-content div { + opacity: 1; +} + +#customize-preview { + transition: all 0.2s; +} + +body.adding-menu-items #available-menu-items { + left: 0; + visibility: visible; +} + +body.adding-menu-items .wp-full-overlay-main { + left: 300px; +} + +body.adding-menu-items #customize-preview { + opacity: 0.4; +} + +body.adding-menu-items #customize-preview iframe { + pointer-events: none; +} + +.menu-item-handle .spinner { + display: none; + float: left; + margin: 0 8px 0 0; +} + +.nav-menu-inserted-item-loading .spinner { + display: block; +} + +.nav-menu-inserted-item-loading .menu-item-handle .item-type { + padding: 0 0 0 8px; +} + +.nav-menu-inserted-item-loading .menu-item-handle, +.added-menu-item .menu-item-handle.loading { + padding: 10px 15px 10px 8px; + cursor: default; + opacity: .5; + background: #fff; + color: #787c82; +} + +.added-menu-item .menu-item-handle { + transition-property: opacity, background, color; + transition-duration: 1.25s; + transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */ +} + +/* Add/delete Menus */ + +#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title { + border-bottom-color: #dcdcde; +} + +/* @todo update selector */ +#accordion-section-add_menu { + margin: 15px 12px; +} + +#accordion-section-add_menu h3 { + text-align: right; +} + +#accordion-section-add_menu h3, +#accordion-section-add_menu .customize-add-menu-button { + margin: 0; +} + +#accordion-section-add_menu .customize-add-menu-button { + font-weight: 400; +} + +#create-new-menu-submit { + float: right; + margin: 0 0 12px; +} + +.menu-delete-item { + float: left; + padding: 1em 0; + width: 100%; +} + +.assigned-menu-locations-title p { + margin: 0 0 8px; +} + +li.assigned-to-menu-location .menu-delete-item { + display: none; +} + +li.assigned-to-menu-location .add-new-menu-item { + margin-bottom: 1em; +} + +.menu-item-handle { + margin-top: -1px; +} +.ui-sortable-disabled .menu-item-handle { + cursor: default; +} + +.menu-item-handle:hover { + position: relative; + z-index: 10; + color: #2271b1; +} + +.menu-item-handle:hover .item-type, +.menu-item-handle:hover .item-edit, +#available-menu-items .menu-item-handle:hover .item-add { + color: #2271b1; +} + +.menu-item-edit-active .menu-item-handle { + border-color: #8c8f94; + border-bottom: none; +} + +.customize-control-nav_menu_item { + margin-bottom: 0; +} + +.customize-control-nav_menu .new-menu-item-invitation { + margin-top: 0; + margin-bottom: 0; +} + +.customize-control-nav_menu .customize-control-nav_menu-buttons { + margin-top: 12px; +} + +/** + * box-shadows + */ + +.wp-customizer .menu-item .submitbox .submitdelete:focus, +.customize-screen-options-toggle:focus:before, +#customize-controls .customize-info .customize-help-toggle:focus:before, +.wp-customizer button:focus .toggle-indicator:before, +.menu-delete:focus, +.menu-item-bar .item-delete:focus:before, +#available-menu-items .item-add:focus:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + + +@media screen and (max-width: 782px) { + #available-menu-items #available-menu-items-search .accordion-section-content { + top: 63px; + } +} + +@media screen and (max-width: 640px) { + #available-menu-items #available-menu-items-search .accordion-section-content { + top: 130px; + } +} diff --git a/tools/storybook/wordpress/css/customize-nav-menus.min.css b/tools/storybook/wordpress/css/customize-nav-menus.min.css new file mode 100644 index 00000000000..613dca605b0 --- /dev/null +++ b/tools/storybook/wordpress/css/customize-nav-menus.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#customize-theme-controls #accordion-section-menu_locations{position:relative;margin-top:30px}#customize-theme-controls #accordion-section-menu_locations>.accordion-section-title{border-bottom-color:#dcdcde;margin-top:15px}#customize-theme-controls .customize-section-title-menu_locations-description,#customize-theme-controls .customize-section-title-menu_locations-heading,#customize-theme-controls .customize-section-title-nav_menus-heading{padding:0 12px}#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description{font-style:normal}.menu-in-location,.menu-in-locations{display:block;font-weight:600;font-size:10px}#customize-controls .control-section .accordion-section-title:focus .menu-in-location,#customize-controls .control-section .accordion-section-title:hover .menu-in-location,#customize-controls .theme-location-set{color:#50575e}.customize-control-nav_menu_location .create-menu,.customize-control-nav_menu_location .edit-menu{margin-left:6px;vertical-align:middle;line-height:2.2}#customize-controls .customize-control-nav_menu_name{margin-bottom:12px}.customize-control-nav_menu_name p:last-of-type{margin-bottom:0}#customize-new-menu-submit{float:right;min-width:85px}.wp-customizer .menu-item-bar .menu-item-handle,.wp-customizer .menu-item-settings,.wp-customizer .menu-item-settings .description-thin{box-sizing:border-box}.wp-customizer .menu-item-bar{margin:0}.wp-customizer .menu-item-bar .menu-item-handle{width:100%;max-width:100%;background:#fff}.wp-customizer .menu-item-handle .item-title{margin-right:0}.wp-customizer .menu-item-handle .item-type{padding:1px 21px 0 5px;float:right;text-align:right}.wp-customizer .menu-item-handle:hover{z-index:8}.customize-control-nav_menu_item.has-notifications .menu-item-handle{border-left:4px solid #72aee6}.wp-customizer .menu-item-settings{max-width:100%;overflow:hidden;z-index:8;padding:10px;background:#f0f0f1;border:1px solid #8c8f94;border-top:none}.wp-customizer .menu-item-settings .description-thin{width:100%;height:auto;margin:0 0 8px}.wp-customizer .menu-item-settings input[type=text]{width:100%}.wp-customizer .menu-item-settings .submitbox{margin:0;padding:0}.wp-customizer .menu-item-settings .link-to-original{padding:5px 0;border:none;font-style:normal;margin:0;width:100%}.wp-customizer .menu-item .submitbox .submitdelete{float:left;margin:6px 0 0;padding:0;cursor:pointer}.menu-item-reorder-nav{display:none;background-color:#fff;position:absolute;top:0;right:0}.menus-move-left:before{content:"\f341"}.menus-move-right:before{content:"\f345"}.reordering .menu-item .item-controls,.reordering .menu-item .item-type{display:none}.reordering .menu-item-reorder-nav{display:block}.customize-control input.menu-name-field{width:100%}.wp-customizer .menu-item .item-edit{position:absolute;right:-19px;top:2px;display:block;width:30px;height:38px;margin-right:0!important;box-shadow:none;outline:0;overflow:hidden;cursor:pointer;text-align:center}.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before{content:"\f142"}.wp-customizer .menu-item-settings p.description{font-style:normal}.wp-customizer .menu-settings dl{margin:12px 0 0;padding:0}.wp-customizer .menu-settings .checkbox-input{margin-top:8px}.wp-customizer .menu-settings .menu-theme-locations{border-top:1px solid #c3c4c7}.wp-customizer .menu-settings{margin-top:36px;border-top:none}.wp-customizer .menu-location-settings{margin-top:12px;border-top:none}.wp-customizer .control-section-nav_menu .menu-location-settings{margin-top:24px;border-top:1px solid #dcdcde}.customize-control-nav_menu_auto_add,.wp-customizer .control-section-nav_menu .menu-location-settings{padding-top:12px}.menu-location-settings .customize-control-checkbox .theme-location-set{line-height:1}.customize-control-nav_menu_auto_add label{vertical-align:top}.menu-location-settings .new-menu-locations-widget-note{display:block}.customize-control-menu{margin-top:4px}#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle{color:#50575e}.customize-screen-options-toggle{background:0 0;border:none;color:#50575e;cursor:pointer;margin:0;padding:20px;position:absolute;right:0;top:30px}#customize-controls .customize-info .customize-help-toggle{padding:20px}#customize-controls .customize-info .customize-help-toggle:before{padding:4px}#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus,#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,.active-menu-screen-options .customize-screen-options-toggle,.customize-screen-options-toggle:active,.customize-screen-options-toggle:focus,.customize-screen-options-toggle:hover{color:#2271b1}#customize-controls .customize-info .customize-help-toggle:focus,.customize-screen-options-toggle:focus{outline:1px solid transparent}.customize-screen-options-toggle:before{-moz-osx-font-smoothing:grayscale;border:none;content:"\f111";display:block;font:18px/1 dashicons;padding:5px;text-align:center;text-decoration:none!important;text-indent:0;left:6px;position:absolute;top:6px}#customize-controls .customize-info .customize-help-toggle:focus:before,.customize-screen-options-toggle:focus:before{border-radius:100%}.wp-customizer #screen-options-wrap{display:none;background:#fff;border-top:1px solid #dcdcde;padding:4px 15px 15px}.wp-customizer .metabox-prefs label{display:block;padding-right:0;line-height:30px}.wp-customizer .toggle-indicator{display:inline-block;font-size:20px;line-height:1}.rtl .wp-customizer .toggle-indicator{text-indent:1px}#available-menu-items .accordion-section-title .toggle-indicator:before,.wp-customizer .menu-item .item-edit .toggle-indicator:before{content:"\f140";display:block;padding:1px 2px 1px 0;speak:never;border-radius:50%;color:#787c82;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important}.control-section-nav_menu .field-css-classes,.control-section-nav_menu .field-description,.control-section-nav_menu .field-link-target,.control-section-nav_menu .field-title-attribute,.control-section-nav_menu .field-xfn{display:none}.control-section-nav_menu.field-css-classes-active .field-css-classes,.control-section-nav_menu.field-description-active .field-description,.control-section-nav_menu.field-link-target-active .field-link-target,.control-section-nav_menu.field-title-attribute-active .field-title-attribute,.control-section-nav_menu.field-xfn-active .field-xfn{display:block}.menu-item-depth-0{margin-left:0}.menu-item-depth-1{margin-left:20px}.menu-item-depth-2{margin-left:40px}.menu-item-depth-3{margin-left:60px}.menu-item-depth-4{margin-left:80px}.menu-item-depth-5{margin-left:100px}.menu-item-depth-6{margin-left:120px}.menu-item-depth-7{margin-left:140px}.menu-item-depth-8{margin-left:160px}.menu-item-depth-9{margin-left:180px}.menu-item-depth-10{margin-left:200px}.menu-item-depth-11{margin-left:220px}.menu-item-depth-0>.menu-item-bar{margin-right:0}.menu-item-depth-1>.menu-item-bar{margin-right:20px}.menu-item-depth-2>.menu-item-bar{margin-right:40px}.menu-item-depth-3>.menu-item-bar{margin-right:60px}.menu-item-depth-4>.menu-item-bar{margin-right:80px}.menu-item-depth-5>.menu-item-bar{margin-right:100px}.menu-item-depth-6>.menu-item-bar{margin-right:120px}.menu-item-depth-7>.menu-item-bar{margin-right:140px}.menu-item-depth-8>.menu-item-bar{margin-right:160px}.menu-item-depth-9>.menu-item-bar{margin-right:180px}.menu-item-depth-10>.menu-item-bar{margin-right:200px}.menu-item-depth-11>.menu-item-bar{margin-right:220px}.menu-item-depth-0 .menu-item-transport{margin-left:0}.menu-item-depth-1 .menu-item-transport{margin-left:-20px}.menu-item-depth-3 .menu-item-transport{margin-left:-60px}.menu-item-depth-4 .menu-item-transport{margin-left:-80px}.menu-item-depth-2 .menu-item-transport{margin-left:-40px}.menu-item-depth-5 .menu-item-transport{margin-left:-100px}.menu-item-depth-6 .menu-item-transport{margin-left:-120px}.menu-item-depth-7 .menu-item-transport{margin-left:-140px}.menu-item-depth-8 .menu-item-transport{margin-left:-160px}.menu-item-depth-9 .menu-item-transport{margin-left:-180px}.menu-item-depth-10 .menu-item-transport{margin-left:-200px}.menu-item-depth-11 .menu-item-transport{margin-left:-220px}.reordering .menu-item-depth-0{margin-left:0}.reordering .menu-item-depth-1{margin-left:15px}.reordering .menu-item-depth-2{margin-left:30px}.reordering .menu-item-depth-3{margin-left:45px}.reordering .menu-item-depth-4{margin-left:60px}.reordering .menu-item-depth-5{margin-left:75px}.reordering .menu-item-depth-6{margin-left:90px}.reordering .menu-item-depth-7{margin-left:105px}.reordering .menu-item-depth-8{margin-left:120px}.reordering .menu-item-depth-9{margin-left:135px}.reordering .menu-item-depth-10{margin-left:150px}.reordering .menu-item-depth-11{margin-left:165px}.reordering .menu-item-depth-0>.menu-item-bar{margin-right:0}.reordering .menu-item-depth-1>.menu-item-bar{margin-right:15px}.reordering .menu-item-depth-2>.menu-item-bar{margin-right:30px}.reordering .menu-item-depth-3>.menu-item-bar{margin-right:45px}.reordering .menu-item-depth-4>.menu-item-bar{margin-right:60px}.reordering .menu-item-depth-5>.menu-item-bar{margin-right:75px}.reordering .menu-item-depth-6>.menu-item-bar{margin-right:90px}.reordering .menu-item-depth-7>.menu-item-bar{margin-right:105px}.reordering .menu-item-depth-8>.menu-item-bar{margin-right:120px}.reordering .menu-item-depth-9>.menu-item-bar{margin-right:135px}.reordering .menu-item-depth-10>.menu-item-bar{margin-right:150px}.reordering .menu-item-depth-11>.menu-item-bar{margin-right:165px}.control-section-nav_menu.menu .menu-item-edit-active{margin-left:0}.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar{margin-right:0}.control-section-nav_menu.menu .sortable-placeholder{margin-top:0;margin-bottom:1px;max-width:calc(100% - 2px);float:left;display:list-item;border-color:#a7aaad}.menu-item-transport li.customize-control{float:none}.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar{margin-top:0}.adding-menu-items .control-section{opacity:.4}.adding-menu-items .control-panel.control-section,.adding-menu-items .control-section.open{opacity:1}.menu-item-bar .item-delete{color:#d63638;position:absolute;top:2px;right:-19px;width:30px;height:38px;cursor:pointer;display:none}.menu-item-bar .item-delete:before{content:"\f335";position:absolute;top:9px;left:5px;border-radius:50%;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.menu-item-bar .item-delete:focus,.menu-item-bar .item-delete:hover{box-shadow:none;outline:0;color:#d63638}.adding-menu-items .menu-item-bar .item-edit{display:none}.adding-menu-items .menu-item-bar .item-delete{display:block}#available-menu-items.opening{overflow-y:hidden}#available-menu-items #available-menu-items-search.open{height:100%;border-bottom:none}#available-menu-items .accordion-section-title{border-left:none;border-right:none;background:#fff;transition:background-color .15s;-webkit-user-select:auto;user-select:auto}#available-menu-items #available-menu-items-search .accordion-section-title,#available-menu-items .open .accordion-section-title{background:#f0f0f1}#available-menu-items .accordion-section-title:after{content:none!important}#available-menu-items .accordion-section-title:hover .toggle-indicator:before,#available-menu-items .button-link:focus .toggle-indicator:before,#available-menu-items .button-link:hover .toggle-indicator:before{color:#1d2327}#available-menu-items .open .accordion-section-title .toggle-indicator:before{content:"\f142";color:#1d2327}#available-menu-items .available-menu-items-list{overflow-y:auto;max-height:200px;background:0 0}#available-menu-items .accordion-section-title button{display:block;width:28px;height:35px;position:absolute;top:5px;right:5px;box-shadow:none;outline:0;cursor:pointer;text-align:center}#available-menu-items .accordion-section-title .no-items,#available-menu-items .cannot-expand .accordion-section-title .spinner,#available-menu-items .cannot-expand .accordion-section-title>button{display:none}#available-menu-items-search.cannot-expand .accordion-section-title .spinner{display:block}#available-menu-items .cannot-expand .accordion-section-title .no-items{float:right;color:#50575e;font-weight:400;margin-left:5px}#available-menu-items .accordion-section-content{max-height:290px;margin:0;padding:0;position:relative;background:0 0}#available-menu-items .accordion-section-content .available-menu-items-list{margin:0 0 45px;padding:1px 15px 15px}#available-menu-items .accordion-section-content .available-menu-items-list:only-child{margin-bottom:0}#new-custom-menu-item .accordion-section-content{padding:0 15px 15px}#available-menu-items .menu-item-tpl{margin:0}#available-menu-items .new-content-item .create-item-input.invalid,#available-menu-items .new-content-item .create-item-input.invalid:focus,#custom-menu-item-name.invalid,#custom-menu-item-url.invalid,.edit-menu-item-url.invalid,.menu-name-field.invalid,.menu-name-field.invalid:focus{border:1px solid #d63638}#available-menu-items .menu-item-handle .item-type{padding-right:0}#available-menu-items .menu-item-handle .item-title{padding-left:20px}#available-menu-items .menu-item-handle{cursor:pointer}#available-menu-items .menu-item-handle{box-shadow:none;margin-top:-1px}#available-menu-items .menu-item-handle:hover{z-index:1}#available-menu-items .item-title h4{padding:0 0 5px;font-size:14px}#available-menu-items .item-add{position:absolute;top:1px;left:1px;color:#8c8f94;width:30px;height:38px;box-shadow:none;outline:0;cursor:pointer;text-align:center}#available-menu-items .menu-item-handle .item-add:focus{color:#1d2327}#available-menu-items .item-add:before{content:"\f543";position:relative;left:2px;top:3px;display:inline-block;height:20px;border-radius:50%;font:normal 20px/1.05 dashicons}#available-menu-items .menu-item-handle.item-added .item-add:focus,#available-menu-items .menu-item-handle.item-added .item-title,#available-menu-items .menu-item-handle.item-added .item-type,#available-menu-items .menu-item-handle.item-added:hover .item-add{color:#8c8f94}#available-menu-items .menu-item-handle.item-added .item-add:before{content:"\f147"}#available-menu-items .accordion-section-title.loading .spinner,#available-menu-items-search.loading .accordion-section-title .spinner{visibility:visible;margin:0 20px}#available-menu-items-search .spinner{position:absolute;top:20px;right:21px;margin:0!important}#available-menu-items #available-menu-items-search .accordion-section-content{position:absolute;left:0;top:60px;bottom:0;max-height:none;width:100%;padding:1px 15px 15px;box-sizing:border-box}#available-menu-items-search .nothing-found{margin-top:-1px}#available-menu-items-search .accordion-section-title:after{display:none}#available-menu-items-search .accordion-section-content:empty{min-height:0;padding:0}#available-menu-items-search.loading .accordion-section-content div{opacity:.5}#available-menu-items-search.loading.loading-more .accordion-section-content div{opacity:1}#customize-preview{transition:all .2s}body.adding-menu-items #available-menu-items{left:0;visibility:visible}body.adding-menu-items .wp-full-overlay-main{left:300px}body.adding-menu-items #customize-preview{opacity:.4}body.adding-menu-items #customize-preview iframe{pointer-events:none}.menu-item-handle .spinner{display:none;float:left;margin:0 8px 0 0}.nav-menu-inserted-item-loading .spinner{display:block}.nav-menu-inserted-item-loading .menu-item-handle .item-type{padding:0 0 0 8px}.added-menu-item .menu-item-handle.loading,.nav-menu-inserted-item-loading .menu-item-handle{padding:10px 15px 10px 8px;cursor:default;opacity:.5;background:#fff;color:#787c82}.added-menu-item .menu-item-handle{transition-property:opacity,background,color;transition-duration:1.25s;transition-timing-function:cubic-bezier(.25,-2.5,.75,8)}#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title{border-bottom-color:#dcdcde}#accordion-section-add_menu{margin:15px 12px}#accordion-section-add_menu h3{text-align:right}#accordion-section-add_menu .customize-add-menu-button,#accordion-section-add_menu h3{margin:0}#accordion-section-add_menu .customize-add-menu-button{font-weight:400}#create-new-menu-submit{float:right;margin:0 0 12px}.menu-delete-item{float:left;padding:1em 0;width:100%}.assigned-menu-locations-title p{margin:0 0 8px}li.assigned-to-menu-location .menu-delete-item{display:none}li.assigned-to-menu-location .add-new-menu-item{margin-bottom:1em}.menu-item-handle{margin-top:-1px}.ui-sortable-disabled .menu-item-handle{cursor:default}.menu-item-handle:hover{position:relative;z-index:10;color:#2271b1}#available-menu-items .menu-item-handle:hover .item-add,.menu-item-handle:hover .item-edit,.menu-item-handle:hover .item-type{color:#2271b1}.menu-item-edit-active .menu-item-handle{border-color:#8c8f94;border-bottom:none}.customize-control-nav_menu_item{margin-bottom:0}.customize-control-nav_menu .new-menu-item-invitation{margin-top:0;margin-bottom:0}.customize-control-nav_menu .customize-control-nav_menu-buttons{margin-top:12px}#available-menu-items .item-add:focus:before,#customize-controls .customize-info .customize-help-toggle:focus:before,.customize-screen-options-toggle:focus:before,.menu-delete:focus,.menu-item-bar .item-delete:focus:before,.wp-customizer .menu-item .submitbox .submitdelete:focus,.wp-customizer button:focus .toggle-indicator:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}@media screen and (max-width:782px){#available-menu-items #available-menu-items-search .accordion-section-content{top:63px}}@media screen and (max-width:640px){#available-menu-items #available-menu-items-search .accordion-section-content{top:130px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/customize-widgets-rtl.css b/tools/storybook/wordpress/css/customize-widgets-rtl.css new file mode 100644 index 00000000000..baec34a1465 --- /dev/null +++ b/tools/storybook/wordpress/css/customize-widgets-rtl.css @@ -0,0 +1,479 @@ +/*! This file is auto-generated */ +.wp-full-overlay-sidebar { + overflow: visible; +} + +/** + * Hide all sidebar sections by default, only show them (via JS) once the + * preview loads and we know whether the sidebars are used in the template. + */ + +.control-section.control-section-sidebar, +.customize-control-sidebar_widgets label, +.customize-control-sidebar_widgets .hide-if-js { + /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ + display: none; +} + +.control-section.control-section-sidebar .accordion-section-content.ui-sortable { + overflow: visible; +} + +/* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */ +.customize-control-widget_form .widget-top { + background: #fff; + transition: opacity 0.5s; +} + +.customize-control .widget-action { + color: #787c82; +} + +.customize-control .widget-top:hover .widget-action, +.customize-control .widget-action:focus { + color: #1d2327; +} + +.customize-control-widget_form:not(.widget-rendered) .widget-top { + opacity: 0.5; +} + +.customize-control-widget_form .widget-control-save { + display: none; +} + +.customize-control-widget_form .spinner { + visibility: hidden; + margin-top: 0; +} + +.customize-control-widget_form.previewer-loading .spinner { + visibility: visible; +} + +.customize-control-widget_form.widget-form-disabled .widget-content { + opacity: 0.7; + pointer-events: none; + -webkit-user-select: none; + user-select: none; +} + +.customize-control-widget_form .widget { + margin-bottom: 0; +} + +.customize-control-widget_form.wide-widget-control .widget-inside { + position: fixed; + right: 299px; + top: 25%; + border: 1px solid #dcdcde; + overflow: auto; +} +.customize-control-widget_form.wide-widget-control .widget-inside > .form { + padding: 20px; +} + +.customize-control-widget_form.wide-widget-control .widget-top { + transition: background-color 0.4s; +} +.customize-control-widget_form.wide-widget-control.expanding .widget-top, +.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top { + background-color: #dcdcde; +} + +.widget-inside { + padding: 1px 10px 10px; + border-top: none; + line-height: 1.23076923; +} + +.customize-control-widget_form.expanded .widget-action .toggle-indicator:before { + content: "\f142"; +} + +.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before { + content: "\f141"; +} + +.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before { + content: "\f139"; +} + +.widget-title-action { + cursor: pointer; +} + +.widget-top, +.customize-control-widget_form .widget .customize-control-title { + cursor: move; +} + +.control-section.accordion-section.highlighted > .accordion-section-title, +.customize-control-widget_form.highlighted { + outline: none; + box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); + position: relative; + z-index: 1; +} + +#widget-customizer-control-templates { + display: none; +} + +/** + * Widget reordering styles + */ + +#customize-theme-controls .widget-reorder-nav { + display: none; + float: left; + background-color: #f6f7f7; +} + +.move-widget:before { + content: "\f504"; +} + +#customize-theme-controls .move-widget-area { + display: none; + background: #fff; + border: 1px solid #c3c4c7; + border-top: none; + cursor: auto; +} + +#customize-theme-controls .reordering .move-widget-area.active { + display: block; +} + +#customize-theme-controls .move-widget-area .description { + margin: 0; + padding: 15px 20px; + font-weight: 400; +} + +#customize-theme-controls .widget-area-select { + margin: 0; + padding: 0; + list-style: none; +} + +#customize-theme-controls .widget-area-select li { + position: relative; + margin: 0; + padding: 13px 42px 15px 15px; + color: #50575e; + border-top: 1px solid #c3c4c7; + cursor: pointer; + -webkit-user-select: none; + user-select: none; +} + +#customize-theme-controls .widget-area-select li:before { + display: none; + content: "\f147"; + position: absolute; + top: 12px; + right: 10px; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +#customize-theme-controls .widget-area-select li:last-child { + border-bottom: 1px solid #c3c4c7; +} + +#customize-theme-controls .widget-area-select .selected { + color: #fff; + background: #2271b1; +} + +#customize-theme-controls .widget-area-select .selected:before { + display: block; +} + +#customize-theme-controls .move-widget-actions { + text-align: left; + padding: 12px; +} + +#customize-theme-controls .reordering .widget-title-action { + display: none; +} + +#customize-theme-controls .reordering .widget-reorder-nav { + display: block; +} + +/* Text Widget */ +.wp-customizer div.mce-inline-toolbar-grp, +.wp-customizer div.mce-tooltip { + z-index: 500100 !important; +} +.wp-customizer .ui-autocomplete.wplink-autocomplete { + z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-backdrop { + z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-wrap { + z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */ +} + +/** + * Styles for new widget addition panel + */ + +/* override widgets admin page rules in wp-admin/css/widgets.css */ +#widgets-left #available-widgets .widget { + float: none !important; + width: auto !important; +} + +/* Keep rule that is no longer necessary on widgets.php. */ +#available-widgets .widget-action { + display: none; +} + +.ios #available-widgets { + transition: right 0s; +} + +#available-widgets .widget-tpl:hover, +#available-widgets .widget-tpl.selected { + background: #f6f7f7; + border-bottom-color: #c3c4c7; + color: #2271b1; + border-right: 4px solid #2271b1; +} + +#customize-controls .widget-title h3 { + font-size: 1em; +} + +#available-widgets .widget-title h3 { + padding: 0 0 5px; + font-size: 14px; +} + +#available-widgets .widget .widget-description { + padding: 0; + color: #646970; +} + +#customize-preview { + transition: all 0.2s; +} + +body.adding-widget #available-widgets { + right: 0; + visibility: visible; +} + +body.adding-widget .wp-full-overlay-main { + right: 300px; +} + +body.adding-widget #customize-preview { + opacity: 0.4; +} + + +/** + * Widget Icon styling + * No plurals in naming. + * Ordered from lowest to highest specificity. + */ + +#available-widgets .widget-title { + position: relative; +} + +#available-widgets .widget-title:before { + content: "\f132"; + position: absolute; + top: -3px; + left: 100%; + margin-left: 20px; + width: 20px; + height: 20px; + color: #2c3338; + font: normal 20px/1 dashicons; + text-align: center; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* dashicons-smiley */ +#available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; } + +/* dashicons-star-filled */ +#available-widgets [class*="super"] .widget-title:before, +#available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; } + +/* dashicons-wordpress */ +#available-widgets [class*="meta"] .widget-title:before { content: "\f120"; } + +/* dashicons-archive */ +#available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; } + +/* dashicons-category */ +#available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; } + +/* dashicons-admin-comments */ +#available-widgets [class*="comment"] .widget-title:before, +#available-widgets [class*="testimonial"] .widget-title:before, +#available-widgets [class*="chat"] .widget-title:before { content: "\f101"; } + +/* dashicons-admin-post */ +#available-widgets [class*="post"] .widget-title:before { content: "\f109"; } + +/* dashicons-admin-page */ +#available-widgets [class*="page"] .widget-title:before { content: "\f105"; } + +/* dashicons-text */ +#available-widgets [class*="text"] .widget-title:before { content: "\f478"; } + +/* dashicons-admin-links */ +#available-widgets [class*="link"] .widget-title:before { content: "\f103"; } + +/* dashicons-search */ +#available-widgets [class*="search"] .widget-title:before { content: "\f179"; } + +/* dashicons-menu */ +#available-widgets [class*="menu"] .widget-title:before, +#available-widgets [class*="nav"] .widget-title:before { content: "\f333"; } + +/* dashicons-tagcloud */ +#available-widgets [class*="tag"] .widget-title:before { content: "\f479"; } + +/* dashicons-rss */ +#available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; } + +/* dashicons-calendar */ +#available-widgets [class*="event"] .widget-title:before, +#available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;} + +/* dashicons-format-image */ +#available-widgets [class*="image"] .widget-title:before, +#available-widgets [class*="photo"] .widget-title:before, +#available-widgets [class*="slide"] .widget-title:before, +#available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; } + +/* dashicons-format-gallery */ +#available-widgets [class*="album"] .widget-title:before, +#available-widgets [class*="galler"] .widget-title:before { content: "\f161"; } + +/* dashicons-format-video */ +#available-widgets [class*="video"] .widget-title:before, +#available-widgets [class*="tube"] .widget-title:before { content: "\f126"; } + +/* dashicons-format-audio */ +#available-widgets [class*="music"] .widget-title:before, +#available-widgets [class*="radio"] .widget-title:before, +#available-widgets [class*="audio"] .widget-title:before { content: "\f127"; } + +/* dashicons-admin-users */ +#available-widgets [class*="login"] .widget-title:before, +#available-widgets [class*="user"] .widget-title:before, +#available-widgets [class*="member"] .widget-title:before, +#available-widgets [class*="avatar"] .widget-title:before, +#available-widgets [class*="subscriber"] .widget-title:before, +#available-widgets [class*="profile"] .widget-title:before, +#available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; } + +/* dashicons-cart */ +#available-widgets [class*="commerce"] .widget-title:before, +#available-widgets [class*="shop"] .widget-title:before, +#available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; } + +/* dashicons-shield */ +#available-widgets [class*="secur"] .widget-title:before, +#available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; } + +/* dashicons-chart-bar */ +#available-widgets [class*="analytic"] .widget-title:before, +#available-widgets [class*="stat"] .widget-title:before, +#available-widgets [class*="poll"] .widget-title:before { content: "\f185"; } + +/* dashicons-feedback */ +#available-widgets [class*="form"] .widget-title:before { content: "\f175"; } + +/* dashicons-email-alt */ +#available-widgets [class*="subscribe"] .widget-title:before, +#available-widgets [class*="news"] .widget-title:before, +#available-widgets [class*="contact"] .widget-title:before, +#available-widgets [class*="mail"] .widget-title:before { content: "\f466"; } + +/* dashicons-share */ +#available-widgets [class*="share"] .widget-title:before, +#available-widgets [class*="socia"] .widget-title:before { content: "\f237"; } + +/* dashicons-translation */ +#available-widgets [class*="lang"] .widget-title:before, +#available-widgets [class*="translat"] .widget-title:before { content: "\f326"; } + +/* dashicons-location-alt */ +#available-widgets [class*="locat"] .widget-title:before, +#available-widgets [class*="map"] .widget-title:before { content: "\f231"; } + +/* dashicons-download */ +#available-widgets [class*="download"] .widget-title:before { content: "\f316"; } + +/* dashicons-cloud */ +#available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;} + +/* dashicons-facebook */ +#available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; } + +/* dashicons-twitter */ +#available-widgets [class*="tweet"] .widget-title:before, +#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } + +@media screen and (max-height: 700px) and (min-width: 981px) { + /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */ + .customize-control-widget_form { + margin-bottom: 0; + } + + .widget-top { + box-shadow: none; + margin-top: -1px; + } + + .widget-top:hover { + position: relative; + z-index: 1; + } + + .last-widget { + margin-bottom: 15px; + } + + .widget-title h3 { + padding: 13px 15px; + } + + .widget-top .widget-action { + padding: 8px 10px; + } + + .widget-reorder-nav span { + height: 39px; + } + + .widget-reorder-nav span:before { + line-height: 39px; + } + + /* Compact the move widget areas. */ + #customize-theme-controls .widget-area-select li { + padding: 9px 42px 11px 15px; + } + + #customize-theme-controls .widget-area-select li:before { + top: 8px; + } +} diff --git a/tools/storybook/wordpress/css/customize-widgets-rtl.min.css b/tools/storybook/wordpress/css/customize-widgets-rtl.min.css new file mode 100644 index 00000000000..255d2c854df --- /dev/null +++ b/tools/storybook/wordpress/css/customize-widgets-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.wp-full-overlay-sidebar{overflow:visible}.control-section.control-section-sidebar,.customize-control-sidebar_widgets .hide-if-js,.customize-control-sidebar_widgets label{display:none}.control-section.control-section-sidebar .accordion-section-content.ui-sortable{overflow:visible}.customize-control-widget_form .widget-top{background:#fff;transition:opacity .5s}.customize-control .widget-action{color:#787c82}.customize-control .widget-action:focus,.customize-control .widget-top:hover .widget-action{color:#1d2327}.customize-control-widget_form:not(.widget-rendered) .widget-top{opacity:.5}.customize-control-widget_form .widget-control-save{display:none}.customize-control-widget_form .spinner{visibility:hidden;margin-top:0}.customize-control-widget_form.previewer-loading .spinner{visibility:visible}.customize-control-widget_form.widget-form-disabled .widget-content{opacity:.7;pointer-events:none;-webkit-user-select:none;user-select:none}.customize-control-widget_form .widget{margin-bottom:0}.customize-control-widget_form.wide-widget-control .widget-inside{position:fixed;right:299px;top:25%;border:1px solid #dcdcde;overflow:auto}.customize-control-widget_form.wide-widget-control .widget-inside>.form{padding:20px}.customize-control-widget_form.wide-widget-control .widget-top{transition:background-color .4s}.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top,.customize-control-widget_form.wide-widget-control.expanding .widget-top{background-color:#dcdcde}.widget-inside{padding:1px 10px 10px;border-top:none;line-height:1.23076923}.customize-control-widget_form.expanded .widget-action .toggle-indicator:before{content:"\f142"}.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before{content:"\f141"}.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before{content:"\f139"}.widget-title-action{cursor:pointer}.customize-control-widget_form .widget .customize-control-title,.widget-top{cursor:move}.control-section.accordion-section.highlighted>.accordion-section-title,.customize-control-widget_form.highlighted{outline:0;box-shadow:0 0 2px rgba(79,148,212,.8);position:relative;z-index:1}#widget-customizer-control-templates{display:none}#customize-theme-controls .widget-reorder-nav{display:none;float:left;background-color:#f6f7f7}.move-widget:before{content:"\f504"}#customize-theme-controls .move-widget-area{display:none;background:#fff;border:1px solid #c3c4c7;border-top:none;cursor:auto}#customize-theme-controls .reordering .move-widget-area.active{display:block}#customize-theme-controls .move-widget-area .description{margin:0;padding:15px 20px;font-weight:400}#customize-theme-controls .widget-area-select{margin:0;padding:0;list-style:none}#customize-theme-controls .widget-area-select li{position:relative;margin:0;padding:13px 42px 15px 15px;color:#50575e;border-top:1px solid #c3c4c7;cursor:pointer;-webkit-user-select:none;user-select:none}#customize-theme-controls .widget-area-select li:before{display:none;content:"\f147";position:absolute;top:12px;right:10px;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#customize-theme-controls .widget-area-select li:last-child{border-bottom:1px solid #c3c4c7}#customize-theme-controls .widget-area-select .selected{color:#fff;background:#2271b1}#customize-theme-controls .widget-area-select .selected:before{display:block}#customize-theme-controls .move-widget-actions{text-align:left;padding:12px}#customize-theme-controls .reordering .widget-title-action{display:none}#customize-theme-controls .reordering .widget-reorder-nav{display:block}.wp-customizer div.mce-inline-toolbar-grp,.wp-customizer div.mce-tooltip{z-index:500100!important}.wp-customizer .ui-autocomplete.wplink-autocomplete{z-index:500110}.wp-customizer #wp-link-backdrop{z-index:500100}.wp-customizer #wp-link-wrap{z-index:500105}#widgets-left #available-widgets .widget{float:none!important;width:auto!important}#available-widgets .widget-action{display:none}.ios #available-widgets{transition:right 0s}#available-widgets .widget-tpl.selected,#available-widgets .widget-tpl:hover{background:#f6f7f7;border-bottom-color:#c3c4c7;color:#2271b1;border-right:4px solid #2271b1}#customize-controls .widget-title h3{font-size:1em}#available-widgets .widget-title h3{padding:0 0 5px;font-size:14px}#available-widgets .widget .widget-description{padding:0;color:#646970}#customize-preview{transition:all .2s}body.adding-widget #available-widgets{right:0;visibility:visible}body.adding-widget .wp-full-overlay-main{right:300px}body.adding-widget #customize-preview{opacity:.4}#available-widgets .widget-title{position:relative}#available-widgets .widget-title:before{content:"\f132";position:absolute;top:-3px;left:100%;margin-left:20px;width:20px;height:20px;color:#2c3338;font:normal 20px/1 dashicons;text-align:center;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-widgets [class*=easy] .widget-title:before{content:"\f328";top:-4px}#available-widgets [class*=like] .widget-title:before,#available-widgets [class*=super] .widget-title:before{content:"\f155";top:-4px}#available-widgets [class*=meta] .widget-title:before{content:"\f120"}#available-widgets [class*=archives] .widget-title:before{content:"\f480";top:-4px}#available-widgets [class*=categor] .widget-title:before{content:"\f318";top:-4px}#available-widgets [class*=chat] .widget-title:before,#available-widgets [class*=comment] .widget-title:before,#available-widgets [class*=testimonial] .widget-title:before{content:"\f101"}#available-widgets [class*=post] .widget-title:before{content:"\f109"}#available-widgets [class*=page] .widget-title:before{content:"\f105"}#available-widgets [class*=text] .widget-title:before{content:"\f478"}#available-widgets [class*=link] .widget-title:before{content:"\f103"}#available-widgets [class*=search] .widget-title:before{content:"\f179"}#available-widgets [class*=menu] .widget-title:before,#available-widgets [class*=nav] .widget-title:before{content:"\f333"}#available-widgets [class*=tag] .widget-title:before{content:"\f479"}#available-widgets [class*=rss] .widget-title:before{content:"\f303";top:-6px}#available-widgets [class*=calendar] .widget-title:before,#available-widgets [class*=event] .widget-title:before{content:"\f145";top:-4px}#available-widgets [class*=image] .widget-title:before,#available-widgets [class*=instagram] .widget-title:before,#available-widgets [class*=photo] .widget-title:before,#available-widgets [class*=slide] .widget-title:before{content:"\f128"}#available-widgets [class*=album] .widget-title:before,#available-widgets [class*=galler] .widget-title:before{content:"\f161"}#available-widgets [class*=tube] .widget-title:before,#available-widgets [class*=video] .widget-title:before{content:"\f126"}#available-widgets [class*=audio] .widget-title:before,#available-widgets [class*=music] .widget-title:before,#available-widgets [class*=radio] .widget-title:before{content:"\f127"}#available-widgets [class*=avatar] .widget-title:before,#available-widgets [class*=grofile] .widget-title:before,#available-widgets [class*=login] .widget-title:before,#available-widgets [class*=member] .widget-title:before,#available-widgets [class*=profile] .widget-title:before,#available-widgets [class*=subscriber] .widget-title:before,#available-widgets [class*=user] .widget-title:before{content:"\f110"}#available-widgets [class*=cart] .widget-title:before,#available-widgets [class*=commerce] .widget-title:before,#available-widgets [class*=shop] .widget-title:before{content:"\f174";top:-4px}#available-widgets [class*=firewall] .widget-title:before,#available-widgets [class*=secur] .widget-title:before{content:"\f332"}#available-widgets [class*=analytic] .widget-title:before,#available-widgets [class*=poll] .widget-title:before,#available-widgets [class*=stat] .widget-title:before{content:"\f185"}#available-widgets [class*=form] .widget-title:before{content:"\f175"}#available-widgets [class*=contact] .widget-title:before,#available-widgets [class*=mail] .widget-title:before,#available-widgets [class*=news] .widget-title:before,#available-widgets [class*=subscribe] .widget-title:before{content:"\f466"}#available-widgets [class*=share] .widget-title:before,#available-widgets [class*=socia] .widget-title:before{content:"\f237"}#available-widgets [class*=lang] .widget-title:before,#available-widgets [class*=translat] .widget-title:before{content:"\f326"}#available-widgets [class*=locat] .widget-title:before,#available-widgets [class*=map] .widget-title:before{content:"\f231"}#available-widgets [class*=download] .widget-title:before{content:"\f316"}#available-widgets [class*=weather] .widget-title:before{content:"\f176";top:-4px}#available-widgets [class*=facebook] .widget-title:before{content:"\f304"}#available-widgets [class*=tweet] .widget-title:before,#available-widgets [class*=twitter] .widget-title:before{content:"\f301"}@media screen and (max-height:700px) and (min-width:981px){.customize-control-widget_form{margin-bottom:0}.widget-top{box-shadow:none;margin-top:-1px}.widget-top:hover{position:relative;z-index:1}.last-widget{margin-bottom:15px}.widget-title h3{padding:13px 15px}.widget-top .widget-action{padding:8px 10px}.widget-reorder-nav span{height:39px}.widget-reorder-nav span:before{line-height:39px}#customize-theme-controls .widget-area-select li{padding:9px 42px 11px 15px}#customize-theme-controls .widget-area-select li:before{top:8px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/customize-widgets.css b/tools/storybook/wordpress/css/customize-widgets.css new file mode 100644 index 00000000000..3bd7a46b28e --- /dev/null +++ b/tools/storybook/wordpress/css/customize-widgets.css @@ -0,0 +1,478 @@ +.wp-full-overlay-sidebar { + overflow: visible; +} + +/** + * Hide all sidebar sections by default, only show them (via JS) once the + * preview loads and we know whether the sidebars are used in the template. + */ + +.control-section.control-section-sidebar, +.customize-control-sidebar_widgets label, +.customize-control-sidebar_widgets .hide-if-js { + /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ + display: none; +} + +.control-section.control-section-sidebar .accordion-section-content.ui-sortable { + overflow: visible; +} + +/* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */ +.customize-control-widget_form .widget-top { + background: #fff; + transition: opacity 0.5s; +} + +.customize-control .widget-action { + color: #787c82; +} + +.customize-control .widget-top:hover .widget-action, +.customize-control .widget-action:focus { + color: #1d2327; +} + +.customize-control-widget_form:not(.widget-rendered) .widget-top { + opacity: 0.5; +} + +.customize-control-widget_form .widget-control-save { + display: none; +} + +.customize-control-widget_form .spinner { + visibility: hidden; + margin-top: 0; +} + +.customize-control-widget_form.previewer-loading .spinner { + visibility: visible; +} + +.customize-control-widget_form.widget-form-disabled .widget-content { + opacity: 0.7; + pointer-events: none; + -webkit-user-select: none; + user-select: none; +} + +.customize-control-widget_form .widget { + margin-bottom: 0; +} + +.customize-control-widget_form.wide-widget-control .widget-inside { + position: fixed; + left: 299px; + top: 25%; + border: 1px solid #dcdcde; + overflow: auto; +} +.customize-control-widget_form.wide-widget-control .widget-inside > .form { + padding: 20px; +} + +.customize-control-widget_form.wide-widget-control .widget-top { + transition: background-color 0.4s; +} +.customize-control-widget_form.wide-widget-control.expanding .widget-top, +.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top { + background-color: #dcdcde; +} + +.widget-inside { + padding: 1px 10px 10px; + border-top: none; + line-height: 1.23076923; +} + +.customize-control-widget_form.expanded .widget-action .toggle-indicator:before { + content: "\f142"; +} + +.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before { + content: "\f139"; +} + +.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before { + content: "\f141"; +} + +.widget-title-action { + cursor: pointer; +} + +.widget-top, +.customize-control-widget_form .widget .customize-control-title { + cursor: move; +} + +.control-section.accordion-section.highlighted > .accordion-section-title, +.customize-control-widget_form.highlighted { + outline: none; + box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); + position: relative; + z-index: 1; +} + +#widget-customizer-control-templates { + display: none; +} + +/** + * Widget reordering styles + */ + +#customize-theme-controls .widget-reorder-nav { + display: none; + float: right; + background-color: #f6f7f7; +} + +.move-widget:before { + content: "\f504"; +} + +#customize-theme-controls .move-widget-area { + display: none; + background: #fff; + border: 1px solid #c3c4c7; + border-top: none; + cursor: auto; +} + +#customize-theme-controls .reordering .move-widget-area.active { + display: block; +} + +#customize-theme-controls .move-widget-area .description { + margin: 0; + padding: 15px 20px; + font-weight: 400; +} + +#customize-theme-controls .widget-area-select { + margin: 0; + padding: 0; + list-style: none; +} + +#customize-theme-controls .widget-area-select li { + position: relative; + margin: 0; + padding: 13px 15px 15px 42px; + color: #50575e; + border-top: 1px solid #c3c4c7; + cursor: pointer; + -webkit-user-select: none; + user-select: none; +} + +#customize-theme-controls .widget-area-select li:before { + display: none; + content: "\f147"; + position: absolute; + top: 12px; + left: 10px; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +#customize-theme-controls .widget-area-select li:last-child { + border-bottom: 1px solid #c3c4c7; +} + +#customize-theme-controls .widget-area-select .selected { + color: #fff; + background: #2271b1; +} + +#customize-theme-controls .widget-area-select .selected:before { + display: block; +} + +#customize-theme-controls .move-widget-actions { + text-align: right; + padding: 12px; +} + +#customize-theme-controls .reordering .widget-title-action { + display: none; +} + +#customize-theme-controls .reordering .widget-reorder-nav { + display: block; +} + +/* Text Widget */ +.wp-customizer div.mce-inline-toolbar-grp, +.wp-customizer div.mce-tooltip { + z-index: 500100 !important; +} +.wp-customizer .ui-autocomplete.wplink-autocomplete { + z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-backdrop { + z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-wrap { + z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */ +} + +/** + * Styles for new widget addition panel + */ + +/* override widgets admin page rules in wp-admin/css/widgets.css */ +#widgets-left #available-widgets .widget { + float: none !important; + width: auto !important; +} + +/* Keep rule that is no longer necessary on widgets.php. */ +#available-widgets .widget-action { + display: none; +} + +.ios #available-widgets { + transition: left 0s; +} + +#available-widgets .widget-tpl:hover, +#available-widgets .widget-tpl.selected { + background: #f6f7f7; + border-bottom-color: #c3c4c7; + color: #2271b1; + border-left: 4px solid #2271b1; +} + +#customize-controls .widget-title h3 { + font-size: 1em; +} + +#available-widgets .widget-title h3 { + padding: 0 0 5px; + font-size: 14px; +} + +#available-widgets .widget .widget-description { + padding: 0; + color: #646970; +} + +#customize-preview { + transition: all 0.2s; +} + +body.adding-widget #available-widgets { + left: 0; + visibility: visible; +} + +body.adding-widget .wp-full-overlay-main { + left: 300px; +} + +body.adding-widget #customize-preview { + opacity: 0.4; +} + + +/** + * Widget Icon styling + * No plurals in naming. + * Ordered from lowest to highest specificity. + */ + +#available-widgets .widget-title { + position: relative; +} + +#available-widgets .widget-title:before { + content: "\f132"; + position: absolute; + top: -3px; + right: 100%; + margin-right: 20px; + width: 20px; + height: 20px; + color: #2c3338; + font: normal 20px/1 dashicons; + text-align: center; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* dashicons-smiley */ +#available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; } + +/* dashicons-star-filled */ +#available-widgets [class*="super"] .widget-title:before, +#available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; } + +/* dashicons-wordpress */ +#available-widgets [class*="meta"] .widget-title:before { content: "\f120"; } + +/* dashicons-archive */ +#available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; } + +/* dashicons-category */ +#available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; } + +/* dashicons-admin-comments */ +#available-widgets [class*="comment"] .widget-title:before, +#available-widgets [class*="testimonial"] .widget-title:before, +#available-widgets [class*="chat"] .widget-title:before { content: "\f101"; } + +/* dashicons-admin-post */ +#available-widgets [class*="post"] .widget-title:before { content: "\f109"; } + +/* dashicons-admin-page */ +#available-widgets [class*="page"] .widget-title:before { content: "\f105"; } + +/* dashicons-text */ +#available-widgets [class*="text"] .widget-title:before { content: "\f478"; } + +/* dashicons-admin-links */ +#available-widgets [class*="link"] .widget-title:before { content: "\f103"; } + +/* dashicons-search */ +#available-widgets [class*="search"] .widget-title:before { content: "\f179"; } + +/* dashicons-menu */ +#available-widgets [class*="menu"] .widget-title:before, +#available-widgets [class*="nav"] .widget-title:before { content: "\f333"; } + +/* dashicons-tagcloud */ +#available-widgets [class*="tag"] .widget-title:before { content: "\f479"; } + +/* dashicons-rss */ +#available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; } + +/* dashicons-calendar */ +#available-widgets [class*="event"] .widget-title:before, +#available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;} + +/* dashicons-format-image */ +#available-widgets [class*="image"] .widget-title:before, +#available-widgets [class*="photo"] .widget-title:before, +#available-widgets [class*="slide"] .widget-title:before, +#available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; } + +/* dashicons-format-gallery */ +#available-widgets [class*="album"] .widget-title:before, +#available-widgets [class*="galler"] .widget-title:before { content: "\f161"; } + +/* dashicons-format-video */ +#available-widgets [class*="video"] .widget-title:before, +#available-widgets [class*="tube"] .widget-title:before { content: "\f126"; } + +/* dashicons-format-audio */ +#available-widgets [class*="music"] .widget-title:before, +#available-widgets [class*="radio"] .widget-title:before, +#available-widgets [class*="audio"] .widget-title:before { content: "\f127"; } + +/* dashicons-admin-users */ +#available-widgets [class*="login"] .widget-title:before, +#available-widgets [class*="user"] .widget-title:before, +#available-widgets [class*="member"] .widget-title:before, +#available-widgets [class*="avatar"] .widget-title:before, +#available-widgets [class*="subscriber"] .widget-title:before, +#available-widgets [class*="profile"] .widget-title:before, +#available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; } + +/* dashicons-cart */ +#available-widgets [class*="commerce"] .widget-title:before, +#available-widgets [class*="shop"] .widget-title:before, +#available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; } + +/* dashicons-shield */ +#available-widgets [class*="secur"] .widget-title:before, +#available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; } + +/* dashicons-chart-bar */ +#available-widgets [class*="analytic"] .widget-title:before, +#available-widgets [class*="stat"] .widget-title:before, +#available-widgets [class*="poll"] .widget-title:before { content: "\f185"; } + +/* dashicons-feedback */ +#available-widgets [class*="form"] .widget-title:before { content: "\f175"; } + +/* dashicons-email-alt */ +#available-widgets [class*="subscribe"] .widget-title:before, +#available-widgets [class*="news"] .widget-title:before, +#available-widgets [class*="contact"] .widget-title:before, +#available-widgets [class*="mail"] .widget-title:before { content: "\f466"; } + +/* dashicons-share */ +#available-widgets [class*="share"] .widget-title:before, +#available-widgets [class*="socia"] .widget-title:before { content: "\f237"; } + +/* dashicons-translation */ +#available-widgets [class*="lang"] .widget-title:before, +#available-widgets [class*="translat"] .widget-title:before { content: "\f326"; } + +/* dashicons-location-alt */ +#available-widgets [class*="locat"] .widget-title:before, +#available-widgets [class*="map"] .widget-title:before { content: "\f231"; } + +/* dashicons-download */ +#available-widgets [class*="download"] .widget-title:before { content: "\f316"; } + +/* dashicons-cloud */ +#available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;} + +/* dashicons-facebook */ +#available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; } + +/* dashicons-twitter */ +#available-widgets [class*="tweet"] .widget-title:before, +#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } + +@media screen and (max-height: 700px) and (min-width: 981px) { + /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */ + .customize-control-widget_form { + margin-bottom: 0; + } + + .widget-top { + box-shadow: none; + margin-top: -1px; + } + + .widget-top:hover { + position: relative; + z-index: 1; + } + + .last-widget { + margin-bottom: 15px; + } + + .widget-title h3 { + padding: 13px 15px; + } + + .widget-top .widget-action { + padding: 8px 10px; + } + + .widget-reorder-nav span { + height: 39px; + } + + .widget-reorder-nav span:before { + line-height: 39px; + } + + /* Compact the move widget areas. */ + #customize-theme-controls .widget-area-select li { + padding: 9px 15px 11px 42px; + } + + #customize-theme-controls .widget-area-select li:before { + top: 8px; + } +} diff --git a/tools/storybook/wordpress/css/customize-widgets.min.css b/tools/storybook/wordpress/css/customize-widgets.min.css new file mode 100644 index 00000000000..657e21dffe8 --- /dev/null +++ b/tools/storybook/wordpress/css/customize-widgets.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.wp-full-overlay-sidebar{overflow:visible}.control-section.control-section-sidebar,.customize-control-sidebar_widgets .hide-if-js,.customize-control-sidebar_widgets label{display:none}.control-section.control-section-sidebar .accordion-section-content.ui-sortable{overflow:visible}.customize-control-widget_form .widget-top{background:#fff;transition:opacity .5s}.customize-control .widget-action{color:#787c82}.customize-control .widget-action:focus,.customize-control .widget-top:hover .widget-action{color:#1d2327}.customize-control-widget_form:not(.widget-rendered) .widget-top{opacity:.5}.customize-control-widget_form .widget-control-save{display:none}.customize-control-widget_form .spinner{visibility:hidden;margin-top:0}.customize-control-widget_form.previewer-loading .spinner{visibility:visible}.customize-control-widget_form.widget-form-disabled .widget-content{opacity:.7;pointer-events:none;-webkit-user-select:none;user-select:none}.customize-control-widget_form .widget{margin-bottom:0}.customize-control-widget_form.wide-widget-control .widget-inside{position:fixed;left:299px;top:25%;border:1px solid #dcdcde;overflow:auto}.customize-control-widget_form.wide-widget-control .widget-inside>.form{padding:20px}.customize-control-widget_form.wide-widget-control .widget-top{transition:background-color .4s}.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top,.customize-control-widget_form.wide-widget-control.expanding .widget-top{background-color:#dcdcde}.widget-inside{padding:1px 10px 10px;border-top:none;line-height:1.23076923}.customize-control-widget_form.expanded .widget-action .toggle-indicator:before{content:"\f142"}.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before{content:"\f139"}.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before{content:"\f141"}.widget-title-action{cursor:pointer}.customize-control-widget_form .widget .customize-control-title,.widget-top{cursor:move}.control-section.accordion-section.highlighted>.accordion-section-title,.customize-control-widget_form.highlighted{outline:0;box-shadow:0 0 2px rgba(79,148,212,.8);position:relative;z-index:1}#widget-customizer-control-templates{display:none}#customize-theme-controls .widget-reorder-nav{display:none;float:right;background-color:#f6f7f7}.move-widget:before{content:"\f504"}#customize-theme-controls .move-widget-area{display:none;background:#fff;border:1px solid #c3c4c7;border-top:none;cursor:auto}#customize-theme-controls .reordering .move-widget-area.active{display:block}#customize-theme-controls .move-widget-area .description{margin:0;padding:15px 20px;font-weight:400}#customize-theme-controls .widget-area-select{margin:0;padding:0;list-style:none}#customize-theme-controls .widget-area-select li{position:relative;margin:0;padding:13px 15px 15px 42px;color:#50575e;border-top:1px solid #c3c4c7;cursor:pointer;-webkit-user-select:none;user-select:none}#customize-theme-controls .widget-area-select li:before{display:none;content:"\f147";position:absolute;top:12px;left:10px;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#customize-theme-controls .widget-area-select li:last-child{border-bottom:1px solid #c3c4c7}#customize-theme-controls .widget-area-select .selected{color:#fff;background:#2271b1}#customize-theme-controls .widget-area-select .selected:before{display:block}#customize-theme-controls .move-widget-actions{text-align:right;padding:12px}#customize-theme-controls .reordering .widget-title-action{display:none}#customize-theme-controls .reordering .widget-reorder-nav{display:block}.wp-customizer div.mce-inline-toolbar-grp,.wp-customizer div.mce-tooltip{z-index:500100!important}.wp-customizer .ui-autocomplete.wplink-autocomplete{z-index:500110}.wp-customizer #wp-link-backdrop{z-index:500100}.wp-customizer #wp-link-wrap{z-index:500105}#widgets-left #available-widgets .widget{float:none!important;width:auto!important}#available-widgets .widget-action{display:none}.ios #available-widgets{transition:left 0s}#available-widgets .widget-tpl.selected,#available-widgets .widget-tpl:hover{background:#f6f7f7;border-bottom-color:#c3c4c7;color:#2271b1;border-left:4px solid #2271b1}#customize-controls .widget-title h3{font-size:1em}#available-widgets .widget-title h3{padding:0 0 5px;font-size:14px}#available-widgets .widget .widget-description{padding:0;color:#646970}#customize-preview{transition:all .2s}body.adding-widget #available-widgets{left:0;visibility:visible}body.adding-widget .wp-full-overlay-main{left:300px}body.adding-widget #customize-preview{opacity:.4}#available-widgets .widget-title{position:relative}#available-widgets .widget-title:before{content:"\f132";position:absolute;top:-3px;right:100%;margin-right:20px;width:20px;height:20px;color:#2c3338;font:normal 20px/1 dashicons;text-align:center;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-widgets [class*=easy] .widget-title:before{content:"\f328";top:-4px}#available-widgets [class*=like] .widget-title:before,#available-widgets [class*=super] .widget-title:before{content:"\f155";top:-4px}#available-widgets [class*=meta] .widget-title:before{content:"\f120"}#available-widgets [class*=archives] .widget-title:before{content:"\f480";top:-4px}#available-widgets [class*=categor] .widget-title:before{content:"\f318";top:-4px}#available-widgets [class*=chat] .widget-title:before,#available-widgets [class*=comment] .widget-title:before,#available-widgets [class*=testimonial] .widget-title:before{content:"\f101"}#available-widgets [class*=post] .widget-title:before{content:"\f109"}#available-widgets [class*=page] .widget-title:before{content:"\f105"}#available-widgets [class*=text] .widget-title:before{content:"\f478"}#available-widgets [class*=link] .widget-title:before{content:"\f103"}#available-widgets [class*=search] .widget-title:before{content:"\f179"}#available-widgets [class*=menu] .widget-title:before,#available-widgets [class*=nav] .widget-title:before{content:"\f333"}#available-widgets [class*=tag] .widget-title:before{content:"\f479"}#available-widgets [class*=rss] .widget-title:before{content:"\f303";top:-6px}#available-widgets [class*=calendar] .widget-title:before,#available-widgets [class*=event] .widget-title:before{content:"\f145";top:-4px}#available-widgets [class*=image] .widget-title:before,#available-widgets [class*=instagram] .widget-title:before,#available-widgets [class*=photo] .widget-title:before,#available-widgets [class*=slide] .widget-title:before{content:"\f128"}#available-widgets [class*=album] .widget-title:before,#available-widgets [class*=galler] .widget-title:before{content:"\f161"}#available-widgets [class*=tube] .widget-title:before,#available-widgets [class*=video] .widget-title:before{content:"\f126"}#available-widgets [class*=audio] .widget-title:before,#available-widgets [class*=music] .widget-title:before,#available-widgets [class*=radio] .widget-title:before{content:"\f127"}#available-widgets [class*=avatar] .widget-title:before,#available-widgets [class*=grofile] .widget-title:before,#available-widgets [class*=login] .widget-title:before,#available-widgets [class*=member] .widget-title:before,#available-widgets [class*=profile] .widget-title:before,#available-widgets [class*=subscriber] .widget-title:before,#available-widgets [class*=user] .widget-title:before{content:"\f110"}#available-widgets [class*=cart] .widget-title:before,#available-widgets [class*=commerce] .widget-title:before,#available-widgets [class*=shop] .widget-title:before{content:"\f174";top:-4px}#available-widgets [class*=firewall] .widget-title:before,#available-widgets [class*=secur] .widget-title:before{content:"\f332"}#available-widgets [class*=analytic] .widget-title:before,#available-widgets [class*=poll] .widget-title:before,#available-widgets [class*=stat] .widget-title:before{content:"\f185"}#available-widgets [class*=form] .widget-title:before{content:"\f175"}#available-widgets [class*=contact] .widget-title:before,#available-widgets [class*=mail] .widget-title:before,#available-widgets [class*=news] .widget-title:before,#available-widgets [class*=subscribe] .widget-title:before{content:"\f466"}#available-widgets [class*=share] .widget-title:before,#available-widgets [class*=socia] .widget-title:before{content:"\f237"}#available-widgets [class*=lang] .widget-title:before,#available-widgets [class*=translat] .widget-title:before{content:"\f326"}#available-widgets [class*=locat] .widget-title:before,#available-widgets [class*=map] .widget-title:before{content:"\f231"}#available-widgets [class*=download] .widget-title:before{content:"\f316"}#available-widgets [class*=weather] .widget-title:before{content:"\f176";top:-4px}#available-widgets [class*=facebook] .widget-title:before{content:"\f304"}#available-widgets [class*=tweet] .widget-title:before,#available-widgets [class*=twitter] .widget-title:before{content:"\f301"}@media screen and (max-height:700px) and (min-width:981px){.customize-control-widget_form{margin-bottom:0}.widget-top{box-shadow:none;margin-top:-1px}.widget-top:hover{position:relative;z-index:1}.last-widget{margin-bottom:15px}.widget-title h3{padding:13px 15px}.widget-top .widget-action{padding:8px 10px}.widget-reorder-nav span{height:39px}.widget-reorder-nav span:before{line-height:39px}#customize-theme-controls .widget-area-select li{padding:9px 15px 11px 42px}#customize-theme-controls .widget-area-select li:before{top:8px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/dashboard-rtl.css b/tools/storybook/wordpress/css/dashboard-rtl.css new file mode 100644 index 00000000000..3ec1be84723 --- /dev/null +++ b/tools/storybook/wordpress/css/dashboard-rtl.css @@ -0,0 +1,1488 @@ +/*! This file is auto-generated */ +#wpbody-content #dashboard-widgets.columns-1 .postbox-container { + width: 100%; +} + +#wpbody-content #dashboard-widgets.columns-2 .postbox-container { + width: 49.5%; +} + +#wpbody-content #dashboard-widgets.columns-2 #postbox-container-2, +#wpbody-content #dashboard-widgets.columns-2 #postbox-container-3, +#wpbody-content #dashboard-widgets.columns-2 #postbox-container-4 { + float: left; + width: 50.5%; +} + +#wpbody-content #dashboard-widgets.columns-3 .postbox-container { + width: 33.5%; +} + +#wpbody-content #dashboard-widgets.columns-3 #postbox-container-1 { + width: 33%; +} + +#wpbody-content #dashboard-widgets.columns-3 #postbox-container-3, +#wpbody-content #dashboard-widgets.columns-3 #postbox-container-4 { + float: left; +} + +#wpbody-content #dashboard-widgets.columns-4 .postbox-container { + width: 25%; +} + +#dashboard-widgets .postbox-container { + width: 25%; +} + +#dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container { + border: none !important; +} + +#dashboard-widgets-wrap { + overflow: hidden; + margin: 0 -8px; +} + +#dashboard-widgets .postbox .inside { + margin-bottom: 0; +} + +#dashboard-widgets .meta-box-sortables { + display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ + /* Required min-height to make the jQuery UI Sortable drop zone work. */ + min-height: 100px; + margin: 0 8px 20px; +} + +#dashboard-widgets .postbox-container .empty-container { + outline: 3px dashed #c3c4c7; + height: 250px; +} + +/* Only highlight drop zones when dragging and only in the 2 columns layout. */ +.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { + outline: 3px dashed #646970; + /* Prevent margin on the child from collapsing with margin on the parent. */ + display: flow-root; +} + +#dashboard-widgets .postbox-container .empty-container:after { + content: attr(data-emptystring); + margin: auto; + position: absolute; + top: 50%; + right: 0; + left: 0; + transform: translateY( -50% ); + padding: 0 2em; + text-align: center; + color: #646970; + font-size: 16px; + line-height: 1.5; + display: none; +} + + +/* @todo: this was originally in this section, but likely belongs elsewhere */ +#the-comment-list td.comment p.comment-author { + margin-top: 0; + margin-right: 0; +} + +#the-comment-list p.comment-author img { + float: right; + margin-left: 8px; +} + +#the-comment-list p.comment-author strong a { + border: none; +} + +#the-comment-list td { + vertical-align: top; +} + +#the-comment-list td.comment { + word-wrap: break-word; +} + +#the-comment-list td.comment img { + max-width: 100%; +} + +/* Screen meta exception for when the "Dashboard" heading is missing or located below the Welcome Panel. */ +.index-php #screen-meta-links { + margin: 0 0 8px 20px; +} + +/* Welcome Panel */ +.welcome-panel { + position: relative; + overflow: auto; + margin: 16px 0; + background: #2271b1 url(../images/about-texture.png) center repeat; + background-size: 500px 500px; + background-blend-mode: overlay; + font-size: 14px; + line-height: 1.3; + clear: both; +} + +.welcome-panel::before { + content: ""; + position: absolute; + top: -16px; + left: 96px; + z-index: 0; + width: 300px; + height: 382px; + background: url(../images/about-header-about.svg) no-repeat center; + background-size: contain; +} + +.welcome-panel h2 { + margin: 0; + font-size: 48px; + font-weight: 600; + line-height: 1.25; + color: #fff; +} + +.welcome-panel h3 { + margin: 0; + font-size: 20px; + font-weight: 400; + line-height: 1.4; +} + +.welcome-panel p { + font-size: inherit; + line-height: inherit; +} + +.welcome-panel-header { + color: #fff; +} + +.welcome-panel-header a { + color: #fff; +} + +.welcome-panel-header a:focus, +.welcome-panel-header a:hover { + color: #f5e6ab; + text-decoration: none; +} + +.welcome-panel-header a:focus, +.welcome-panel .welcome-panel-close:focus { + outline-color: currentColor; + outline-offset: 1px; + box-shadow: none; +} + +.welcome-panel-header p { + margin: 0.5em 0 0; + font-size: 20px; + line-height: 1.4; +} + +.welcome-panel .welcome-panel-close { + position: absolute; + top: 10px; + left: 10px; + padding: 10px 24px 10px 15px; + font-size: 13px; + line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */ + text-decoration: none; +} + +.welcome-panel .welcome-panel-close:before { + position: absolute; + top: 8px; + right: 0; + transition: all .1s ease-in-out; + content: '\f335'; + font-size: 24px; + color: #fff; +} + +.welcome-panel .welcome-panel-close { + color: #fff; +} + +.welcome-panel .welcome-panel-close:hover, +.welcome-panel .welcome-panel-close:focus, +.welcome-panel .welcome-panel-close:hover::before, +.welcome-panel .welcome-panel-close:focus::before { + color: #f5e6ab; +} + +/* @deprecated 5.9.0 -- Button removed from panel. */ +.wp-core-ui .welcome-panel .button.button-hero { + margin: 15px 0 3px 13px; + padding: 12px 36px; + height: auto; + line-height: 1.4285714; + white-space: normal; +} + +.welcome-panel-content { + min-height: 400px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.welcome-panel-header { + box-sizing: border-box; + margin-right: auto; + margin-left: auto; + max-width: 1500px; + width: 100%; + /* 408px = 300px (balloon width) + 96px (offset from edge) + 16px (spacing). */ + padding: 48px 48px 48px 408px; +} + +.welcome-panel .welcome-panel-column-container { + box-sizing: border-box; + width: 100%; + clear: both; + display: grid; + z-index: 1; + margin-top: 32px; + padding: 48px; + grid-template-columns: repeat(3, 1fr); + gap: 32px; + align-self: flex-end; + background: #fff; +} + +[class*="welcome-panel-icon"] { + height: 60px; + width: 60px; + background-color: #1d2327; + background-position: center; + background-size: 24px 24px; + background-repeat: no-repeat; + border-radius: 100%; +} + +.welcome-panel-column { + display: grid; + grid-template-columns: min-content 1fr; + gap: 24px; +} + +.welcome-panel-icon-pages { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E"); +} + +.welcome-panel-icon-layout { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E"); +} + +.welcome-panel-icon-styles { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E"); +} + +/* @deprecated 5.9.0 -- Section removed from welcome panel. */ +.welcome-panel .welcome-widgets-menus { + line-height: 1.14285714; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel .welcome-panel-column ul { + margin: 0.8em 0 1em 1em; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel li { + font-size: 14px; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel li a { + text-decoration: none; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel .welcome-panel-column li { + line-height: 1.14285714; + list-style-type: none; + padding: 0 0 8px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-icon { + background: transparent !important; +} + +/* Welcome Panel and Right Now common Icons style */ + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-icon:before, +#dashboard_right_now li a:before, +#dashboard_right_now li span:before, +#dashboard_right_now .search-engines-info:before { + color: #646970; + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + padding: 0 0 0 10px; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + vertical-align: top; +} + +/* Welcome Panel specific Icons styles */ + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-write-blog:before, +.welcome-panel .welcome-edit-page:before { + content: "\f119"; + top: -3px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-add-page:before { + content: "\f132"; + top: -1px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-setup-home:before { + content: "\f102"; + top: -1px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-view-site:before { + content: "\f115"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-widgets-menus:before { + content: "\f116"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-widgets:before { + content: "\f538"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-menus:before { + content: "\f163"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-comments:before { + content: "\f117"; + top: -1px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-learn-more:before { + content: "\f118"; + top: -1px; +} + +/* Right Now specific Icons styles */ + +#dashboard_right_now .search-engines-info:before, +#dashboard_right_now li a:before, +#dashboard_right_now li > span:before { /* get only the first level span to exclude screen-reader-text in mu-storage */ + content: "\f159"; /* generic icon for items added by CPTs ? */ + padding: 0 0 0 5px; +} + +#dashboard_right_now .page-count a:before, +#dashboard_right_now .page-count span:before { + content: "\f105"; +} + +#dashboard_right_now .post-count a:before, +#dashboard_right_now .post-count span:before { + content: "\f109"; +} + +#dashboard_right_now .comment-count a:before { + content: "\f101"; +} + +#dashboard_right_now .comment-mod-count a:before { + content: "\f125"; +} + +#dashboard_right_now .storage-count a:before { + content: "\f104"; +} + +#dashboard_right_now .storage-count.warning a:before { + content: "\f153"; +} + +#dashboard_right_now .search-engines-info:before { + content: "\f348"; +} + +/* Dashboard WordPress events */ + +.community-events-errors { + margin: 0; +} + +.community-events-loading { + padding: 10px 12px 8px; +} + +.community-events { + margin-bottom: 6px; + padding: 0 12px; +} + +.community-events .spinner { + float: none; + margin: 5px 2px 0; + vertical-align: top; +} + +.community-events-errors[aria-hidden="true"], +.community-events-errors [aria-hidden="true"], +.community-events-loading[aria-hidden="true"], +.community-events[aria-hidden="true"], +.community-events form[aria-hidden="true"] { + display: none; +} + +.community-events .activity-block:first-child, +.community-events h2 { + padding-top: 12px; + padding-bottom: 10px; +} + +.community-events-form { + margin: 15px 0 5px; +} + +.community-events-form .regular-text { + width: 40%; + height: 29px; + margin: 0; + vertical-align: top; +} + +.community-events li.event-none { + border-right: 4px solid #72aee6; +} + +#dashboard-widgets .community-events li.event-none a { + text-decoration: underline; +} + +.community-events-form label { + display: inline-block; + vertical-align: top; + line-height: 2.15384615; + height: 28px; +} + +.community-events .activity-block > p { + margin-bottom: 0; + display: inline; +} + +.community-events-toggle-location { + vertical-align: middle; +} + +#community-events-submit { + margin-right: 3px; + margin-left: 3px; +} + +/* Needs higher specificity than #dashboard-widgets .button-link */ +#dashboard-widgets .community-events-cancel.button-link { + vertical-align: top; + /* Same properties as the submit button for cross-browsers alignment. */ + line-height: 2; + height: 28px; + text-decoration: underline; +} + +.community-events ul { + background-color: #f6f7f7; + padding-right: 0; + padding-left: 0; + padding-bottom: 0; +} + +.community-events li { + margin: 0; + padding: 8px 12px; + color: #2c3338; +} +.community-events li:first-child { + border-top: 1px solid #f0f0f1; +} + +.community-events li ~ li { + border-top: 1px solid #f0f0f1; +} + +.community-events .activity-block.last { + border-bottom: 1px solid #f0f0f1; + padding-top: 0; + margin-top: -1px; +} + +.community-events .event-info { + display: block; +} + +.event-icon { + height: 18px; + padding-left: 10px; + width: 18px; + display: none; /* Hide on smaller screens */ +} + +.event-icon:before { + color: #646970; + font-size: 18px; +} +.event-meetup .event-icon:before { + content: "\f484"; +} +.event-wordcamp .event-icon:before { + content: "\f486"; +} + +.community-events .event-title { + font-weight: 600; + display: block; +} + +.community-events .event-date, +.community-events .event-time { + display: block; +} + +.community-events-footer { + margin-top: 0; + margin-bottom: 0; + padding: 12px; + border-top: 1px solid #f0f0f1; + color: #dcdcde; +} + +/* Safari 10 + VoiceOver specific: without this, the hidden text gets read out before the link. */ +.community-events-footer .screen-reader-text { + height: inherit; + white-space: nowrap; +} + +/* Dashboard WordPress news */ + +#dashboard_primary .inside { + margin: 0; + padding: 0; +} + +#dashboard_primary .widget-loading { + padding: 12px 12px 0; + margin-bottom: 1em !important; /* Needs to override `.postbox .inside > p:last-child` in common.css */ +} + +/* Notice when JS is off. */ +#dashboard_primary .inside .notice { + margin: 0; +} + +body #dashboard-widgets .postbox form .submit { + margin: 0; +} + +/* Used only for configurable widgets. */ +.dashboard-widget-control-form p { + margin-top: 0; +} + +.rssSummary { + color: #646970; + margin-top: 4px; +} + +#dashboard_primary .rss-widget { + font-size: 13px; + padding: 0 12px; +} + +#dashboard_primary .rss-widget:last-child { + border-bottom: none; + padding-bottom: 8px; +} + +#dashboard_primary .rss-widget a { + font-weight: 400; +} + +#dashboard_primary .rss-widget span, +#dashboard_primary .rss-widget span.rss-date { + color: #646970; +} + +#dashboard_primary .rss-widget span.rss-date { + margin-right: 12px; +} + +#dashboard_primary .rss-widget ul li { + padding: 4px 0; + margin: 0; +} + +/* Dashboard right now */ + +#dashboard_right_now ul { + margin: 0; + /* contain floats but don't use overflow: hidden */ + display: inline-block; + width: 100%; +} + +#dashboard_right_now li { + width: 50%; + float: right; + margin-bottom: 10px; +} + +#dashboard_right_now .inside { + padding: 0; +} + +#dashboard_right_now .main { + padding: 0 12px 11px; +} + +#dashboard_right_now .main p { + margin: 0; +} + +#dashboard_right_now #wp-version-message .button { + float: left; + position: relative; + top: -5px; + margin-right: 5px; +} + +#dashboard_right_now p.search-engines-info { + margin: 1em 0; +} + +.mu-storage { + overflow: hidden; +} + +#dashboard-widgets h3.mu-storage { + margin: 0 0 10px; + padding: 0; + font-size: 14px; + font-weight: 400; +} + +/* Dashboard right now - Colors */ + +#dashboard_right_now .sub { + color: #50575e; + background: #f6f7f7; + border-top: 1px solid #f0f0f1; + padding: 10px 12px 6px; +} + +#dashboard_right_now .sub h3 { + color: #50575e; +} + +#dashboard_right_now .sub p { + margin: 0 0 1em; +} + +#dashboard_right_now .warning a:before, +#dashboard_right_now .warning span:before { + color: #d63638; +} + +/* Dashboard Quick Draft */ + +#dashboard_quick_press .inside { + margin: 0; + padding: 0; +} + +#dashboard_quick_press div.updated { + margin-bottom: 10px; + border: 1px solid #f0f0f1; + border-width: 1px 0 1px 1px; +} + +#dashboard_quick_press form { + margin: 12px; +} + +#dashboard_quick_press .drafts { + padding: 10px 0 0; +} + +/* Dashboard Quick Draft - Form styling */ + +#dashboard_quick_press label { + display: inline-block; + margin-bottom: 4px; +} + +#dashboard_quick_press input, +#dashboard_quick_press textarea { + box-sizing: border-box; + margin: 0; +} + +#dashboard-widgets .postbox form .submit { + margin: -39px 0; + float: left; +} + +#description-wrap { + margin-top: 12px; +} + +#quick-press textarea#content { + min-height: 90px; + max-height: 1300px; + margin: 0 0 8px; + padding: 6px 7px; + resize: none; +} + +/* Dashboard Quick Draft - Drafts list */ + +.js #dashboard_quick_press .drafts { + border-top: 1px solid #f0f0f1; +} + +#dashboard_quick_press .drafts abbr { + border: none; +} + +#dashboard_quick_press .drafts .view-all { + float: left; + margin: 0 0 0 12px; +} + +#dashboard_primary a.rsswidget { + font-weight: 400; +} + +#dashboard_quick_press .drafts ul { + margin: 0 12px; +} + +#dashboard_quick_press .drafts li { + margin-bottom: 1em; +} +#dashboard_quick_press .drafts li time { + color: #646970; +} + +#dashboard_quick_press .drafts p { + margin: 0; + word-wrap: break-word; +} + +#dashboard_quick_press .draft-title { + word-wrap: break-word; +} + +#dashboard_quick_press .draft-title a, +#dashboard_quick_press .draft-title time { + margin: 0 0 0 5px; +} + +/* Dashboard common styles */ + +#dashboard-widgets h4, /* Back-compat for pre-4.4 */ +#dashboard-widgets h3, +#dashboard_quick_press .drafts h2 { + margin: 0 12px 8px; + padding: 0; + font-size: 14px; + font-weight: 400; + color: #1d2327; +} + +#dashboard_quick_press .drafts h2 { + line-height: inherit; +} + +#dashboard-widgets .inside h4, /* Back-compat for pre-4.4 */ +#dashboard-widgets .inside h3 { + margin-right: 0; + margin-left: 0; +} + +/* Dashboard activity widget */ + +#dashboard_activity .comment-meta span.approve:before { + content: "\f227"; + font: 20px/.5 dashicons; + margin-right: 5px; + vertical-align: middle; + position: relative; + top: -1px; + margin-left: 2px; +} + +#dashboard_activity .inside { + margin: 0; + padding-bottom: 0; +} + +#dashboard_activity .no-activity { + overflow: hidden; + padding: 12px 0; + text-align: center; +} + +#dashboard_activity .no-activity p { + color: #646970; + font-size: 16px; +} + +#dashboard_activity .subsubsub { + float: none; + border-top: 1px solid #f0f0f1; + margin: 0 -12px; + padding: 8px 12px 4px; +} + +#dashboard_activity .subsubsub a .count, +#dashboard_activity .subsubsub a.current .count { + color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */ +} + +#future-posts ul, +#published-posts ul { + clear: both; + margin-bottom: 0; +} + +#future-posts li, +#published-posts li { + margin-bottom: 8px; +} + +#future-posts ul span, +#published-posts ul span { + display: inline-block; + margin-left: 5px; + min-width: 150px; + color: #646970; +} + +.activity-block { + border-bottom: 1px solid #f0f0f1; + margin: 0 -12px; + padding: 8px 12px 4px; +} + +.activity-block:last-child { + border-bottom: none; +} + +.activity-block .subsubsub li { + color: #dcdcde; +} + +/* Dashboard activity widget - Comments */ +/* @todo: needs serious de-duplication */ + +#activity-widget #the-comment-list tr.undo, +#activity-widget #the-comment-list div.undo { + background: none; + padding: 6px 0; + margin-right: 12px; +} + +#activity-widget #the-comment-list .comment-item { + background: #f6f7f7; + padding: 12px; + position: relative; +} + +#activity-widget #the-comment-list .avatar { + position: absolute; + top: 12px; +} + +#activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar { + padding-right: 63px; +} + +#activity-widget #the-comment-list .dashboard-comment-wrap blockquote { + margin: 1em 0; +} + +#activity-widget #the-comment-list .comment-item p.row-actions { + margin: 4px 0 0; +} + +#activity-widget #the-comment-list .comment-item:first-child { + border-top: 1px solid #f0f0f1; +} + +#activity-widget #the-comment-list .unapproved { + background-color: #fcf9e8; +} + +#activity-widget #the-comment-list .unapproved:before { + content: ""; + display: block; + position: absolute; + right: 0; + top: 0; + bottom: 0; + background: #d63638; + width: 4px; +} + +#activity-widget #the-comment-list .spam-undo-inside .avatar, +#activity-widget #the-comment-list .trash-undo-inside .avatar { + position: relative; + top: 0; +} + +/* Browse happy box */ + +#dashboard-widgets #dashboard_browser_nag.postbox .inside { + margin: 10px; +} + +.postbox .button-link .edit-box { + display: none; +} + +.edit-box { + opacity: 0; +} + +.hndle:hover .edit-box, +.edit-box:focus { + opacity: 1; +} + +#dashboard-widgets form .input-text-wrap input { + width: 100%; +} + +#dashboard-widgets form .textarea-wrap textarea { + width: 100%; +} + +#dashboard-widgets .postbox form .submit { + float: none; + margin: .5em 0 0; + padding: 0; + border: none; +} + +#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish { + min-width: 0; +} + +#dashboard-widgets li a, +#dashboard-widgets .button-link, +.community-events-footer a { + text-decoration: none; +} + +#dashboard-widgets h2 a { + text-decoration: underline; +} + +#dashboard-widgets .hndle .postbox-title-action { + float: left; + line-height: 1.2; +} + +#dashboard_plugins h5 { + font-size: 14px; +} + +/* Recent Comments */ + +#latest-comments #the-comment-list { + position: relative; + margin: 0 -12px; +} + +#activity-widget #the-comment-list .comment, +#activity-widget #the-comment-list .pingback { + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); +} + +#activity-widget .comments #the-comment-list .alt { + background-color: transparent; +} + +#activity-widget #latest-comments #the-comment-list .comment-item { + /* the row-actions paragraph is output only for users with 'edit_comment' capabilities, + for other users this needs a min height equal to the gravatar image */ + min-height: 50px; + margin: 0; + padding: 12px; +} + +#latest-comments #the-comment-list .pingback { + padding-right: 12px !important; +} + +#latest-comments #the-comment-list .comment-item:first-child { + border-top: none; +} + +#latest-comments #the-comment-list .comment-meta { + line-height: 1.5; + margin: 0; + color: #646970; +} + +#latest-comments #the-comment-list .comment-meta cite { + font-style: normal; + font-weight: 400; +} + +#latest-comments #the-comment-list .comment-item blockquote, +#latest-comments #the-comment-list .comment-item blockquote p { + margin: 0; + padding: 0; + display: inline; +} + +#latest-comments #the-comment-list .comment-item p.row-actions { + margin: 3px 0 0; + padding: 0; + font-size: 13px; +} + +/* Feeds */ +.rss-widget ul { + margin: 0; + padding: 0; + list-style: none; +} + +a.rsswidget { + font-size: 13px; + font-weight: 600; + line-height: 1.4; +} + +.rss-widget ul li { + line-height: 1.5; + margin-bottom: 12px; +} + +.rss-widget span.rss-date { + color: #646970; + font-size: 13px; + margin-right: 3px; +} + +.rss-widget cite { + display: block; + text-align: left; + margin: 0 0 1em; + padding: 0; +} + +.rss-widget cite:before { + content: "\2014"; +} + +.dashboard-comment-wrap { + word-wrap: break-word; +} + +/* Browser Nag */ +#dashboard_browser_nag a.update-browser-link { + font-size: 1.2em; + font-weight: 600; +} + +#dashboard_browser_nag a { + text-decoration: underline; +} + +#dashboard_browser_nag p.browser-update-nag.has-browser-icon { + padding-left: 128px; +} + +#dashboard_browser_nag .browser-icon { + margin-top: -32px; +} + +#dashboard_browser_nag.postbox { + background-color: #b32d2e; + background-image: none; + border-color: #b32d2e; + color: #fff; + box-shadow: none; +} + +#dashboard_browser_nag.postbox h2 { + border-bottom-color: transparent; + background: transparent none; + color: #fff; + box-shadow: none; +} + +#dashboard_browser_nag a { + color: #fff; +} + +#dashboard_browser_nag.postbox .postbox-header { + border-color: transparent; +} + +#dashboard_browser_nag h2.hndle { + border: none; + font-weight: 600; + font-size: 20px; + padding-top: 10px; +} + +.postbox#dashboard_browser_nag p a.dismiss { + font-size: 14px; +} + +.postbox#dashboard_browser_nag p, +.postbox#dashboard_browser_nag a, +.postbox#dashboard_browser_nag p.browser-update-nag { + font-size: 16px; +} + +/* PHP Nag */ +#dashboard_php_nag .dashicons-warning { + color: #dba617; + padding-left: 6px; +} + +#dashboard_php_nag.php-insecure .dashicons-warning { + color: #d63638; +} + +#dashboard_php_nag h2 { + display: inline-block; +} + +#dashboard_php_nag p { + margin: 12px 0; +} + +#dashboard_php_nag h3 { + font-weight: 600; +} + +#dashboard_php_nag .button .dashicons-external { + line-height: 25px; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media only screen and (min-width: 1600px) { + .welcome-panel .welcome-panel-column-container { + display: flex; + justify-content: center; + } + + .welcome-panel-column { + width: 100%; + max-width: 460px; + } +} + +/* one column on the dash */ +@media only screen and (max-width: 799px) { + #wpbody-content #dashboard-widgets .postbox-container { + width: 100%; + } + + #dashboard-widgets .meta-box-sortables { + min-height: 0; + } + + .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { + min-height: 100px; + } + + #dashboard-widgets .meta-box-sortables.empty-container { + margin-bottom: 0; + } +} + +/* two columns on the dash, but keep the setting if one is selected */ +@media only screen and (min-width: 800px) and (max-width: 1499px) { + #wpbody-content #dashboard-widgets .postbox-container { + width: 49.5%; + } + + #wpbody-content #dashboard-widgets #postbox-container-2, + #wpbody-content #dashboard-widgets #postbox-container-3, + #wpbody-content #dashboard-widgets #postbox-container-4 { + float: left; + width: 50.5%; + } + + #dashboard-widgets #postbox-container-3 .empty-container, + #dashboard-widgets #postbox-container-4 .empty-container { + outline: none; + height: 0; + min-height: 0; + margin-bottom: 0; + } + + #dashboard-widgets #postbox-container-3 .empty-container:after, + #dashboard-widgets #postbox-container-4 .empty-container:after { + display: none; + } + + #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container { + width: 100%; + } + + #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container { + outline: none; + height: 0; + min-height: 0; + margin-bottom: 0; + } + + /* show the radio buttons for column prefs only for one or two columns */ + .index-php .screen-layout, + .index-php .columns-prefs { + display: block; + } + + .columns-prefs .columns-prefs-3, + .columns-prefs .columns-prefs-4 { + display: none; + } + + #dashboard-widgets .postbox-container .empty-container:after { + display: block; + } +} + +/* three columns on the dash */ +@media only screen and (min-width: 1500px) and (max-width: 1800px) { + #wpbody-content #dashboard-widgets .postbox-container { + width: 33.5%; + } + + #wpbody-content #dashboard-widgets #postbox-container-1 { + width: 33%; + } + + #wpbody-content #dashboard-widgets #postbox-container-3, + #wpbody-content #dashboard-widgets #postbox-container-4 { + float: left; + } + + #dashboard-widgets #postbox-container-4 .empty-container { + outline: none; + height: 0; + min-height: 0; + margin-bottom: 0; + } + + #dashboard-widgets #postbox-container-4 .empty-container:after { + display: none; + } + + #dashboard-widgets .postbox-container .empty-container:after { + display: block; + } +} + +/* Always show the "Drag boxes here" CSS generated content on large screens. */ +@media only screen and (min-width: 1801px) { + #dashboard-widgets .postbox-container .empty-container:after { + display: block; + } +} + +@media screen and (max-width: 870px) { + /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ + .welcome-panel .welcome-panel-column li { + display: inline-block; + margin-left: 13px; + } + + /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ + .welcome-panel .welcome-panel-column ul { + margin: 0.4em 0 0; + } + +} + +@media screen and (max-width: 1180px) and (min-width: 783px) { + .welcome-panel-column { + grid-template-columns: 1fr; + } + + [class*="welcome-panel-icon"] { + display: none; + } +} + +@media screen and (max-width: 782px) { + .welcome-panel::before { + width: 240px; + height: 305px; + left: 32px; + } + + .welcome-panel-header { + /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */ + padding: 32px 32px 32px 288px; + } + + .welcome-panel .welcome-panel-column-container { + grid-template-columns: 1fr; + box-sizing: border-box; + padding: 32px; + width: 100%; + } + + .welcome-panel .welcome-panel-column-content { + max-width: 520px; + } + + /* Keep the close icon from overlapping the Welcome text. */ + .welcome-panel .welcome-panel-close { + overflow: hidden; + text-indent: 40px; + white-space: nowrap; + width: 20px; + height: 20px; + padding: 5px; + top: 5px; + left: 5px; + } + + .welcome-panel .welcome-panel-close::before { + top: 5px; + right: -35px; + } + + #dashboard-widgets h2 { + padding: 12px; + } + + #dashboard_recent_comments #the-comment-list .comment-item .avatar { + height: 30px; + width: 30px; + margin: 4px 0 5px 10px; + } + + .community-events-toggle-location { + height: 38px; + vertical-align: baseline; + } + + .community-events-form .regular-text { + height: 32px; + } + + #community-events-submit { + margin-bottom: 0; + /* Override .wp-core-ui .button */ + vertical-align: top; + } + + .community-events-form label, + #dashboard-widgets .community-events-cancel.button-link { + /* Same properties as the submit button for cross-browsers alignment. */ + font-size: 14px; + line-height: normal; + height: auto; + padding: 6px 0; + border: 1px solid transparent; + } + + .community-events .spinner { + margin-top: 7px; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + .welcome-panel::before { + display: none; + } + + .welcome-panel-header { + padding: 32px; + } +} + +@media screen and (max-width: 480px) { + .welcome-panel-column { + gap: 16px; + } +} + +@media screen and (max-width: 360px) { + .welcome-panel-column { + grid-template-columns: 1fr; + } + + [class*="welcome-panel-icon"] { + display: none; + } +} + +@media screen and (min-width: 355px) { + .community-events .event-info { + display: table-row; + float: right; + max-width: 59%; + } + + .event-icon, + .event-icon[aria-hidden="true"] { + display: table-cell; + } + + .event-info-inner { + display: table-cell; + } + + .community-events .event-date-time { + float: left; + max-width: 39%; + } + + .community-events .event-date, + .community-events .event-time { + text-align: left; + } +} diff --git a/tools/storybook/wordpress/css/dashboard-rtl.min.css b/tools/storybook/wordpress/css/dashboard-rtl.min.css new file mode 100644 index 00000000000..5ddca8b7789 --- /dev/null +++ b/tools/storybook/wordpress/css/dashboard-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#wpbody-content #dashboard-widgets.columns-1 .postbox-container{width:100%}#wpbody-content #dashboard-widgets.columns-2 .postbox-container{width:49.5%}#wpbody-content #dashboard-widgets.columns-2 #postbox-container-2,#wpbody-content #dashboard-widgets.columns-2 #postbox-container-3,#wpbody-content #dashboard-widgets.columns-2 #postbox-container-4{float:left;width:50.5%}#wpbody-content #dashboard-widgets.columns-3 .postbox-container{width:33.5%}#wpbody-content #dashboard-widgets.columns-3 #postbox-container-1{width:33%}#wpbody-content #dashboard-widgets.columns-3 #postbox-container-3,#wpbody-content #dashboard-widgets.columns-3 #postbox-container-4{float:left}#wpbody-content #dashboard-widgets.columns-4 .postbox-container{width:25%}#dashboard-widgets .postbox-container{width:25%}#dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container{border:none!important}#dashboard-widgets-wrap{overflow:hidden;margin:0 -8px}#dashboard-widgets .postbox .inside{margin-bottom:0}#dashboard-widgets .meta-box-sortables{display:flow-root;min-height:100px;margin:0 8px 20px}#dashboard-widgets .postbox-container .empty-container{outline:3px dashed #c3c4c7;height:250px}.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables{outline:3px dashed #646970;display:flow-root}#dashboard-widgets .postbox-container .empty-container:after{content:attr(data-emptystring);margin:auto;position:absolute;top:50%;right:0;left:0;transform:translateY(-50%);padding:0 2em;text-align:center;color:#646970;font-size:16px;line-height:1.5;display:none}#the-comment-list td.comment p.comment-author{margin-top:0;margin-right:0}#the-comment-list p.comment-author img{float:right;margin-left:8px}#the-comment-list p.comment-author strong a{border:none}#the-comment-list td{vertical-align:top}#the-comment-list td.comment{word-wrap:break-word}#the-comment-list td.comment img{max-width:100%}.index-php #screen-meta-links{margin:0 0 8px 20px}.welcome-panel{position:relative;overflow:auto;margin:16px 0;background:#2271b1 url(../images/about-texture.png) center repeat;background-size:500px 500px;background-blend-mode:overlay;font-size:14px;line-height:1.3;clear:both}.welcome-panel::before{content:"";position:absolute;top:-16px;left:96px;z-index:0;width:300px;height:382px;background:url(../images/about-header-about.svg) no-repeat center;background-size:contain}.welcome-panel h2{margin:0;font-size:48px;font-weight:600;line-height:1.25;color:#fff}.welcome-panel h3{margin:0;font-size:20px;font-weight:400;line-height:1.4}.welcome-panel p{font-size:inherit;line-height:inherit}.welcome-panel-header{color:#fff}.welcome-panel-header a{color:#fff}.welcome-panel-header a:focus,.welcome-panel-header a:hover{color:#f5e6ab;text-decoration:none}.welcome-panel .welcome-panel-close:focus,.welcome-panel-header a:focus{outline-color:currentColor;outline-offset:1px;box-shadow:none}.welcome-panel-header p{margin:.5em 0 0;font-size:20px;line-height:1.4}.welcome-panel .welcome-panel-close{position:absolute;top:10px;left:10px;padding:10px 24px 10px 15px;font-size:13px;line-height:1.23076923;text-decoration:none}.welcome-panel .welcome-panel-close:before{position:absolute;top:8px;right:0;transition:all .1s ease-in-out;content:'\f335';font-size:24px;color:#fff}.welcome-panel .welcome-panel-close{color:#fff}.welcome-panel .welcome-panel-close:focus,.welcome-panel .welcome-panel-close:focus::before,.welcome-panel .welcome-panel-close:hover,.welcome-panel .welcome-panel-close:hover::before{color:#f5e6ab}.wp-core-ui .welcome-panel .button.button-hero{margin:15px 0 3px 13px;padding:12px 36px;height:auto;line-height:1.4285714;white-space:normal}.welcome-panel-content{min-height:400px;display:flex;flex-direction:column;justify-content:space-between}.welcome-panel-header{box-sizing:border-box;margin-right:auto;margin-left:auto;max-width:1500px;width:100%;padding:48px 48px 48px 408px}.welcome-panel .welcome-panel-column-container{box-sizing:border-box;width:100%;clear:both;display:grid;z-index:1;margin-top:32px;padding:48px;grid-template-columns:repeat(3,1fr);gap:32px;align-self:flex-end;background:#fff}[class*=welcome-panel-icon]{height:60px;width:60px;background-color:#1d2327;background-position:center;background-size:24px 24px;background-repeat:no-repeat;border-radius:100%}.welcome-panel-column{display:grid;grid-template-columns:min-content 1fr;gap:24px}.welcome-panel-icon-pages{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E")}.welcome-panel-icon-layout{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E")}.welcome-panel-icon-styles{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E")}.welcome-panel .welcome-widgets-menus{line-height:1.14285714}.welcome-panel .welcome-panel-column ul{margin:.8em 0 1em 1em}.welcome-panel li{font-size:14px}.welcome-panel li a{text-decoration:none}.welcome-panel .welcome-panel-column li{line-height:1.14285714;list-style-type:none;padding:0 0 8px}.welcome-panel .welcome-icon{background:0 0!important}#dashboard_right_now .search-engines-info:before,#dashboard_right_now li a:before,#dashboard_right_now li span:before,.welcome-panel .welcome-icon:before{color:#646970;font:normal 20px/1 dashicons;speak:never;display:inline-block;padding:0 0 0 10px;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;vertical-align:top}.welcome-panel .welcome-edit-page:before,.welcome-panel .welcome-write-blog:before{content:"\f119";top:-3px}.welcome-panel .welcome-add-page:before{content:"\f132";top:-1px}.welcome-panel .welcome-setup-home:before{content:"\f102";top:-1px}.welcome-panel .welcome-view-site:before{content:"\f115";top:-2px}.welcome-panel .welcome-widgets-menus:before{content:"\f116";top:-2px}.welcome-panel .welcome-widgets:before{content:"\f538";top:-2px}.welcome-panel .welcome-menus:before{content:"\f163";top:-2px}.welcome-panel .welcome-comments:before{content:"\f117";top:-1px}.welcome-panel .welcome-learn-more:before{content:"\f118";top:-1px}#dashboard_right_now .search-engines-info:before,#dashboard_right_now li a:before,#dashboard_right_now li>span:before{content:"\f159";padding:0 0 0 5px}#dashboard_right_now .page-count a:before,#dashboard_right_now .page-count span:before{content:"\f105"}#dashboard_right_now .post-count a:before,#dashboard_right_now .post-count span:before{content:"\f109"}#dashboard_right_now .comment-count a:before{content:"\f101"}#dashboard_right_now .comment-mod-count a:before{content:"\f125"}#dashboard_right_now .storage-count a:before{content:"\f104"}#dashboard_right_now .storage-count.warning a:before{content:"\f153"}#dashboard_right_now .search-engines-info:before{content:"\f348"}.community-events-errors{margin:0}.community-events-loading{padding:10px 12px 8px}.community-events{margin-bottom:6px;padding:0 12px}.community-events .spinner{float:none;margin:5px 2px 0;vertical-align:top}.community-events form[aria-hidden=true],.community-events-errors [aria-hidden=true],.community-events-errors[aria-hidden=true],.community-events-loading[aria-hidden=true],.community-events[aria-hidden=true]{display:none}.community-events .activity-block:first-child,.community-events h2{padding-top:12px;padding-bottom:10px}.community-events-form{margin:15px 0 5px}.community-events-form .regular-text{width:40%;height:29px;margin:0;vertical-align:top}.community-events li.event-none{border-right:4px solid #72aee6}#dashboard-widgets .community-events li.event-none a{text-decoration:underline}.community-events-form label{display:inline-block;vertical-align:top;line-height:2.15384615;height:28px}.community-events .activity-block>p{margin-bottom:0;display:inline}.community-events-toggle-location{vertical-align:middle}#community-events-submit{margin-right:3px;margin-left:3px}#dashboard-widgets .community-events-cancel.button-link{vertical-align:top;line-height:2;height:28px;text-decoration:underline}.community-events ul{background-color:#f6f7f7;padding-right:0;padding-left:0;padding-bottom:0}.community-events li{margin:0;padding:8px 12px;color:#2c3338}.community-events li:first-child{border-top:1px solid #f0f0f1}.community-events li~li{border-top:1px solid #f0f0f1}.community-events .activity-block.last{border-bottom:1px solid #f0f0f1;padding-top:0;margin-top:-1px}.community-events .event-info{display:block}.event-icon{height:18px;padding-left:10px;width:18px;display:none}.event-icon:before{color:#646970;font-size:18px}.event-meetup .event-icon:before{content:"\f484"}.event-wordcamp .event-icon:before{content:"\f486"}.community-events .event-title{font-weight:600;display:block}.community-events .event-date,.community-events .event-time{display:block}.community-events-footer{margin-top:0;margin-bottom:0;padding:12px;border-top:1px solid #f0f0f1;color:#dcdcde}.community-events-footer .screen-reader-text{height:inherit;white-space:nowrap}#dashboard_primary .inside{margin:0;padding:0}#dashboard_primary .widget-loading{padding:12px 12px 0;margin-bottom:1em!important}#dashboard_primary .inside .notice{margin:0}body #dashboard-widgets .postbox form .submit{margin:0}.dashboard-widget-control-form p{margin-top:0}.rssSummary{color:#646970;margin-top:4px}#dashboard_primary .rss-widget{font-size:13px;padding:0 12px}#dashboard_primary .rss-widget:last-child{border-bottom:none;padding-bottom:8px}#dashboard_primary .rss-widget a{font-weight:400}#dashboard_primary .rss-widget span,#dashboard_primary .rss-widget span.rss-date{color:#646970}#dashboard_primary .rss-widget span.rss-date{margin-right:12px}#dashboard_primary .rss-widget ul li{padding:4px 0;margin:0}#dashboard_right_now ul{margin:0;display:inline-block;width:100%}#dashboard_right_now li{width:50%;float:right;margin-bottom:10px}#dashboard_right_now .inside{padding:0}#dashboard_right_now .main{padding:0 12px 11px}#dashboard_right_now .main p{margin:0}#dashboard_right_now #wp-version-message .button{float:left;position:relative;top:-5px;margin-right:5px}#dashboard_right_now p.search-engines-info{margin:1em 0}.mu-storage{overflow:hidden}#dashboard-widgets h3.mu-storage{margin:0 0 10px;padding:0;font-size:14px;font-weight:400}#dashboard_right_now .sub{color:#50575e;background:#f6f7f7;border-top:1px solid #f0f0f1;padding:10px 12px 6px}#dashboard_right_now .sub h3{color:#50575e}#dashboard_right_now .sub p{margin:0 0 1em}#dashboard_right_now .warning a:before,#dashboard_right_now .warning span:before{color:#d63638}#dashboard_quick_press .inside{margin:0;padding:0}#dashboard_quick_press div.updated{margin-bottom:10px;border:1px solid #f0f0f1;border-width:1px 0 1px 1px}#dashboard_quick_press form{margin:12px}#dashboard_quick_press .drafts{padding:10px 0 0}#dashboard_quick_press label{display:inline-block;margin-bottom:4px}#dashboard_quick_press input,#dashboard_quick_press textarea{box-sizing:border-box;margin:0}#dashboard-widgets .postbox form .submit{margin:-39px 0;float:left}#description-wrap{margin-top:12px}#quick-press textarea#content{min-height:90px;max-height:1300px;margin:0 0 8px;padding:6px 7px;resize:none}.js #dashboard_quick_press .drafts{border-top:1px solid #f0f0f1}#dashboard_quick_press .drafts abbr{border:none}#dashboard_quick_press .drafts .view-all{float:left;margin:0 0 0 12px}#dashboard_primary a.rsswidget{font-weight:400}#dashboard_quick_press .drafts ul{margin:0 12px}#dashboard_quick_press .drafts li{margin-bottom:1em}#dashboard_quick_press .drafts li time{color:#646970}#dashboard_quick_press .drafts p{margin:0;word-wrap:break-word}#dashboard_quick_press .draft-title{word-wrap:break-word}#dashboard_quick_press .draft-title a,#dashboard_quick_press .draft-title time{margin:0 0 0 5px}#dashboard-widgets h3,#dashboard-widgets h4,#dashboard_quick_press .drafts h2{margin:0 12px 8px;padding:0;font-size:14px;font-weight:400;color:#1d2327}#dashboard_quick_press .drafts h2{line-height:inherit}#dashboard-widgets .inside h3,#dashboard-widgets .inside h4{margin-right:0;margin-left:0}#dashboard_activity .comment-meta span.approve:before{content:"\f227";font:20px/.5 dashicons;margin-right:5px;vertical-align:middle;position:relative;top:-1px;margin-left:2px}#dashboard_activity .inside{margin:0;padding-bottom:0}#dashboard_activity .no-activity{overflow:hidden;padding:12px 0;text-align:center}#dashboard_activity .no-activity p{color:#646970;font-size:16px}#dashboard_activity .subsubsub{float:none;border-top:1px solid #f0f0f1;margin:0 -12px;padding:8px 12px 4px}#dashboard_activity .subsubsub a .count,#dashboard_activity .subsubsub a.current .count{color:#646970}#future-posts ul,#published-posts ul{clear:both;margin-bottom:0}#future-posts li,#published-posts li{margin-bottom:8px}#future-posts ul span,#published-posts ul span{display:inline-block;margin-left:5px;min-width:150px;color:#646970}.activity-block{border-bottom:1px solid #f0f0f1;margin:0 -12px;padding:8px 12px 4px}.activity-block:last-child{border-bottom:none}.activity-block .subsubsub li{color:#dcdcde}#activity-widget #the-comment-list div.undo,#activity-widget #the-comment-list tr.undo{background:0 0;padding:6px 0;margin-right:12px}#activity-widget #the-comment-list .comment-item{background:#f6f7f7;padding:12px;position:relative}#activity-widget #the-comment-list .avatar{position:absolute;top:12px}#activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar{padding-right:63px}#activity-widget #the-comment-list .dashboard-comment-wrap blockquote{margin:1em 0}#activity-widget #the-comment-list .comment-item p.row-actions{margin:4px 0 0}#activity-widget #the-comment-list .comment-item:first-child{border-top:1px solid #f0f0f1}#activity-widget #the-comment-list .unapproved{background-color:#fcf9e8}#activity-widget #the-comment-list .unapproved:before{content:"";display:block;position:absolute;right:0;top:0;bottom:0;background:#d63638;width:4px}#activity-widget #the-comment-list .spam-undo-inside .avatar,#activity-widget #the-comment-list .trash-undo-inside .avatar{position:relative;top:0}#dashboard-widgets #dashboard_browser_nag.postbox .inside{margin:10px}.postbox .button-link .edit-box{display:none}.edit-box{opacity:0}.edit-box:focus,.hndle:hover .edit-box{opacity:1}#dashboard-widgets form .input-text-wrap input{width:100%}#dashboard-widgets form .textarea-wrap textarea{width:100%}#dashboard-widgets .postbox form .submit{float:none;margin:.5em 0 0;padding:0;border:none}#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish{min-width:0}#dashboard-widgets .button-link,#dashboard-widgets li a,.community-events-footer a{text-decoration:none}#dashboard-widgets h2 a{text-decoration:underline}#dashboard-widgets .hndle .postbox-title-action{float:left;line-height:1.2}#dashboard_plugins h5{font-size:14px}#latest-comments #the-comment-list{position:relative;margin:0 -12px}#activity-widget #the-comment-list .comment,#activity-widget #the-comment-list .pingback{box-shadow:inset 0 1px 0 rgba(0,0,0,.06)}#activity-widget .comments #the-comment-list .alt{background-color:transparent}#activity-widget #latest-comments #the-comment-list .comment-item{min-height:50px;margin:0;padding:12px}#latest-comments #the-comment-list .pingback{padding-right:12px!important}#latest-comments #the-comment-list .comment-item:first-child{border-top:none}#latest-comments #the-comment-list .comment-meta{line-height:1.5;margin:0;color:#646970}#latest-comments #the-comment-list .comment-meta cite{font-style:normal;font-weight:400}#latest-comments #the-comment-list .comment-item blockquote,#latest-comments #the-comment-list .comment-item blockquote p{margin:0;padding:0;display:inline}#latest-comments #the-comment-list .comment-item p.row-actions{margin:3px 0 0;padding:0;font-size:13px}.rss-widget ul{margin:0;padding:0;list-style:none}a.rsswidget{font-size:13px;font-weight:600;line-height:1.4}.rss-widget ul li{line-height:1.5;margin-bottom:12px}.rss-widget span.rss-date{color:#646970;font-size:13px;margin-right:3px}.rss-widget cite{display:block;text-align:left;margin:0 0 1em;padding:0}.rss-widget cite:before{content:"\2014"}.dashboard-comment-wrap{word-wrap:break-word}#dashboard_browser_nag a.update-browser-link{font-size:1.2em;font-weight:600}#dashboard_browser_nag a{text-decoration:underline}#dashboard_browser_nag p.browser-update-nag.has-browser-icon{padding-left:128px}#dashboard_browser_nag .browser-icon{margin-top:-32px}#dashboard_browser_nag.postbox{background-color:#b32d2e;background-image:none;border-color:#b32d2e;color:#fff;box-shadow:none}#dashboard_browser_nag.postbox h2{border-bottom-color:transparent;background:transparent none;color:#fff;box-shadow:none}#dashboard_browser_nag a{color:#fff}#dashboard_browser_nag.postbox .postbox-header{border-color:transparent}#dashboard_browser_nag h2.hndle{border:none;font-weight:600;font-size:20px;padding-top:10px}.postbox#dashboard_browser_nag p a.dismiss{font-size:14px}.postbox#dashboard_browser_nag a,.postbox#dashboard_browser_nag p,.postbox#dashboard_browser_nag p.browser-update-nag{font-size:16px}#dashboard_php_nag .dashicons-warning{color:#dba617;padding-left:6px}#dashboard_php_nag.php-insecure .dashicons-warning{color:#d63638}#dashboard_php_nag h2{display:inline-block}#dashboard_php_nag p{margin:12px 0}#dashboard_php_nag h3{font-weight:600}#dashboard_php_nag .button .dashicons-external{line-height:25px}@media only screen and (min-width:1600px){.welcome-panel .welcome-panel-column-container{display:flex;justify-content:center}.welcome-panel-column{width:100%;max-width:460px}}@media only screen and (max-width:799px){#wpbody-content #dashboard-widgets .postbox-container{width:100%}#dashboard-widgets .meta-box-sortables{min-height:0}.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables{min-height:100px}#dashboard-widgets .meta-box-sortables.empty-container{margin-bottom:0}}@media only screen and (min-width:800px) and (max-width:1499px){#wpbody-content #dashboard-widgets .postbox-container{width:49.5%}#wpbody-content #dashboard-widgets #postbox-container-2,#wpbody-content #dashboard-widgets #postbox-container-3,#wpbody-content #dashboard-widgets #postbox-container-4{float:left;width:50.5%}#dashboard-widgets #postbox-container-3 .empty-container,#dashboard-widgets #postbox-container-4 .empty-container{outline:0;height:0;min-height:0;margin-bottom:0}#dashboard-widgets #postbox-container-3 .empty-container:after,#dashboard-widgets #postbox-container-4 .empty-container:after{display:none}#wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container{width:100%}#wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container{outline:0;height:0;min-height:0;margin-bottom:0}.index-php .columns-prefs,.index-php .screen-layout{display:block}.columns-prefs .columns-prefs-3,.columns-prefs .columns-prefs-4{display:none}#dashboard-widgets .postbox-container .empty-container:after{display:block}}@media only screen and (min-width:1500px) and (max-width:1800px){#wpbody-content #dashboard-widgets .postbox-container{width:33.5%}#wpbody-content #dashboard-widgets #postbox-container-1{width:33%}#wpbody-content #dashboard-widgets #postbox-container-3,#wpbody-content #dashboard-widgets #postbox-container-4{float:left}#dashboard-widgets #postbox-container-4 .empty-container{outline:0;height:0;min-height:0;margin-bottom:0}#dashboard-widgets #postbox-container-4 .empty-container:after{display:none}#dashboard-widgets .postbox-container .empty-container:after{display:block}}@media only screen and (min-width:1801px){#dashboard-widgets .postbox-container .empty-container:after{display:block}}@media screen and (max-width:870px){.welcome-panel .welcome-panel-column li{display:inline-block;margin-left:13px}.welcome-panel .welcome-panel-column ul{margin:.4em 0 0}}@media screen and (max-width:1180px) and (min-width:783px){.welcome-panel-column{grid-template-columns:1fr}[class*=welcome-panel-icon]{display:none}}@media screen and (max-width:782px){.welcome-panel::before{width:240px;height:305px;left:32px}.welcome-panel-header{padding:32px 32px 32px 288px}.welcome-panel .welcome-panel-column-container{grid-template-columns:1fr;box-sizing:border-box;padding:32px;width:100%}.welcome-panel .welcome-panel-column-content{max-width:520px}.welcome-panel .welcome-panel-close{overflow:hidden;text-indent:40px;white-space:nowrap;width:20px;height:20px;padding:5px;top:5px;left:5px}.welcome-panel .welcome-panel-close::before{top:5px;right:-35px}#dashboard-widgets h2{padding:12px}#dashboard_recent_comments #the-comment-list .comment-item .avatar{height:30px;width:30px;margin:4px 0 5px 10px}.community-events-toggle-location{height:38px;vertical-align:baseline}.community-events-form .regular-text{height:32px}#community-events-submit{margin-bottom:0;vertical-align:top}#dashboard-widgets .community-events-cancel.button-link,.community-events-form label{font-size:14px;line-height:normal;height:auto;padding:6px 0;border:1px solid transparent}.community-events .spinner{margin-top:7px}}@media screen and (max-width:600px){.welcome-panel::before{display:none}.welcome-panel-header{padding:32px}}@media screen and (max-width:480px){.welcome-panel-column{gap:16px}}@media screen and (max-width:360px){.welcome-panel-column{grid-template-columns:1fr}[class*=welcome-panel-icon]{display:none}}@media screen and (min-width:355px){.community-events .event-info{display:table-row;float:right;max-width:59%}.event-icon,.event-icon[aria-hidden=true]{display:table-cell}.event-info-inner{display:table-cell}.community-events .event-date-time{float:left;max-width:39%}.community-events .event-date,.community-events .event-time{text-align:left}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/dashboard.css b/tools/storybook/wordpress/css/dashboard.css new file mode 100644 index 00000000000..e8f414a9f53 --- /dev/null +++ b/tools/storybook/wordpress/css/dashboard.css @@ -0,0 +1,1487 @@ +#wpbody-content #dashboard-widgets.columns-1 .postbox-container { + width: 100%; +} + +#wpbody-content #dashboard-widgets.columns-2 .postbox-container { + width: 49.5%; +} + +#wpbody-content #dashboard-widgets.columns-2 #postbox-container-2, +#wpbody-content #dashboard-widgets.columns-2 #postbox-container-3, +#wpbody-content #dashboard-widgets.columns-2 #postbox-container-4 { + float: right; + width: 50.5%; +} + +#wpbody-content #dashboard-widgets.columns-3 .postbox-container { + width: 33.5%; +} + +#wpbody-content #dashboard-widgets.columns-3 #postbox-container-1 { + width: 33%; +} + +#wpbody-content #dashboard-widgets.columns-3 #postbox-container-3, +#wpbody-content #dashboard-widgets.columns-3 #postbox-container-4 { + float: right; +} + +#wpbody-content #dashboard-widgets.columns-4 .postbox-container { + width: 25%; +} + +#dashboard-widgets .postbox-container { + width: 25%; +} + +#dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container { + border: none !important; +} + +#dashboard-widgets-wrap { + overflow: hidden; + margin: 0 -8px; +} + +#dashboard-widgets .postbox .inside { + margin-bottom: 0; +} + +#dashboard-widgets .meta-box-sortables { + display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ + /* Required min-height to make the jQuery UI Sortable drop zone work. */ + min-height: 100px; + margin: 0 8px 20px; +} + +#dashboard-widgets .postbox-container .empty-container { + outline: 3px dashed #c3c4c7; + height: 250px; +} + +/* Only highlight drop zones when dragging and only in the 2 columns layout. */ +.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { + outline: 3px dashed #646970; + /* Prevent margin on the child from collapsing with margin on the parent. */ + display: flow-root; +} + +#dashboard-widgets .postbox-container .empty-container:after { + content: attr(data-emptystring); + margin: auto; + position: absolute; + top: 50%; + left: 0; + right: 0; + transform: translateY( -50% ); + padding: 0 2em; + text-align: center; + color: #646970; + font-size: 16px; + line-height: 1.5; + display: none; +} + + +/* @todo: this was originally in this section, but likely belongs elsewhere */ +#the-comment-list td.comment p.comment-author { + margin-top: 0; + margin-left: 0; +} + +#the-comment-list p.comment-author img { + float: left; + margin-right: 8px; +} + +#the-comment-list p.comment-author strong a { + border: none; +} + +#the-comment-list td { + vertical-align: top; +} + +#the-comment-list td.comment { + word-wrap: break-word; +} + +#the-comment-list td.comment img { + max-width: 100%; +} + +/* Screen meta exception for when the "Dashboard" heading is missing or located below the Welcome Panel. */ +.index-php #screen-meta-links { + margin: 0 20px 8px 0; +} + +/* Welcome Panel */ +.welcome-panel { + position: relative; + overflow: auto; + margin: 16px 0; + background: #2271b1 url(../images/about-texture.png) center repeat; + background-size: 500px 500px; + background-blend-mode: overlay; + font-size: 14px; + line-height: 1.3; + clear: both; +} + +.welcome-panel::before { + content: ""; + position: absolute; + top: -16px; + right: 96px; + z-index: 0; + width: 300px; + height: 382px; + background: url(../images/about-header-about.svg) no-repeat center; + background-size: contain; +} + +.welcome-panel h2 { + margin: 0; + font-size: 48px; + font-weight: 600; + line-height: 1.25; + color: #fff; +} + +.welcome-panel h3 { + margin: 0; + font-size: 20px; + font-weight: 400; + line-height: 1.4; +} + +.welcome-panel p { + font-size: inherit; + line-height: inherit; +} + +.welcome-panel-header { + color: #fff; +} + +.welcome-panel-header a { + color: #fff; +} + +.welcome-panel-header a:focus, +.welcome-panel-header a:hover { + color: #f5e6ab; + text-decoration: none; +} + +.welcome-panel-header a:focus, +.welcome-panel .welcome-panel-close:focus { + outline-color: currentColor; + outline-offset: 1px; + box-shadow: none; +} + +.welcome-panel-header p { + margin: 0.5em 0 0; + font-size: 20px; + line-height: 1.4; +} + +.welcome-panel .welcome-panel-close { + position: absolute; + top: 10px; + right: 10px; + padding: 10px 15px 10px 24px; + font-size: 13px; + line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */ + text-decoration: none; +} + +.welcome-panel .welcome-panel-close:before { + position: absolute; + top: 8px; + left: 0; + transition: all .1s ease-in-out; + content: '\f335'; + font-size: 24px; + color: #fff; +} + +.welcome-panel .welcome-panel-close { + color: #fff; +} + +.welcome-panel .welcome-panel-close:hover, +.welcome-panel .welcome-panel-close:focus, +.welcome-panel .welcome-panel-close:hover::before, +.welcome-panel .welcome-panel-close:focus::before { + color: #f5e6ab; +} + +/* @deprecated 5.9.0 -- Button removed from panel. */ +.wp-core-ui .welcome-panel .button.button-hero { + margin: 15px 13px 3px 0; + padding: 12px 36px; + height: auto; + line-height: 1.4285714; + white-space: normal; +} + +.welcome-panel-content { + min-height: 400px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.welcome-panel-header { + box-sizing: border-box; + margin-left: auto; + margin-right: auto; + max-width: 1500px; + width: 100%; + /* 408px = 300px (balloon width) + 96px (offset from edge) + 16px (spacing). */ + padding: 48px 408px 48px 48px; +} + +.welcome-panel .welcome-panel-column-container { + box-sizing: border-box; + width: 100%; + clear: both; + display: grid; + z-index: 1; + margin-top: 32px; + padding: 48px; + grid-template-columns: repeat(3, 1fr); + gap: 32px; + align-self: flex-end; + background: #fff; +} + +[class*="welcome-panel-icon"] { + height: 60px; + width: 60px; + background-color: #1d2327; + background-position: center; + background-size: 24px 24px; + background-repeat: no-repeat; + border-radius: 100%; +} + +.welcome-panel-column { + display: grid; + grid-template-columns: min-content 1fr; + gap: 24px; +} + +.welcome-panel-icon-pages { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E"); +} + +.welcome-panel-icon-layout { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E"); +} + +.welcome-panel-icon-styles { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E"); +} + +/* @deprecated 5.9.0 -- Section removed from welcome panel. */ +.welcome-panel .welcome-widgets-menus { + line-height: 1.14285714; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel .welcome-panel-column ul { + margin: 0.8em 1em 1em 0; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel li { + font-size: 14px; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel li a { + text-decoration: none; +} + +/* @deprecated 5.9.0 -- Lists removed from welcome panel. */ +.welcome-panel .welcome-panel-column li { + line-height: 1.14285714; + list-style-type: none; + padding: 0 0 8px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-icon { + background: transparent !important; +} + +/* Welcome Panel and Right Now common Icons style */ + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-icon:before, +#dashboard_right_now li a:before, +#dashboard_right_now li span:before, +#dashboard_right_now .search-engines-info:before { + color: #646970; + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + padding: 0 10px 0 0; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + vertical-align: top; +} + +/* Welcome Panel specific Icons styles */ + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-write-blog:before, +.welcome-panel .welcome-edit-page:before { + content: "\f119"; + top: -3px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-add-page:before { + content: "\f132"; + top: -1px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-setup-home:before { + content: "\f102"; + top: -1px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-view-site:before { + content: "\f115"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-widgets-menus:before { + content: "\f116"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-widgets:before { + content: "\f538"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-menus:before { + content: "\f163"; + top: -2px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-comments:before { + content: "\f117"; + top: -1px; +} + +/* @deprecated 5.9.0 -- Icons removed from welcome panel. */ +.welcome-panel .welcome-learn-more:before { + content: "\f118"; + top: -1px; +} + +/* Right Now specific Icons styles */ + +#dashboard_right_now .search-engines-info:before, +#dashboard_right_now li a:before, +#dashboard_right_now li > span:before { /* get only the first level span to exclude screen-reader-text in mu-storage */ + content: "\f159"; /* generic icon for items added by CPTs ? */ + padding: 0 5px 0 0; +} + +#dashboard_right_now .page-count a:before, +#dashboard_right_now .page-count span:before { + content: "\f105"; +} + +#dashboard_right_now .post-count a:before, +#dashboard_right_now .post-count span:before { + content: "\f109"; +} + +#dashboard_right_now .comment-count a:before { + content: "\f101"; +} + +#dashboard_right_now .comment-mod-count a:before { + content: "\f125"; +} + +#dashboard_right_now .storage-count a:before { + content: "\f104"; +} + +#dashboard_right_now .storage-count.warning a:before { + content: "\f153"; +} + +#dashboard_right_now .search-engines-info:before { + content: "\f348"; +} + +/* Dashboard WordPress events */ + +.community-events-errors { + margin: 0; +} + +.community-events-loading { + padding: 10px 12px 8px; +} + +.community-events { + margin-bottom: 6px; + padding: 0 12px; +} + +.community-events .spinner { + float: none; + margin: 5px 2px 0; + vertical-align: top; +} + +.community-events-errors[aria-hidden="true"], +.community-events-errors [aria-hidden="true"], +.community-events-loading[aria-hidden="true"], +.community-events[aria-hidden="true"], +.community-events form[aria-hidden="true"] { + display: none; +} + +.community-events .activity-block:first-child, +.community-events h2 { + padding-top: 12px; + padding-bottom: 10px; +} + +.community-events-form { + margin: 15px 0 5px; +} + +.community-events-form .regular-text { + width: 40%; + height: 29px; + margin: 0; + vertical-align: top; +} + +.community-events li.event-none { + border-left: 4px solid #72aee6; +} + +#dashboard-widgets .community-events li.event-none a { + text-decoration: underline; +} + +.community-events-form label { + display: inline-block; + vertical-align: top; + line-height: 2.15384615; + height: 28px; +} + +.community-events .activity-block > p { + margin-bottom: 0; + display: inline; +} + +.community-events-toggle-location { + vertical-align: middle; +} + +#community-events-submit { + margin-left: 3px; + margin-right: 3px; +} + +/* Needs higher specificity than #dashboard-widgets .button-link */ +#dashboard-widgets .community-events-cancel.button-link { + vertical-align: top; + /* Same properties as the submit button for cross-browsers alignment. */ + line-height: 2; + height: 28px; + text-decoration: underline; +} + +.community-events ul { + background-color: #f6f7f7; + padding-left: 0; + padding-right: 0; + padding-bottom: 0; +} + +.community-events li { + margin: 0; + padding: 8px 12px; + color: #2c3338; +} +.community-events li:first-child { + border-top: 1px solid #f0f0f1; +} + +.community-events li ~ li { + border-top: 1px solid #f0f0f1; +} + +.community-events .activity-block.last { + border-bottom: 1px solid #f0f0f1; + padding-top: 0; + margin-top: -1px; +} + +.community-events .event-info { + display: block; +} + +.event-icon { + height: 18px; + padding-right: 10px; + width: 18px; + display: none; /* Hide on smaller screens */ +} + +.event-icon:before { + color: #646970; + font-size: 18px; +} +.event-meetup .event-icon:before { + content: "\f484"; +} +.event-wordcamp .event-icon:before { + content: "\f486"; +} + +.community-events .event-title { + font-weight: 600; + display: block; +} + +.community-events .event-date, +.community-events .event-time { + display: block; +} + +.community-events-footer { + margin-top: 0; + margin-bottom: 0; + padding: 12px; + border-top: 1px solid #f0f0f1; + color: #dcdcde; +} + +/* Safari 10 + VoiceOver specific: without this, the hidden text gets read out before the link. */ +.community-events-footer .screen-reader-text { + height: inherit; + white-space: nowrap; +} + +/* Dashboard WordPress news */ + +#dashboard_primary .inside { + margin: 0; + padding: 0; +} + +#dashboard_primary .widget-loading { + padding: 12px 12px 0; + margin-bottom: 1em !important; /* Needs to override `.postbox .inside > p:last-child` in common.css */ +} + +/* Notice when JS is off. */ +#dashboard_primary .inside .notice { + margin: 0; +} + +body #dashboard-widgets .postbox form .submit { + margin: 0; +} + +/* Used only for configurable widgets. */ +.dashboard-widget-control-form p { + margin-top: 0; +} + +.rssSummary { + color: #646970; + margin-top: 4px; +} + +#dashboard_primary .rss-widget { + font-size: 13px; + padding: 0 12px; +} + +#dashboard_primary .rss-widget:last-child { + border-bottom: none; + padding-bottom: 8px; +} + +#dashboard_primary .rss-widget a { + font-weight: 400; +} + +#dashboard_primary .rss-widget span, +#dashboard_primary .rss-widget span.rss-date { + color: #646970; +} + +#dashboard_primary .rss-widget span.rss-date { + margin-left: 12px; +} + +#dashboard_primary .rss-widget ul li { + padding: 4px 0; + margin: 0; +} + +/* Dashboard right now */ + +#dashboard_right_now ul { + margin: 0; + /* contain floats but don't use overflow: hidden */ + display: inline-block; + width: 100%; +} + +#dashboard_right_now li { + width: 50%; + float: left; + margin-bottom: 10px; +} + +#dashboard_right_now .inside { + padding: 0; +} + +#dashboard_right_now .main { + padding: 0 12px 11px; +} + +#dashboard_right_now .main p { + margin: 0; +} + +#dashboard_right_now #wp-version-message .button { + float: right; + position: relative; + top: -5px; + margin-left: 5px; +} + +#dashboard_right_now p.search-engines-info { + margin: 1em 0; +} + +.mu-storage { + overflow: hidden; +} + +#dashboard-widgets h3.mu-storage { + margin: 0 0 10px; + padding: 0; + font-size: 14px; + font-weight: 400; +} + +/* Dashboard right now - Colors */ + +#dashboard_right_now .sub { + color: #50575e; + background: #f6f7f7; + border-top: 1px solid #f0f0f1; + padding: 10px 12px 6px; +} + +#dashboard_right_now .sub h3 { + color: #50575e; +} + +#dashboard_right_now .sub p { + margin: 0 0 1em; +} + +#dashboard_right_now .warning a:before, +#dashboard_right_now .warning span:before { + color: #d63638; +} + +/* Dashboard Quick Draft */ + +#dashboard_quick_press .inside { + margin: 0; + padding: 0; +} + +#dashboard_quick_press div.updated { + margin-bottom: 10px; + border: 1px solid #f0f0f1; + border-width: 1px 1px 1px 0; +} + +#dashboard_quick_press form { + margin: 12px; +} + +#dashboard_quick_press .drafts { + padding: 10px 0 0; +} + +/* Dashboard Quick Draft - Form styling */ + +#dashboard_quick_press label { + display: inline-block; + margin-bottom: 4px; +} + +#dashboard_quick_press input, +#dashboard_quick_press textarea { + box-sizing: border-box; + margin: 0; +} + +#dashboard-widgets .postbox form .submit { + margin: -39px 0; + float: right; +} + +#description-wrap { + margin-top: 12px; +} + +#quick-press textarea#content { + min-height: 90px; + max-height: 1300px; + margin: 0 0 8px; + padding: 6px 7px; + resize: none; +} + +/* Dashboard Quick Draft - Drafts list */ + +.js #dashboard_quick_press .drafts { + border-top: 1px solid #f0f0f1; +} + +#dashboard_quick_press .drafts abbr { + border: none; +} + +#dashboard_quick_press .drafts .view-all { + float: right; + margin: 0 12px 0 0; +} + +#dashboard_primary a.rsswidget { + font-weight: 400; +} + +#dashboard_quick_press .drafts ul { + margin: 0 12px; +} + +#dashboard_quick_press .drafts li { + margin-bottom: 1em; +} +#dashboard_quick_press .drafts li time { + color: #646970; +} + +#dashboard_quick_press .drafts p { + margin: 0; + word-wrap: break-word; +} + +#dashboard_quick_press .draft-title { + word-wrap: break-word; +} + +#dashboard_quick_press .draft-title a, +#dashboard_quick_press .draft-title time { + margin: 0 5px 0 0; +} + +/* Dashboard common styles */ + +#dashboard-widgets h4, /* Back-compat for pre-4.4 */ +#dashboard-widgets h3, +#dashboard_quick_press .drafts h2 { + margin: 0 12px 8px; + padding: 0; + font-size: 14px; + font-weight: 400; + color: #1d2327; +} + +#dashboard_quick_press .drafts h2 { + line-height: inherit; +} + +#dashboard-widgets .inside h4, /* Back-compat for pre-4.4 */ +#dashboard-widgets .inside h3 { + margin-left: 0; + margin-right: 0; +} + +/* Dashboard activity widget */ + +#dashboard_activity .comment-meta span.approve:before { + content: "\f227"; + font: 20px/.5 dashicons; + margin-left: 5px; + vertical-align: middle; + position: relative; + top: -1px; + margin-right: 2px; +} + +#dashboard_activity .inside { + margin: 0; + padding-bottom: 0; +} + +#dashboard_activity .no-activity { + overflow: hidden; + padding: 12px 0; + text-align: center; +} + +#dashboard_activity .no-activity p { + color: #646970; + font-size: 16px; +} + +#dashboard_activity .subsubsub { + float: none; + border-top: 1px solid #f0f0f1; + margin: 0 -12px; + padding: 8px 12px 4px; +} + +#dashboard_activity .subsubsub a .count, +#dashboard_activity .subsubsub a.current .count { + color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */ +} + +#future-posts ul, +#published-posts ul { + clear: both; + margin-bottom: 0; +} + +#future-posts li, +#published-posts li { + margin-bottom: 8px; +} + +#future-posts ul span, +#published-posts ul span { + display: inline-block; + margin-right: 5px; + min-width: 150px; + color: #646970; +} + +.activity-block { + border-bottom: 1px solid #f0f0f1; + margin: 0 -12px; + padding: 8px 12px 4px; +} + +.activity-block:last-child { + border-bottom: none; +} + +.activity-block .subsubsub li { + color: #dcdcde; +} + +/* Dashboard activity widget - Comments */ +/* @todo: needs serious de-duplication */ + +#activity-widget #the-comment-list tr.undo, +#activity-widget #the-comment-list div.undo { + background: none; + padding: 6px 0; + margin-left: 12px; +} + +#activity-widget #the-comment-list .comment-item { + background: #f6f7f7; + padding: 12px; + position: relative; +} + +#activity-widget #the-comment-list .avatar { + position: absolute; + top: 12px; +} + +#activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar { + padding-left: 63px; +} + +#activity-widget #the-comment-list .dashboard-comment-wrap blockquote { + margin: 1em 0; +} + +#activity-widget #the-comment-list .comment-item p.row-actions { + margin: 4px 0 0; +} + +#activity-widget #the-comment-list .comment-item:first-child { + border-top: 1px solid #f0f0f1; +} + +#activity-widget #the-comment-list .unapproved { + background-color: #fcf9e8; +} + +#activity-widget #the-comment-list .unapproved:before { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + background: #d63638; + width: 4px; +} + +#activity-widget #the-comment-list .spam-undo-inside .avatar, +#activity-widget #the-comment-list .trash-undo-inside .avatar { + position: relative; + top: 0; +} + +/* Browse happy box */ + +#dashboard-widgets #dashboard_browser_nag.postbox .inside { + margin: 10px; +} + +.postbox .button-link .edit-box { + display: none; +} + +.edit-box { + opacity: 0; +} + +.hndle:hover .edit-box, +.edit-box:focus { + opacity: 1; +} + +#dashboard-widgets form .input-text-wrap input { + width: 100%; +} + +#dashboard-widgets form .textarea-wrap textarea { + width: 100%; +} + +#dashboard-widgets .postbox form .submit { + float: none; + margin: .5em 0 0; + padding: 0; + border: none; +} + +#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish { + min-width: 0; +} + +#dashboard-widgets li a, +#dashboard-widgets .button-link, +.community-events-footer a { + text-decoration: none; +} + +#dashboard-widgets h2 a { + text-decoration: underline; +} + +#dashboard-widgets .hndle .postbox-title-action { + float: right; + line-height: 1.2; +} + +#dashboard_plugins h5 { + font-size: 14px; +} + +/* Recent Comments */ + +#latest-comments #the-comment-list { + position: relative; + margin: 0 -12px; +} + +#activity-widget #the-comment-list .comment, +#activity-widget #the-comment-list .pingback { + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); +} + +#activity-widget .comments #the-comment-list .alt { + background-color: transparent; +} + +#activity-widget #latest-comments #the-comment-list .comment-item { + /* the row-actions paragraph is output only for users with 'edit_comment' capabilities, + for other users this needs a min height equal to the gravatar image */ + min-height: 50px; + margin: 0; + padding: 12px; +} + +#latest-comments #the-comment-list .pingback { + padding-left: 12px !important; +} + +#latest-comments #the-comment-list .comment-item:first-child { + border-top: none; +} + +#latest-comments #the-comment-list .comment-meta { + line-height: 1.5; + margin: 0; + color: #646970; +} + +#latest-comments #the-comment-list .comment-meta cite { + font-style: normal; + font-weight: 400; +} + +#latest-comments #the-comment-list .comment-item blockquote, +#latest-comments #the-comment-list .comment-item blockquote p { + margin: 0; + padding: 0; + display: inline; +} + +#latest-comments #the-comment-list .comment-item p.row-actions { + margin: 3px 0 0; + padding: 0; + font-size: 13px; +} + +/* Feeds */ +.rss-widget ul { + margin: 0; + padding: 0; + list-style: none; +} + +a.rsswidget { + font-size: 13px; + font-weight: 600; + line-height: 1.4; +} + +.rss-widget ul li { + line-height: 1.5; + margin-bottom: 12px; +} + +.rss-widget span.rss-date { + color: #646970; + font-size: 13px; + margin-left: 3px; +} + +.rss-widget cite { + display: block; + text-align: right; + margin: 0 0 1em; + padding: 0; +} + +.rss-widget cite:before { + content: "\2014"; +} + +.dashboard-comment-wrap { + word-wrap: break-word; +} + +/* Browser Nag */ +#dashboard_browser_nag a.update-browser-link { + font-size: 1.2em; + font-weight: 600; +} + +#dashboard_browser_nag a { + text-decoration: underline; +} + +#dashboard_browser_nag p.browser-update-nag.has-browser-icon { + padding-right: 128px; +} + +#dashboard_browser_nag .browser-icon { + margin-top: -32px; +} + +#dashboard_browser_nag.postbox { + background-color: #b32d2e; + background-image: none; + border-color: #b32d2e; + color: #fff; + box-shadow: none; +} + +#dashboard_browser_nag.postbox h2 { + border-bottom-color: transparent; + background: transparent none; + color: #fff; + box-shadow: none; +} + +#dashboard_browser_nag a { + color: #fff; +} + +#dashboard_browser_nag.postbox .postbox-header { + border-color: transparent; +} + +#dashboard_browser_nag h2.hndle { + border: none; + font-weight: 600; + font-size: 20px; + padding-top: 10px; +} + +.postbox#dashboard_browser_nag p a.dismiss { + font-size: 14px; +} + +.postbox#dashboard_browser_nag p, +.postbox#dashboard_browser_nag a, +.postbox#dashboard_browser_nag p.browser-update-nag { + font-size: 16px; +} + +/* PHP Nag */ +#dashboard_php_nag .dashicons-warning { + color: #dba617; + padding-right: 6px; +} + +#dashboard_php_nag.php-insecure .dashicons-warning { + color: #d63638; +} + +#dashboard_php_nag h2 { + display: inline-block; +} + +#dashboard_php_nag p { + margin: 12px 0; +} + +#dashboard_php_nag h3 { + font-weight: 600; +} + +#dashboard_php_nag .button .dashicons-external { + line-height: 25px; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media only screen and (min-width: 1600px) { + .welcome-panel .welcome-panel-column-container { + display: flex; + justify-content: center; + } + + .welcome-panel-column { + width: 100%; + max-width: 460px; + } +} + +/* one column on the dash */ +@media only screen and (max-width: 799px) { + #wpbody-content #dashboard-widgets .postbox-container { + width: 100%; + } + + #dashboard-widgets .meta-box-sortables { + min-height: 0; + } + + .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { + min-height: 100px; + } + + #dashboard-widgets .meta-box-sortables.empty-container { + margin-bottom: 0; + } +} + +/* two columns on the dash, but keep the setting if one is selected */ +@media only screen and (min-width: 800px) and (max-width: 1499px) { + #wpbody-content #dashboard-widgets .postbox-container { + width: 49.5%; + } + + #wpbody-content #dashboard-widgets #postbox-container-2, + #wpbody-content #dashboard-widgets #postbox-container-3, + #wpbody-content #dashboard-widgets #postbox-container-4 { + float: right; + width: 50.5%; + } + + #dashboard-widgets #postbox-container-3 .empty-container, + #dashboard-widgets #postbox-container-4 .empty-container { + outline: none; + height: 0; + min-height: 0; + margin-bottom: 0; + } + + #dashboard-widgets #postbox-container-3 .empty-container:after, + #dashboard-widgets #postbox-container-4 .empty-container:after { + display: none; + } + + #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container { + width: 100%; + } + + #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container { + outline: none; + height: 0; + min-height: 0; + margin-bottom: 0; + } + + /* show the radio buttons for column prefs only for one or two columns */ + .index-php .screen-layout, + .index-php .columns-prefs { + display: block; + } + + .columns-prefs .columns-prefs-3, + .columns-prefs .columns-prefs-4 { + display: none; + } + + #dashboard-widgets .postbox-container .empty-container:after { + display: block; + } +} + +/* three columns on the dash */ +@media only screen and (min-width: 1500px) and (max-width: 1800px) { + #wpbody-content #dashboard-widgets .postbox-container { + width: 33.5%; + } + + #wpbody-content #dashboard-widgets #postbox-container-1 { + width: 33%; + } + + #wpbody-content #dashboard-widgets #postbox-container-3, + #wpbody-content #dashboard-widgets #postbox-container-4 { + float: right; + } + + #dashboard-widgets #postbox-container-4 .empty-container { + outline: none; + height: 0; + min-height: 0; + margin-bottom: 0; + } + + #dashboard-widgets #postbox-container-4 .empty-container:after { + display: none; + } + + #dashboard-widgets .postbox-container .empty-container:after { + display: block; + } +} + +/* Always show the "Drag boxes here" CSS generated content on large screens. */ +@media only screen and (min-width: 1801px) { + #dashboard-widgets .postbox-container .empty-container:after { + display: block; + } +} + +@media screen and (max-width: 870px) { + /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ + .welcome-panel .welcome-panel-column li { + display: inline-block; + margin-right: 13px; + } + + /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ + .welcome-panel .welcome-panel-column ul { + margin: 0.4em 0 0; + } + +} + +@media screen and (max-width: 1180px) and (min-width: 783px) { + .welcome-panel-column { + grid-template-columns: 1fr; + } + + [class*="welcome-panel-icon"] { + display: none; + } +} + +@media screen and (max-width: 782px) { + .welcome-panel::before { + width: 240px; + height: 305px; + right: 32px; + } + + .welcome-panel-header { + /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */ + padding: 32px 288px 32px 32px; + } + + .welcome-panel .welcome-panel-column-container { + grid-template-columns: 1fr; + box-sizing: border-box; + padding: 32px; + width: 100%; + } + + .welcome-panel .welcome-panel-column-content { + max-width: 520px; + } + + /* Keep the close icon from overlapping the Welcome text. */ + .welcome-panel .welcome-panel-close { + overflow: hidden; + text-indent: 40px; + white-space: nowrap; + width: 20px; + height: 20px; + padding: 5px; + top: 5px; + right: 5px; + } + + .welcome-panel .welcome-panel-close::before { + top: 5px; + left: -35px; + } + + #dashboard-widgets h2 { + padding: 12px; + } + + #dashboard_recent_comments #the-comment-list .comment-item .avatar { + height: 30px; + width: 30px; + margin: 4px 10px 5px 0; + } + + .community-events-toggle-location { + height: 38px; + vertical-align: baseline; + } + + .community-events-form .regular-text { + height: 32px; + } + + #community-events-submit { + margin-bottom: 0; + /* Override .wp-core-ui .button */ + vertical-align: top; + } + + .community-events-form label, + #dashboard-widgets .community-events-cancel.button-link { + /* Same properties as the submit button for cross-browsers alignment. */ + font-size: 14px; + line-height: normal; + height: auto; + padding: 6px 0; + border: 1px solid transparent; + } + + .community-events .spinner { + margin-top: 7px; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + .welcome-panel::before { + display: none; + } + + .welcome-panel-header { + padding: 32px; + } +} + +@media screen and (max-width: 480px) { + .welcome-panel-column { + gap: 16px; + } +} + +@media screen and (max-width: 360px) { + .welcome-panel-column { + grid-template-columns: 1fr; + } + + [class*="welcome-panel-icon"] { + display: none; + } +} + +@media screen and (min-width: 355px) { + .community-events .event-info { + display: table-row; + float: left; + max-width: 59%; + } + + .event-icon, + .event-icon[aria-hidden="true"] { + display: table-cell; + } + + .event-info-inner { + display: table-cell; + } + + .community-events .event-date-time { + float: right; + max-width: 39%; + } + + .community-events .event-date, + .community-events .event-time { + text-align: right; + } +} diff --git a/tools/storybook/wordpress/css/dashboard.min.css b/tools/storybook/wordpress/css/dashboard.min.css new file mode 100644 index 00000000000..4e8bb145ba1 --- /dev/null +++ b/tools/storybook/wordpress/css/dashboard.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#wpbody-content #dashboard-widgets.columns-1 .postbox-container{width:100%}#wpbody-content #dashboard-widgets.columns-2 .postbox-container{width:49.5%}#wpbody-content #dashboard-widgets.columns-2 #postbox-container-2,#wpbody-content #dashboard-widgets.columns-2 #postbox-container-3,#wpbody-content #dashboard-widgets.columns-2 #postbox-container-4{float:right;width:50.5%}#wpbody-content #dashboard-widgets.columns-3 .postbox-container{width:33.5%}#wpbody-content #dashboard-widgets.columns-3 #postbox-container-1{width:33%}#wpbody-content #dashboard-widgets.columns-3 #postbox-container-3,#wpbody-content #dashboard-widgets.columns-3 #postbox-container-4{float:right}#wpbody-content #dashboard-widgets.columns-4 .postbox-container{width:25%}#dashboard-widgets .postbox-container{width:25%}#dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container{border:none!important}#dashboard-widgets-wrap{overflow:hidden;margin:0 -8px}#dashboard-widgets .postbox .inside{margin-bottom:0}#dashboard-widgets .meta-box-sortables{display:flow-root;min-height:100px;margin:0 8px 20px}#dashboard-widgets .postbox-container .empty-container{outline:3px dashed #c3c4c7;height:250px}.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables{outline:3px dashed #646970;display:flow-root}#dashboard-widgets .postbox-container .empty-container:after{content:attr(data-emptystring);margin:auto;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);padding:0 2em;text-align:center;color:#646970;font-size:16px;line-height:1.5;display:none}#the-comment-list td.comment p.comment-author{margin-top:0;margin-left:0}#the-comment-list p.comment-author img{float:left;margin-right:8px}#the-comment-list p.comment-author strong a{border:none}#the-comment-list td{vertical-align:top}#the-comment-list td.comment{word-wrap:break-word}#the-comment-list td.comment img{max-width:100%}.index-php #screen-meta-links{margin:0 20px 8px 0}.welcome-panel{position:relative;overflow:auto;margin:16px 0;background:#2271b1 url(../images/about-texture.png) center repeat;background-size:500px 500px;background-blend-mode:overlay;font-size:14px;line-height:1.3;clear:both}.welcome-panel::before{content:"";position:absolute;top:-16px;right:96px;z-index:0;width:300px;height:382px;background:url(../images/about-header-about.svg) no-repeat center;background-size:contain}.welcome-panel h2{margin:0;font-size:48px;font-weight:600;line-height:1.25;color:#fff}.welcome-panel h3{margin:0;font-size:20px;font-weight:400;line-height:1.4}.welcome-panel p{font-size:inherit;line-height:inherit}.welcome-panel-header{color:#fff}.welcome-panel-header a{color:#fff}.welcome-panel-header a:focus,.welcome-panel-header a:hover{color:#f5e6ab;text-decoration:none}.welcome-panel .welcome-panel-close:focus,.welcome-panel-header a:focus{outline-color:currentColor;outline-offset:1px;box-shadow:none}.welcome-panel-header p{margin:.5em 0 0;font-size:20px;line-height:1.4}.welcome-panel .welcome-panel-close{position:absolute;top:10px;right:10px;padding:10px 15px 10px 24px;font-size:13px;line-height:1.23076923;text-decoration:none}.welcome-panel .welcome-panel-close:before{position:absolute;top:8px;left:0;transition:all .1s ease-in-out;content:'\f335';font-size:24px;color:#fff}.welcome-panel .welcome-panel-close{color:#fff}.welcome-panel .welcome-panel-close:focus,.welcome-panel .welcome-panel-close:focus::before,.welcome-panel .welcome-panel-close:hover,.welcome-panel .welcome-panel-close:hover::before{color:#f5e6ab}.wp-core-ui .welcome-panel .button.button-hero{margin:15px 13px 3px 0;padding:12px 36px;height:auto;line-height:1.4285714;white-space:normal}.welcome-panel-content{min-height:400px;display:flex;flex-direction:column;justify-content:space-between}.welcome-panel-header{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:1500px;width:100%;padding:48px 408px 48px 48px}.welcome-panel .welcome-panel-column-container{box-sizing:border-box;width:100%;clear:both;display:grid;z-index:1;margin-top:32px;padding:48px;grid-template-columns:repeat(3,1fr);gap:32px;align-self:flex-end;background:#fff}[class*=welcome-panel-icon]{height:60px;width:60px;background-color:#1d2327;background-position:center;background-size:24px 24px;background-repeat:no-repeat;border-radius:100%}.welcome-panel-column{display:grid;grid-template-columns:min-content 1fr;gap:24px}.welcome-panel-icon-pages{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E")}.welcome-panel-icon-layout{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E")}.welcome-panel-icon-styles{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E")}.welcome-panel .welcome-widgets-menus{line-height:1.14285714}.welcome-panel .welcome-panel-column ul{margin:.8em 1em 1em 0}.welcome-panel li{font-size:14px}.welcome-panel li a{text-decoration:none}.welcome-panel .welcome-panel-column li{line-height:1.14285714;list-style-type:none;padding:0 0 8px}.welcome-panel .welcome-icon{background:0 0!important}#dashboard_right_now .search-engines-info:before,#dashboard_right_now li a:before,#dashboard_right_now li span:before,.welcome-panel .welcome-icon:before{color:#646970;font:normal 20px/1 dashicons;speak:never;display:inline-block;padding:0 10px 0 0;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;vertical-align:top}.welcome-panel .welcome-edit-page:before,.welcome-panel .welcome-write-blog:before{content:"\f119";top:-3px}.welcome-panel .welcome-add-page:before{content:"\f132";top:-1px}.welcome-panel .welcome-setup-home:before{content:"\f102";top:-1px}.welcome-panel .welcome-view-site:before{content:"\f115";top:-2px}.welcome-panel .welcome-widgets-menus:before{content:"\f116";top:-2px}.welcome-panel .welcome-widgets:before{content:"\f538";top:-2px}.welcome-panel .welcome-menus:before{content:"\f163";top:-2px}.welcome-panel .welcome-comments:before{content:"\f117";top:-1px}.welcome-panel .welcome-learn-more:before{content:"\f118";top:-1px}#dashboard_right_now .search-engines-info:before,#dashboard_right_now li a:before,#dashboard_right_now li>span:before{content:"\f159";padding:0 5px 0 0}#dashboard_right_now .page-count a:before,#dashboard_right_now .page-count span:before{content:"\f105"}#dashboard_right_now .post-count a:before,#dashboard_right_now .post-count span:before{content:"\f109"}#dashboard_right_now .comment-count a:before{content:"\f101"}#dashboard_right_now .comment-mod-count a:before{content:"\f125"}#dashboard_right_now .storage-count a:before{content:"\f104"}#dashboard_right_now .storage-count.warning a:before{content:"\f153"}#dashboard_right_now .search-engines-info:before{content:"\f348"}.community-events-errors{margin:0}.community-events-loading{padding:10px 12px 8px}.community-events{margin-bottom:6px;padding:0 12px}.community-events .spinner{float:none;margin:5px 2px 0;vertical-align:top}.community-events form[aria-hidden=true],.community-events-errors [aria-hidden=true],.community-events-errors[aria-hidden=true],.community-events-loading[aria-hidden=true],.community-events[aria-hidden=true]{display:none}.community-events .activity-block:first-child,.community-events h2{padding-top:12px;padding-bottom:10px}.community-events-form{margin:15px 0 5px}.community-events-form .regular-text{width:40%;height:29px;margin:0;vertical-align:top}.community-events li.event-none{border-left:4px solid #72aee6}#dashboard-widgets .community-events li.event-none a{text-decoration:underline}.community-events-form label{display:inline-block;vertical-align:top;line-height:2.15384615;height:28px}.community-events .activity-block>p{margin-bottom:0;display:inline}.community-events-toggle-location{vertical-align:middle}#community-events-submit{margin-left:3px;margin-right:3px}#dashboard-widgets .community-events-cancel.button-link{vertical-align:top;line-height:2;height:28px;text-decoration:underline}.community-events ul{background-color:#f6f7f7;padding-left:0;padding-right:0;padding-bottom:0}.community-events li{margin:0;padding:8px 12px;color:#2c3338}.community-events li:first-child{border-top:1px solid #f0f0f1}.community-events li~li{border-top:1px solid #f0f0f1}.community-events .activity-block.last{border-bottom:1px solid #f0f0f1;padding-top:0;margin-top:-1px}.community-events .event-info{display:block}.event-icon{height:18px;padding-right:10px;width:18px;display:none}.event-icon:before{color:#646970;font-size:18px}.event-meetup .event-icon:before{content:"\f484"}.event-wordcamp .event-icon:before{content:"\f486"}.community-events .event-title{font-weight:600;display:block}.community-events .event-date,.community-events .event-time{display:block}.community-events-footer{margin-top:0;margin-bottom:0;padding:12px;border-top:1px solid #f0f0f1;color:#dcdcde}.community-events-footer .screen-reader-text{height:inherit;white-space:nowrap}#dashboard_primary .inside{margin:0;padding:0}#dashboard_primary .widget-loading{padding:12px 12px 0;margin-bottom:1em!important}#dashboard_primary .inside .notice{margin:0}body #dashboard-widgets .postbox form .submit{margin:0}.dashboard-widget-control-form p{margin-top:0}.rssSummary{color:#646970;margin-top:4px}#dashboard_primary .rss-widget{font-size:13px;padding:0 12px}#dashboard_primary .rss-widget:last-child{border-bottom:none;padding-bottom:8px}#dashboard_primary .rss-widget a{font-weight:400}#dashboard_primary .rss-widget span,#dashboard_primary .rss-widget span.rss-date{color:#646970}#dashboard_primary .rss-widget span.rss-date{margin-left:12px}#dashboard_primary .rss-widget ul li{padding:4px 0;margin:0}#dashboard_right_now ul{margin:0;display:inline-block;width:100%}#dashboard_right_now li{width:50%;float:left;margin-bottom:10px}#dashboard_right_now .inside{padding:0}#dashboard_right_now .main{padding:0 12px 11px}#dashboard_right_now .main p{margin:0}#dashboard_right_now #wp-version-message .button{float:right;position:relative;top:-5px;margin-left:5px}#dashboard_right_now p.search-engines-info{margin:1em 0}.mu-storage{overflow:hidden}#dashboard-widgets h3.mu-storage{margin:0 0 10px;padding:0;font-size:14px;font-weight:400}#dashboard_right_now .sub{color:#50575e;background:#f6f7f7;border-top:1px solid #f0f0f1;padding:10px 12px 6px}#dashboard_right_now .sub h3{color:#50575e}#dashboard_right_now .sub p{margin:0 0 1em}#dashboard_right_now .warning a:before,#dashboard_right_now .warning span:before{color:#d63638}#dashboard_quick_press .inside{margin:0;padding:0}#dashboard_quick_press div.updated{margin-bottom:10px;border:1px solid #f0f0f1;border-width:1px 1px 1px 0}#dashboard_quick_press form{margin:12px}#dashboard_quick_press .drafts{padding:10px 0 0}#dashboard_quick_press label{display:inline-block;margin-bottom:4px}#dashboard_quick_press input,#dashboard_quick_press textarea{box-sizing:border-box;margin:0}#dashboard-widgets .postbox form .submit{margin:-39px 0;float:right}#description-wrap{margin-top:12px}#quick-press textarea#content{min-height:90px;max-height:1300px;margin:0 0 8px;padding:6px 7px;resize:none}.js #dashboard_quick_press .drafts{border-top:1px solid #f0f0f1}#dashboard_quick_press .drafts abbr{border:none}#dashboard_quick_press .drafts .view-all{float:right;margin:0 12px 0 0}#dashboard_primary a.rsswidget{font-weight:400}#dashboard_quick_press .drafts ul{margin:0 12px}#dashboard_quick_press .drafts li{margin-bottom:1em}#dashboard_quick_press .drafts li time{color:#646970}#dashboard_quick_press .drafts p{margin:0;word-wrap:break-word}#dashboard_quick_press .draft-title{word-wrap:break-word}#dashboard_quick_press .draft-title a,#dashboard_quick_press .draft-title time{margin:0 5px 0 0}#dashboard-widgets h3,#dashboard-widgets h4,#dashboard_quick_press .drafts h2{margin:0 12px 8px;padding:0;font-size:14px;font-weight:400;color:#1d2327}#dashboard_quick_press .drafts h2{line-height:inherit}#dashboard-widgets .inside h3,#dashboard-widgets .inside h4{margin-left:0;margin-right:0}#dashboard_activity .comment-meta span.approve:before{content:"\f227";font:20px/.5 dashicons;margin-left:5px;vertical-align:middle;position:relative;top:-1px;margin-right:2px}#dashboard_activity .inside{margin:0;padding-bottom:0}#dashboard_activity .no-activity{overflow:hidden;padding:12px 0;text-align:center}#dashboard_activity .no-activity p{color:#646970;font-size:16px}#dashboard_activity .subsubsub{float:none;border-top:1px solid #f0f0f1;margin:0 -12px;padding:8px 12px 4px}#dashboard_activity .subsubsub a .count,#dashboard_activity .subsubsub a.current .count{color:#646970}#future-posts ul,#published-posts ul{clear:both;margin-bottom:0}#future-posts li,#published-posts li{margin-bottom:8px}#future-posts ul span,#published-posts ul span{display:inline-block;margin-right:5px;min-width:150px;color:#646970}.activity-block{border-bottom:1px solid #f0f0f1;margin:0 -12px;padding:8px 12px 4px}.activity-block:last-child{border-bottom:none}.activity-block .subsubsub li{color:#dcdcde}#activity-widget #the-comment-list div.undo,#activity-widget #the-comment-list tr.undo{background:0 0;padding:6px 0;margin-left:12px}#activity-widget #the-comment-list .comment-item{background:#f6f7f7;padding:12px;position:relative}#activity-widget #the-comment-list .avatar{position:absolute;top:12px}#activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar{padding-left:63px}#activity-widget #the-comment-list .dashboard-comment-wrap blockquote{margin:1em 0}#activity-widget #the-comment-list .comment-item p.row-actions{margin:4px 0 0}#activity-widget #the-comment-list .comment-item:first-child{border-top:1px solid #f0f0f1}#activity-widget #the-comment-list .unapproved{background-color:#fcf9e8}#activity-widget #the-comment-list .unapproved:before{content:"";display:block;position:absolute;left:0;top:0;bottom:0;background:#d63638;width:4px}#activity-widget #the-comment-list .spam-undo-inside .avatar,#activity-widget #the-comment-list .trash-undo-inside .avatar{position:relative;top:0}#dashboard-widgets #dashboard_browser_nag.postbox .inside{margin:10px}.postbox .button-link .edit-box{display:none}.edit-box{opacity:0}.edit-box:focus,.hndle:hover .edit-box{opacity:1}#dashboard-widgets form .input-text-wrap input{width:100%}#dashboard-widgets form .textarea-wrap textarea{width:100%}#dashboard-widgets .postbox form .submit{float:none;margin:.5em 0 0;padding:0;border:none}#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish{min-width:0}#dashboard-widgets .button-link,#dashboard-widgets li a,.community-events-footer a{text-decoration:none}#dashboard-widgets h2 a{text-decoration:underline}#dashboard-widgets .hndle .postbox-title-action{float:right;line-height:1.2}#dashboard_plugins h5{font-size:14px}#latest-comments #the-comment-list{position:relative;margin:0 -12px}#activity-widget #the-comment-list .comment,#activity-widget #the-comment-list .pingback{box-shadow:inset 0 1px 0 rgba(0,0,0,.06)}#activity-widget .comments #the-comment-list .alt{background-color:transparent}#activity-widget #latest-comments #the-comment-list .comment-item{min-height:50px;margin:0;padding:12px}#latest-comments #the-comment-list .pingback{padding-left:12px!important}#latest-comments #the-comment-list .comment-item:first-child{border-top:none}#latest-comments #the-comment-list .comment-meta{line-height:1.5;margin:0;color:#646970}#latest-comments #the-comment-list .comment-meta cite{font-style:normal;font-weight:400}#latest-comments #the-comment-list .comment-item blockquote,#latest-comments #the-comment-list .comment-item blockquote p{margin:0;padding:0;display:inline}#latest-comments #the-comment-list .comment-item p.row-actions{margin:3px 0 0;padding:0;font-size:13px}.rss-widget ul{margin:0;padding:0;list-style:none}a.rsswidget{font-size:13px;font-weight:600;line-height:1.4}.rss-widget ul li{line-height:1.5;margin-bottom:12px}.rss-widget span.rss-date{color:#646970;font-size:13px;margin-left:3px}.rss-widget cite{display:block;text-align:right;margin:0 0 1em;padding:0}.rss-widget cite:before{content:"\2014"}.dashboard-comment-wrap{word-wrap:break-word}#dashboard_browser_nag a.update-browser-link{font-size:1.2em;font-weight:600}#dashboard_browser_nag a{text-decoration:underline}#dashboard_browser_nag p.browser-update-nag.has-browser-icon{padding-right:128px}#dashboard_browser_nag .browser-icon{margin-top:-32px}#dashboard_browser_nag.postbox{background-color:#b32d2e;background-image:none;border-color:#b32d2e;color:#fff;box-shadow:none}#dashboard_browser_nag.postbox h2{border-bottom-color:transparent;background:transparent none;color:#fff;box-shadow:none}#dashboard_browser_nag a{color:#fff}#dashboard_browser_nag.postbox .postbox-header{border-color:transparent}#dashboard_browser_nag h2.hndle{border:none;font-weight:600;font-size:20px;padding-top:10px}.postbox#dashboard_browser_nag p a.dismiss{font-size:14px}.postbox#dashboard_browser_nag a,.postbox#dashboard_browser_nag p,.postbox#dashboard_browser_nag p.browser-update-nag{font-size:16px}#dashboard_php_nag .dashicons-warning{color:#dba617;padding-right:6px}#dashboard_php_nag.php-insecure .dashicons-warning{color:#d63638}#dashboard_php_nag h2{display:inline-block}#dashboard_php_nag p{margin:12px 0}#dashboard_php_nag h3{font-weight:600}#dashboard_php_nag .button .dashicons-external{line-height:25px}@media only screen and (min-width:1600px){.welcome-panel .welcome-panel-column-container{display:flex;justify-content:center}.welcome-panel-column{width:100%;max-width:460px}}@media only screen and (max-width:799px){#wpbody-content #dashboard-widgets .postbox-container{width:100%}#dashboard-widgets .meta-box-sortables{min-height:0}.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables{min-height:100px}#dashboard-widgets .meta-box-sortables.empty-container{margin-bottom:0}}@media only screen and (min-width:800px) and (max-width:1499px){#wpbody-content #dashboard-widgets .postbox-container{width:49.5%}#wpbody-content #dashboard-widgets #postbox-container-2,#wpbody-content #dashboard-widgets #postbox-container-3,#wpbody-content #dashboard-widgets #postbox-container-4{float:right;width:50.5%}#dashboard-widgets #postbox-container-3 .empty-container,#dashboard-widgets #postbox-container-4 .empty-container{outline:0;height:0;min-height:0;margin-bottom:0}#dashboard-widgets #postbox-container-3 .empty-container:after,#dashboard-widgets #postbox-container-4 .empty-container:after{display:none}#wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container{width:100%}#wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container{outline:0;height:0;min-height:0;margin-bottom:0}.index-php .columns-prefs,.index-php .screen-layout{display:block}.columns-prefs .columns-prefs-3,.columns-prefs .columns-prefs-4{display:none}#dashboard-widgets .postbox-container .empty-container:after{display:block}}@media only screen and (min-width:1500px) and (max-width:1800px){#wpbody-content #dashboard-widgets .postbox-container{width:33.5%}#wpbody-content #dashboard-widgets #postbox-container-1{width:33%}#wpbody-content #dashboard-widgets #postbox-container-3,#wpbody-content #dashboard-widgets #postbox-container-4{float:right}#dashboard-widgets #postbox-container-4 .empty-container{outline:0;height:0;min-height:0;margin-bottom:0}#dashboard-widgets #postbox-container-4 .empty-container:after{display:none}#dashboard-widgets .postbox-container .empty-container:after{display:block}}@media only screen and (min-width:1801px){#dashboard-widgets .postbox-container .empty-container:after{display:block}}@media screen and (max-width:870px){.welcome-panel .welcome-panel-column li{display:inline-block;margin-right:13px}.welcome-panel .welcome-panel-column ul{margin:.4em 0 0}}@media screen and (max-width:1180px) and (min-width:783px){.welcome-panel-column{grid-template-columns:1fr}[class*=welcome-panel-icon]{display:none}}@media screen and (max-width:782px){.welcome-panel::before{width:240px;height:305px;right:32px}.welcome-panel-header{padding:32px 288px 32px 32px}.welcome-panel .welcome-panel-column-container{grid-template-columns:1fr;box-sizing:border-box;padding:32px;width:100%}.welcome-panel .welcome-panel-column-content{max-width:520px}.welcome-panel .welcome-panel-close{overflow:hidden;text-indent:40px;white-space:nowrap;width:20px;height:20px;padding:5px;top:5px;right:5px}.welcome-panel .welcome-panel-close::before{top:5px;left:-35px}#dashboard-widgets h2{padding:12px}#dashboard_recent_comments #the-comment-list .comment-item .avatar{height:30px;width:30px;margin:4px 10px 5px 0}.community-events-toggle-location{height:38px;vertical-align:baseline}.community-events-form .regular-text{height:32px}#community-events-submit{margin-bottom:0;vertical-align:top}#dashboard-widgets .community-events-cancel.button-link,.community-events-form label{font-size:14px;line-height:normal;height:auto;padding:6px 0;border:1px solid transparent}.community-events .spinner{margin-top:7px}}@media screen and (max-width:600px){.welcome-panel::before{display:none}.welcome-panel-header{padding:32px}}@media screen and (max-width:480px){.welcome-panel-column{gap:16px}}@media screen and (max-width:360px){.welcome-panel-column{grid-template-columns:1fr}[class*=welcome-panel-icon]{display:none}}@media screen and (min-width:355px){.community-events .event-info{display:table-row;float:left;max-width:59%}.event-icon,.event-icon[aria-hidden=true]{display:table-cell}.event-info-inner{display:table-cell}.community-events .event-date-time{float:right;max-width:39%}.community-events .event-date,.community-events .event-time{text-align:right}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/deprecated-media-rtl.css b/tools/storybook/wordpress/css/deprecated-media-rtl.css new file mode 100644 index 00000000000..3211e7db4c3 --- /dev/null +++ b/tools/storybook/wordpress/css/deprecated-media-rtl.css @@ -0,0 +1,430 @@ +/*! This file is auto-generated */ +/* Styles for the media library iframe (not used on the Library screen) */ + +div#media-upload-header { + margin: 0; + padding: 5px 5px 0; + font-weight: 600; + position: relative; + border-bottom: 1px solid #dcdcde; + background: #f6f7f7; +} + +#sidemenu { + overflow: hidden; + float: none; + position: relative; + right: 0; + bottom: -1px; + margin: 0 5px; + padding-right: 10px; + list-style: none; + font-size: 12px; + font-weight: 400; +} + +#sidemenu a { + padding: 0 7px; + display: block; + float: right; + line-height: 28px; + border-top: 1px solid #f6f7f7; + border-bottom: 1px solid #dcdcde; + background-color: #f6f7f7; + text-decoration: none; + transition: none; +} + +#sidemenu li { + display: inline; + line-height: 200%; + list-style: none; + text-align: center; + white-space: nowrap; + margin: 0; + padding: 0; +} + +#sidemenu a.current { + font-weight: 400; + padding-right: 6px; + padding-left: 6px; + border: 1px solid #dcdcde; + border-bottom-color: #f0f0f1; + background-color: #f0f0f1; + color: #000; +} + +#media-upload:after { /* clearfix */ + content: ""; + display: table; + clear: both; +} + +#media-upload .slidetoggle { + border-top-color: #dcdcde; +} + +#media-upload input[type="radio"] { + padding: 0; +} + +.media-upload-form label.form-help, +td.help { + color: #646970; +} + +form { + margin: 1em; +} + +#search-filter { + text-align: left; +} + +th { + position: relative; +} + +.media-upload-form label.form-help, td.help { + font-family: sans-serif; + font-style: italic; + font-weight: 400; +} + +.media-upload-form p.help { + margin: 0; + padding: 0; +} + +.media-upload-form fieldset { + width: 100%; + border: none; + text-align: justify; + margin: 0 0 1em; + padding: 0; +} + +/* specific to the image upload form */ + +.image-align-none-label { + background: url(../images/align-none.png) no-repeat center right; +} + +.image-align-left-label { + background: url(../images/align-left.png) no-repeat center right; +} + +.image-align-center-label { + background: url(../images/align-center.png) no-repeat center right; +} + +.image-align-right-label { + background: url(../images/align-right.png) no-repeat center right; +} + +tr.image-size td { + width: 460px; +} + +tr.image-size div.image-size-item { + margin: 0 0 5px; +} + +#library-form .progress, +#gallery-form .progress, +.insert-gallery, +.describe.startopen, +.describe.startclosed { + display: none; +} + +.media-item .thumbnail { + max-width: 128px; + max-height: 128px; +} + +thead.media-item-info tr { + background-color: transparent; +} + +.form-table thead.media-item-info { + border: 8px solid #fff; +} + +abbr.required, +span.required { + text-decoration: none; + border: none; +} + +.describe label { + display: inline; +} + +.describe td.error { + padding: 2px 8px; +} + +.describe td.A1 { + width: 132px; +} + +.describe input[type="text"], +.describe textarea { + width: 460px; + border-width: 1px; + border-style: solid; +} + +/* Specific to Uploader */ + +#media-upload p.ml-submit { + padding: 1em 0; +} + +#media-upload p.help, +#media-upload label.help { + font-family: sans-serif; + font-style: italic; + font-weight: 400; +} + +#media-upload .ui-sortable .media-item { + cursor: move; +} + +#media-upload tr.image-size { + margin-bottom: 1em; + height: 3em; +} + +#media-upload #filter { + width: 623px; +} + +#media-upload #filter .subsubsub { + margin: 8px 0; +} + +#media-upload .tablenav-pages a, +#media-upload .tablenav-pages .current { + display: inline-block; + padding: 4px 5px 6px; + font-size: 16px; + line-height: 1; + text-align: center; + text-decoration: none; +} + +#media-upload .tablenav-pages a { + min-width: 17px; + border: 1px solid #c3c4c7; + background: #f6f7f7; +} + +#filter .tablenav select { + border-style: solid; + border-width: 1px; + padding: 2px; + vertical-align: top; + width: auto; +} + +#media-upload .del-attachment { + display: none; + margin: 5px 0; +} + +.menu_order { + float: left; + font-size: 11px; + margin: 8px 10px 0; +} + +.menu_order_input { + border: 1px solid #dcdcde; + font-size: 10px; + padding: 1px; + width: 23px; +} + +.ui-sortable-helper { + background-color: #fff; + border: 1px solid #a7aaad; + opacity: 0.6; + filter: alpha(opacity=60); +} + +#media-upload th.order-head { + width: 20%; + text-align: center; +} + +#media-upload th.actions-head { + width: 25%; + text-align: center; +} + +#media-upload a.wp-post-thumbnail { + margin: 0 20px; +} + +#media-upload .widefat { + border-style: solid solid none; +} + +.sorthelper { + height: 37px; + width: 623px; + display: block; +} + +#gallery-settings th.label { + width: 160px; +} + +#gallery-settings #basic th.label { + padding: 5px 0 5px 5px; +} + +#gallery-settings .title { + clear: both; + padding: 0 0 3px; + font-size: 1.6em; + border-bottom: 1px solid #dcdcde; +} + +h3.media-title { + font-size: 1.6em; +} + +h4.media-sub-title { + border-bottom: 1px solid #dcdcde; + font-size: 1.3em; + margin: 12px; + padding: 0 0 3px; +} + +#gallery-settings .title, +h3.media-title, +h4.media-sub-title { + font-family: Georgia,"Times New Roman",Times,serif; + font-weight: 400; + color: #50575e; +} + +#gallery-settings .describe td { + vertical-align: middle; + height: 3em; +} + +#gallery-settings .describe th.label { + padding-top: .5em; + text-align: right; +} + +#gallery-settings .describe { + padding: 5px; + width: 100%; + clear: both; + cursor: default; + background: #fff; +} + +#gallery-settings .describe select { + width: 15em; +} + +#gallery-settings .describe select option, +#gallery-settings .describe td { + padding: 0; +} + +#gallery-settings label, +#gallery-settings legend { + font-size: 13px; + color: #3c434a; + margin-left: 15px; +} + +#gallery-settings .align .field label { + margin: 0 3px 0 1em; +} + +#gallery-settings p.ml-submit { + border-top: 1px solid #dcdcde; +} + +#gallery-settings select#columns { + width: 6em; +} + +#sort-buttons { + font-size: 0.8em; + margin: 3px 0 -8px 25px; + text-align: left; + max-width: 625px; +} + +#sort-buttons a { + text-decoration: none; +} + +#sort-buttons #asc, +#sort-buttons #showall { + padding-right: 5px; +} + +#sort-buttons span { + margin-left: 25px; +} + +p.media-types { + margin: 0; + padding: 1em; +} + +p.media-types-required-info { + padding-top: 0; +} + +tr.not-image { + display: none; +} + +table.not-image tr.not-image { + display: table-row; +} + +table.not-image tr.image-only { + display: none; +} + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + + .image-align-none-label { + background-image: url(../images/align-none-2x.png?ver=20120916); + background-size: 21px 15px; + } + + .image-align-left-label { + background-image: url(../images/align-left-2x.png?ver=20120916); + background-size: 22px 15px; + } + + .image-align-center-label { + background-image: url(../images/align-center-2x.png?ver=20120916); + background-size: 21px 15px; + } + + .image-align-right-label { + background-image: url(../images/align-right-2x.png?ver=20120916); + background-size: 22px 15px; + } +} diff --git a/tools/storybook/wordpress/css/deprecated-media-rtl.min.css b/tools/storybook/wordpress/css/deprecated-media-rtl.min.css new file mode 100644 index 00000000000..d08a18838b3 --- /dev/null +++ b/tools/storybook/wordpress/css/deprecated-media-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +div#media-upload-header{margin:0;padding:5px 5px 0;font-weight:600;position:relative;border-bottom:1px solid #dcdcde;background:#f6f7f7}#sidemenu{overflow:hidden;float:none;position:relative;right:0;bottom:-1px;margin:0 5px;padding-right:10px;list-style:none;font-size:12px;font-weight:400}#sidemenu a{padding:0 7px;display:block;float:right;line-height:28px;border-top:1px solid #f6f7f7;border-bottom:1px solid #dcdcde;background-color:#f6f7f7;text-decoration:none;transition:none}#sidemenu li{display:inline;line-height:200%;list-style:none;text-align:center;white-space:nowrap;margin:0;padding:0}#sidemenu a.current{font-weight:400;padding-right:6px;padding-left:6px;border:1px solid #dcdcde;border-bottom-color:#f0f0f1;background-color:#f0f0f1;color:#000}#media-upload:after{content:"";display:table;clear:both}#media-upload .slidetoggle{border-top-color:#dcdcde}#media-upload input[type=radio]{padding:0}.media-upload-form label.form-help,td.help{color:#646970}form{margin:1em}#search-filter{text-align:left}th{position:relative}.media-upload-form label.form-help,td.help{font-family:sans-serif;font-style:italic;font-weight:400}.media-upload-form p.help{margin:0;padding:0}.media-upload-form fieldset{width:100%;border:none;text-align:justify;margin:0 0 1em;padding:0}.image-align-none-label{background:url(../images/align-none.png) no-repeat center right}.image-align-left-label{background:url(../images/align-left.png) no-repeat center right}.image-align-center-label{background:url(../images/align-center.png) no-repeat center right}.image-align-right-label{background:url(../images/align-right.png) no-repeat center right}tr.image-size td{width:460px}tr.image-size div.image-size-item{margin:0 0 5px}#gallery-form .progress,#library-form .progress,.describe.startclosed,.describe.startopen,.insert-gallery{display:none}.media-item .thumbnail{max-width:128px;max-height:128px}thead.media-item-info tr{background-color:transparent}.form-table thead.media-item-info{border:8px solid #fff}abbr.required,span.required{text-decoration:none;border:none}.describe label{display:inline}.describe td.error{padding:2px 8px}.describe td.A1{width:132px}.describe input[type=text],.describe textarea{width:460px;border-width:1px;border-style:solid}#media-upload p.ml-submit{padding:1em 0}#media-upload label.help,#media-upload p.help{font-family:sans-serif;font-style:italic;font-weight:400}#media-upload .ui-sortable .media-item{cursor:move}#media-upload tr.image-size{margin-bottom:1em;height:3em}#media-upload #filter{width:623px}#media-upload #filter .subsubsub{margin:8px 0}#media-upload .tablenav-pages .current,#media-upload .tablenav-pages a{display:inline-block;padding:4px 5px 6px;font-size:16px;line-height:1;text-align:center;text-decoration:none}#media-upload .tablenav-pages a{min-width:17px;border:1px solid #c3c4c7;background:#f6f7f7}#filter .tablenav select{border-style:solid;border-width:1px;padding:2px;vertical-align:top;width:auto}#media-upload .del-attachment{display:none;margin:5px 0}.menu_order{float:left;font-size:11px;margin:8px 10px 0}.menu_order_input{border:1px solid #dcdcde;font-size:10px;padding:1px;width:23px}.ui-sortable-helper{background-color:#fff;border:1px solid #a7aaad;opacity:.6}#media-upload th.order-head{width:20%;text-align:center}#media-upload th.actions-head{width:25%;text-align:center}#media-upload a.wp-post-thumbnail{margin:0 20px}#media-upload .widefat{border-style:solid solid none}.sorthelper{height:37px;width:623px;display:block}#gallery-settings th.label{width:160px}#gallery-settings #basic th.label{padding:5px 0 5px 5px}#gallery-settings .title{clear:both;padding:0 0 3px;font-size:1.6em;border-bottom:1px solid #dcdcde}h3.media-title{font-size:1.6em}h4.media-sub-title{border-bottom:1px solid #dcdcde;font-size:1.3em;margin:12px;padding:0 0 3px}#gallery-settings .title,h3.media-title,h4.media-sub-title{font-family:Georgia,"Times New Roman",Times,serif;font-weight:400;color:#50575e}#gallery-settings .describe td{vertical-align:middle;height:3em}#gallery-settings .describe th.label{padding-top:.5em;text-align:right}#gallery-settings .describe{padding:5px;width:100%;clear:both;cursor:default;background:#fff}#gallery-settings .describe select{width:15em}#gallery-settings .describe select option,#gallery-settings .describe td{padding:0}#gallery-settings label,#gallery-settings legend{font-size:13px;color:#3c434a;margin-left:15px}#gallery-settings .align .field label{margin:0 3px 0 1em}#gallery-settings p.ml-submit{border-top:1px solid #dcdcde}#gallery-settings select#columns{width:6em}#sort-buttons{font-size:.8em;margin:3px 0 -8px 25px;text-align:left;max-width:625px}#sort-buttons a{text-decoration:none}#sort-buttons #asc,#sort-buttons #showall{padding-right:5px}#sort-buttons span{margin-left:25px}p.media-types{margin:0;padding:1em}p.media-types-required-info{padding-top:0}tr.not-image{display:none}table.not-image tr.not-image{display:table-row}table.not-image tr.image-only{display:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.image-align-none-label{background-image:url(../images/align-none-2x.png?ver=20120916);background-size:21px 15px}.image-align-left-label{background-image:url(../images/align-left-2x.png?ver=20120916);background-size:22px 15px}.image-align-center-label{background-image:url(../images/align-center-2x.png?ver=20120916);background-size:21px 15px}.image-align-right-label{background-image:url(../images/align-right-2x.png?ver=20120916);background-size:22px 15px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/deprecated-media.css b/tools/storybook/wordpress/css/deprecated-media.css new file mode 100644 index 00000000000..359fc59e3c3 --- /dev/null +++ b/tools/storybook/wordpress/css/deprecated-media.css @@ -0,0 +1,429 @@ +/* Styles for the media library iframe (not used on the Library screen) */ + +div#media-upload-header { + margin: 0; + padding: 5px 5px 0; + font-weight: 600; + position: relative; + border-bottom: 1px solid #dcdcde; + background: #f6f7f7; +} + +#sidemenu { + overflow: hidden; + float: none; + position: relative; + left: 0; + bottom: -1px; + margin: 0 5px; + padding-left: 10px; + list-style: none; + font-size: 12px; + font-weight: 400; +} + +#sidemenu a { + padding: 0 7px; + display: block; + float: left; + line-height: 28px; + border-top: 1px solid #f6f7f7; + border-bottom: 1px solid #dcdcde; + background-color: #f6f7f7; + text-decoration: none; + transition: none; +} + +#sidemenu li { + display: inline; + line-height: 200%; + list-style: none; + text-align: center; + white-space: nowrap; + margin: 0; + padding: 0; +} + +#sidemenu a.current { + font-weight: 400; + padding-left: 6px; + padding-right: 6px; + border: 1px solid #dcdcde; + border-bottom-color: #f0f0f1; + background-color: #f0f0f1; + color: #000; +} + +#media-upload:after { /* clearfix */ + content: ""; + display: table; + clear: both; +} + +#media-upload .slidetoggle { + border-top-color: #dcdcde; +} + +#media-upload input[type="radio"] { + padding: 0; +} + +.media-upload-form label.form-help, +td.help { + color: #646970; +} + +form { + margin: 1em; +} + +#search-filter { + text-align: right; +} + +th { + position: relative; +} + +.media-upload-form label.form-help, td.help { + font-family: sans-serif; + font-style: italic; + font-weight: 400; +} + +.media-upload-form p.help { + margin: 0; + padding: 0; +} + +.media-upload-form fieldset { + width: 100%; + border: none; + text-align: justify; + margin: 0 0 1em; + padding: 0; +} + +/* specific to the image upload form */ + +.image-align-none-label { + background: url(../images/align-none.png) no-repeat center left; +} + +.image-align-left-label { + background: url(../images/align-left.png) no-repeat center left; +} + +.image-align-center-label { + background: url(../images/align-center.png) no-repeat center left; +} + +.image-align-right-label { + background: url(../images/align-right.png) no-repeat center left; +} + +tr.image-size td { + width: 460px; +} + +tr.image-size div.image-size-item { + margin: 0 0 5px; +} + +#library-form .progress, +#gallery-form .progress, +.insert-gallery, +.describe.startopen, +.describe.startclosed { + display: none; +} + +.media-item .thumbnail { + max-width: 128px; + max-height: 128px; +} + +thead.media-item-info tr { + background-color: transparent; +} + +.form-table thead.media-item-info { + border: 8px solid #fff; +} + +abbr.required, +span.required { + text-decoration: none; + border: none; +} + +.describe label { + display: inline; +} + +.describe td.error { + padding: 2px 8px; +} + +.describe td.A1 { + width: 132px; +} + +.describe input[type="text"], +.describe textarea { + width: 460px; + border-width: 1px; + border-style: solid; +} + +/* Specific to Uploader */ + +#media-upload p.ml-submit { + padding: 1em 0; +} + +#media-upload p.help, +#media-upload label.help { + font-family: sans-serif; + font-style: italic; + font-weight: 400; +} + +#media-upload .ui-sortable .media-item { + cursor: move; +} + +#media-upload tr.image-size { + margin-bottom: 1em; + height: 3em; +} + +#media-upload #filter { + width: 623px; +} + +#media-upload #filter .subsubsub { + margin: 8px 0; +} + +#media-upload .tablenav-pages a, +#media-upload .tablenav-pages .current { + display: inline-block; + padding: 4px 5px 6px; + font-size: 16px; + line-height: 1; + text-align: center; + text-decoration: none; +} + +#media-upload .tablenav-pages a { + min-width: 17px; + border: 1px solid #c3c4c7; + background: #f6f7f7; +} + +#filter .tablenav select { + border-style: solid; + border-width: 1px; + padding: 2px; + vertical-align: top; + width: auto; +} + +#media-upload .del-attachment { + display: none; + margin: 5px 0; +} + +.menu_order { + float: right; + font-size: 11px; + margin: 8px 10px 0; +} + +.menu_order_input { + border: 1px solid #dcdcde; + font-size: 10px; + padding: 1px; + width: 23px; +} + +.ui-sortable-helper { + background-color: #fff; + border: 1px solid #a7aaad; + opacity: 0.6; + filter: alpha(opacity=60); +} + +#media-upload th.order-head { + width: 20%; + text-align: center; +} + +#media-upload th.actions-head { + width: 25%; + text-align: center; +} + +#media-upload a.wp-post-thumbnail { + margin: 0 20px; +} + +#media-upload .widefat { + border-style: solid solid none; +} + +.sorthelper { + height: 37px; + width: 623px; + display: block; +} + +#gallery-settings th.label { + width: 160px; +} + +#gallery-settings #basic th.label { + padding: 5px 5px 5px 0; +} + +#gallery-settings .title { + clear: both; + padding: 0 0 3px; + font-size: 1.6em; + border-bottom: 1px solid #dcdcde; +} + +h3.media-title { + font-size: 1.6em; +} + +h4.media-sub-title { + border-bottom: 1px solid #dcdcde; + font-size: 1.3em; + margin: 12px; + padding: 0 0 3px; +} + +#gallery-settings .title, +h3.media-title, +h4.media-sub-title { + font-family: Georgia,"Times New Roman",Times,serif; + font-weight: 400; + color: #50575e; +} + +#gallery-settings .describe td { + vertical-align: middle; + height: 3em; +} + +#gallery-settings .describe th.label { + padding-top: .5em; + text-align: left; +} + +#gallery-settings .describe { + padding: 5px; + width: 100%; + clear: both; + cursor: default; + background: #fff; +} + +#gallery-settings .describe select { + width: 15em; +} + +#gallery-settings .describe select option, +#gallery-settings .describe td { + padding: 0; +} + +#gallery-settings label, +#gallery-settings legend { + font-size: 13px; + color: #3c434a; + margin-right: 15px; +} + +#gallery-settings .align .field label { + margin: 0 1em 0 3px; +} + +#gallery-settings p.ml-submit { + border-top: 1px solid #dcdcde; +} + +#gallery-settings select#columns { + width: 6em; +} + +#sort-buttons { + font-size: 0.8em; + margin: 3px 25px -8px 0; + text-align: right; + max-width: 625px; +} + +#sort-buttons a { + text-decoration: none; +} + +#sort-buttons #asc, +#sort-buttons #showall { + padding-left: 5px; +} + +#sort-buttons span { + margin-right: 25px; +} + +p.media-types { + margin: 0; + padding: 1em; +} + +p.media-types-required-info { + padding-top: 0; +} + +tr.not-image { + display: none; +} + +table.not-image tr.not-image { + display: table-row; +} + +table.not-image tr.image-only { + display: none; +} + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + + .image-align-none-label { + background-image: url(../images/align-none-2x.png?ver=20120916); + background-size: 21px 15px; + } + + .image-align-left-label { + background-image: url(../images/align-left-2x.png?ver=20120916); + background-size: 22px 15px; + } + + .image-align-center-label { + background-image: url(../images/align-center-2x.png?ver=20120916); + background-size: 21px 15px; + } + + .image-align-right-label { + background-image: url(../images/align-right-2x.png?ver=20120916); + background-size: 22px 15px; + } +} diff --git a/tools/storybook/wordpress/css/deprecated-media.min.css b/tools/storybook/wordpress/css/deprecated-media.min.css new file mode 100644 index 00000000000..77543f742d7 --- /dev/null +++ b/tools/storybook/wordpress/css/deprecated-media.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +div#media-upload-header{margin:0;padding:5px 5px 0;font-weight:600;position:relative;border-bottom:1px solid #dcdcde;background:#f6f7f7}#sidemenu{overflow:hidden;float:none;position:relative;left:0;bottom:-1px;margin:0 5px;padding-left:10px;list-style:none;font-size:12px;font-weight:400}#sidemenu a{padding:0 7px;display:block;float:left;line-height:28px;border-top:1px solid #f6f7f7;border-bottom:1px solid #dcdcde;background-color:#f6f7f7;text-decoration:none;transition:none}#sidemenu li{display:inline;line-height:200%;list-style:none;text-align:center;white-space:nowrap;margin:0;padding:0}#sidemenu a.current{font-weight:400;padding-left:6px;padding-right:6px;border:1px solid #dcdcde;border-bottom-color:#f0f0f1;background-color:#f0f0f1;color:#000}#media-upload:after{content:"";display:table;clear:both}#media-upload .slidetoggle{border-top-color:#dcdcde}#media-upload input[type=radio]{padding:0}.media-upload-form label.form-help,td.help{color:#646970}form{margin:1em}#search-filter{text-align:right}th{position:relative}.media-upload-form label.form-help,td.help{font-family:sans-serif;font-style:italic;font-weight:400}.media-upload-form p.help{margin:0;padding:0}.media-upload-form fieldset{width:100%;border:none;text-align:justify;margin:0 0 1em;padding:0}.image-align-none-label{background:url(../images/align-none.png) no-repeat center left}.image-align-left-label{background:url(../images/align-left.png) no-repeat center left}.image-align-center-label{background:url(../images/align-center.png) no-repeat center left}.image-align-right-label{background:url(../images/align-right.png) no-repeat center left}tr.image-size td{width:460px}tr.image-size div.image-size-item{margin:0 0 5px}#gallery-form .progress,#library-form .progress,.describe.startclosed,.describe.startopen,.insert-gallery{display:none}.media-item .thumbnail{max-width:128px;max-height:128px}thead.media-item-info tr{background-color:transparent}.form-table thead.media-item-info{border:8px solid #fff}abbr.required,span.required{text-decoration:none;border:none}.describe label{display:inline}.describe td.error{padding:2px 8px}.describe td.A1{width:132px}.describe input[type=text],.describe textarea{width:460px;border-width:1px;border-style:solid}#media-upload p.ml-submit{padding:1em 0}#media-upload label.help,#media-upload p.help{font-family:sans-serif;font-style:italic;font-weight:400}#media-upload .ui-sortable .media-item{cursor:move}#media-upload tr.image-size{margin-bottom:1em;height:3em}#media-upload #filter{width:623px}#media-upload #filter .subsubsub{margin:8px 0}#media-upload .tablenav-pages .current,#media-upload .tablenav-pages a{display:inline-block;padding:4px 5px 6px;font-size:16px;line-height:1;text-align:center;text-decoration:none}#media-upload .tablenav-pages a{min-width:17px;border:1px solid #c3c4c7;background:#f6f7f7}#filter .tablenav select{border-style:solid;border-width:1px;padding:2px;vertical-align:top;width:auto}#media-upload .del-attachment{display:none;margin:5px 0}.menu_order{float:right;font-size:11px;margin:8px 10px 0}.menu_order_input{border:1px solid #dcdcde;font-size:10px;padding:1px;width:23px}.ui-sortable-helper{background-color:#fff;border:1px solid #a7aaad;opacity:.6}#media-upload th.order-head{width:20%;text-align:center}#media-upload th.actions-head{width:25%;text-align:center}#media-upload a.wp-post-thumbnail{margin:0 20px}#media-upload .widefat{border-style:solid solid none}.sorthelper{height:37px;width:623px;display:block}#gallery-settings th.label{width:160px}#gallery-settings #basic th.label{padding:5px 5px 5px 0}#gallery-settings .title{clear:both;padding:0 0 3px;font-size:1.6em;border-bottom:1px solid #dcdcde}h3.media-title{font-size:1.6em}h4.media-sub-title{border-bottom:1px solid #dcdcde;font-size:1.3em;margin:12px;padding:0 0 3px}#gallery-settings .title,h3.media-title,h4.media-sub-title{font-family:Georgia,"Times New Roman",Times,serif;font-weight:400;color:#50575e}#gallery-settings .describe td{vertical-align:middle;height:3em}#gallery-settings .describe th.label{padding-top:.5em;text-align:left}#gallery-settings .describe{padding:5px;width:100%;clear:both;cursor:default;background:#fff}#gallery-settings .describe select{width:15em}#gallery-settings .describe select option,#gallery-settings .describe td{padding:0}#gallery-settings label,#gallery-settings legend{font-size:13px;color:#3c434a;margin-right:15px}#gallery-settings .align .field label{margin:0 1em 0 3px}#gallery-settings p.ml-submit{border-top:1px solid #dcdcde}#gallery-settings select#columns{width:6em}#sort-buttons{font-size:.8em;margin:3px 25px -8px 0;text-align:right;max-width:625px}#sort-buttons a{text-decoration:none}#sort-buttons #asc,#sort-buttons #showall{padding-left:5px}#sort-buttons span{margin-right:25px}p.media-types{margin:0;padding:1em}p.media-types-required-info{padding-top:0}tr.not-image{display:none}table.not-image tr.not-image{display:table-row}table.not-image tr.image-only{display:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.image-align-none-label{background-image:url(../images/align-none-2x.png?ver=20120916);background-size:21px 15px}.image-align-left-label{background-image:url(../images/align-left-2x.png?ver=20120916);background-size:22px 15px}.image-align-center-label{background-image:url(../images/align-center-2x.png?ver=20120916);background-size:21px 15px}.image-align-right-label{background-image:url(../images/align-right-2x.png?ver=20120916);background-size:22px 15px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/edit-rtl.css b/tools/storybook/wordpress/css/edit-rtl.css new file mode 100644 index 00000000000..31eaaa07da9 --- /dev/null +++ b/tools/storybook/wordpress/css/edit-rtl.css @@ -0,0 +1,2022 @@ +/*! This file is auto-generated */ +#poststuff { + padding-top: 10px; + min-width: 763px; +} + +#poststuff #post-body { + padding: 0; +} + +#poststuff .postbox-container { + width: 100%; +} + +#poststuff #post-body.columns-2 { + margin-left: 300px; +} + +/*------------------------------------------------------------------------------ + 11.0 - Write/Edit Post Screen +------------------------------------------------------------------------------*/ + +#show-comments { + overflow: hidden; +} + +#save-action .spinner, +#show-comments a { + float: right; +} + +#show-comments .spinner { + float: none; + margin-top: 0; +} + +#lost-connection-notice .spinner { + visibility: visible; + float: right; + margin: 0 0 0 5px; +} + +#titlediv { + position: relative; +} + +#titlediv label { + cursor: text; +} + +#titlediv div.inside { + margin: 0; +} + +#poststuff #titlewrap { + border: 0; + padding: 0; +} + +#titlediv #title { + padding: 3px 8px; + font-size: 1.7em; + line-height: 100%; + height: 1.7em; + width: 100%; + outline: none; + margin: 0 0 3px; + background-color: #fff; +} + +#titlediv #title-prompt-text { + color: #646970; + position: absolute; + font-size: 1.7em; + padding: 10px; + pointer-events: none; +} + +input#link_description, +input#link_url { + width: 100%; +} + +#pending { + background: 100% none; + border: 0 none; + padding: 0; + font-size: 11px; + margin-top: -1px; +} + +#edit-slug-box, +#comment-link-box { + line-height: 1.84615384; + min-height: 25px; + margin-top: 5px; + padding: 0 10px; + color: #646970; +} + +#sample-permalink { + display: inline-block; + max-width: 100%; + word-wrap: break-word; +} + +#edit-slug-box .cancel { + margin-left: 10px; + padding: 0; + font-size: 11px; +} + +#comment-link-box { + margin: 5px 0; + padding: 0 5px; +} + +#editable-post-name-full { + display: none; +} + +#editable-post-name { + font-weight: 600; +} + +#editable-post-name input { + font-size: 13px; + font-weight: 400; + height: 24px; + margin: 0; + width: 16em; +} + +.postarea h3 label { + float: right; +} + +body.post-new-php .submitbox .submitdelete { + display: none; +} + +.submitbox .submit a:hover { + text-decoration: underline; +} + +.submitbox .submit input { + margin-bottom: 8px; + margin-left: 4px; + padding: 6px; +} + +#post-status-select { + margin-top: 3px; +} + +body.post-type-wp_navigation div#minor-publishing, +body.post-type-wp_navigation .inline-edit-status { + display: none; +} + +/* Post Screen */ + +/* Only highlight drop zones when dragging and only in the 2 columns layout. */ +.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables { + outline: 3px dashed #646970; + /* Prevent margin on the child from collapsing with margin on the parent. */ + display: flow-root; + /* + * This min-height is meant to limit jumpiness while dragging. It's equivalent + * to the minimum height of the sortable-placeholder which is given by the height + * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder + * bottom margin (20px) + 2 additional pixels to compensate browsers rounding. + */ + min-height: 60px; + margin-bottom: 20px; +} + +.postbox { + position: relative; + min-width: 255px; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; +} + +#trackback_url { + width: 99%; +} + +#normal-sortables .postbox .submit { + background: transparent none; + border: 0 none; + float: left; + padding: 0 12px; + margin: 0; +} + +.category-add input[type="text"], +.category-add select { + width: 100%; + max-width: 260px; + vertical-align: baseline; +} + +#side-sortables .category-add input[type="text"], +#side-sortables .category-add select { + margin: 0 0 1em; +} + +ul.category-tabs li, +#side-sortables .add-menu-item-tabs li, +.wp-tab-bar li { + display: inline; + line-height: 1.35; +} + +.no-js .category-tabs li.hide-if-no-js { + display: none; +} + +.category-tabs a, +#side-sortables .add-menu-item-tabs a, +.wp-tab-bar a { + text-decoration: none; +} + +/* @todo: do these really need to be so specific? */ +#side-sortables .category-tabs .tabs a, +#side-sortables .add-menu-item-tabs .tabs a, +.wp-tab-bar .wp-tab-active a, +#post-body ul.category-tabs li.tabs a, +#post-body ul.add-menu-item-tabs li.tabs a { + color: #2c3338; +} + +.category-tabs { + margin: 8px 0 5px; +} + +/* Back-compat for pre-4.4 */ +#category-adder h4 { + margin: 0; +} + +.taxonomy-add-new { + display: inline-block; + margin: 10px 0; + font-weight: 600; +} + +#side-sortables .add-menu-item-tabs, +.wp-tab-bar { + margin-bottom: 3px; +} + +#normal-sortables .postbox #replyrow .submit { + float: none; + margin: 0; + padding: 5px 7px 10px; + overflow: hidden; +} + +#side-sortables .submitbox .submit input, +#side-sortables .submitbox .submit .preview, +#side-sortables .submitbox .submit a.preview:hover { + border: 0 none; +} + +/* @todo: make this a more generic class */ +ul.category-tabs, +ul.add-menu-item-tabs, +ul.wp-tab-bar { + margin-top: 12px; +} + +ul.category-tabs li, +ul.add-menu-item-tabs li { + border: solid 1px transparent; + position: relative; +} + +ul.category-tabs li.tabs, +ul.add-menu-item-tabs li.tabs, +.wp-tab-active { + border: 1px solid #dcdcde; + border-bottom-color: #fff; + background-color: #fff; +} + +ul.category-tabs li, +ul.add-menu-item-tabs li, +ul.wp-tab-bar li { + padding: 3px 5px 6px; +} + +#set-post-thumbnail { + display: inline-block; + max-width: 100%; +} + +#postimagediv .inside img { + max-width: 100%; + height: auto; + width: auto; + vertical-align: top; + background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 100% 0, 10px 10px; + background-size: 20px 20px; +} + +form#tags-filter { + position: relative; +} + +/* Global classes */ +.wp-hidden-children .wp-hidden-child, +.ui-tabs-hide { + display: none; +} + +#post-body .tagsdiv #newtag { + margin-left: 5px; + width: 16em; +} + +#side-sortables input#post_password { + width: 94% +} + +#side-sortables .tagsdiv #newtag { + width: 68%; +} + +#post-status-info { + width: 100%; + border-spacing: 0; + border: 1px solid #c3c4c7; + border-top: none; + background-color: #f6f7f7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + z-index: 999; +} + +#post-status-info td { + font-size: 12px; +} + +.autosave-info { + padding: 2px 10px; + text-align: left; +} + +#editorcontent #post-status-info { + border: none; +} + +#content-resize-handle { + background: transparent url(../images/resize.gif) no-repeat scroll left bottom; + width: 12px; + cursor: row-resize; +} + +/*rtl:ignore*/ +.rtl #content-resize-handle { + background-image: url(../images/resize-rtl.gif); + background-position: left bottom; +} + +.wp-editor-expand #content-resize-handle { + display: none; +} + +#postdivrich #content { + resize: none; +} + +#wp-word-count { + padding: 2px 10px; +} + +#wp-content-editor-container { + position: relative; +} + +.wp-editor-expand #wp-content-editor-tools { + z-index: 1000; + border-bottom: 1px solid #c3c4c7; +} + +.wp-editor-expand #wp-content-editor-container { + box-shadow: none; + margin-top: -1px; +} + +.wp-editor-expand #wp-content-editor-container { + border-bottom: 0 none; +} + +.wp-editor-expand div.mce-statusbar { + z-index: 1; +} + +.wp-editor-expand #post-status-info { + border-top: 1px solid #c3c4c7; +} + +.wp-editor-expand div.mce-toolbar-grp { + z-index: 999; +} + +/* TinyMCE native fullscreen mode override */ +.mce-fullscreen #wp-content-wrap .mce-menubar, +.mce-fullscreen #wp-content-wrap .mce-toolbar-grp, +.mce-fullscreen #wp-content-wrap .mce-edit-area, +.mce-fullscreen #wp-content-wrap .mce-statusbar { + position: static !important; + width: auto !important; + padding: 0 !important; +} + +.mce-fullscreen #wp-content-wrap .mce-statusbar { + visibility: visible !important; +} + +.mce-fullscreen #wp-content-wrap .mce-tinymce .mce-wp-dfw { + display: none; +} + +.post-php.mce-fullscreen #wpadminbar, +.mce-fullscreen #wp-content-wrap .mce-wp-dfw { + display: none; +} +/* End TinyMCE native fullscreen mode override */ + +#wp-content-editor-tools { + background-color: #f0f0f1; + padding-top: 20px; +} + +#poststuff #post-body.columns-2 #side-sortables { + width: 280px; +} + +#timestampdiv select { + vertical-align: top; + font-size: 12px; + line-height: 2.33333333; /* 28px */ +} + +#aa, #jj, #hh, #mn { + padding: 6px 1px; + font-size: 12px; + line-height: 1.16666666; /* 14px */ +} + +#jj, #hh, #mn { + width: 2em; +} + +#aa { + width: 3.4em; +} + +.curtime #timestamp { + padding: 2px 0 1px; + display: inline !important; + height: auto !important; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-uploadedby:before, +#post-body .misc-pub-uploadedto:before, +#post-body .misc-pub-revisions:before, +#post-body .misc-pub-response-to:before, +#post-body .misc-pub-comment-status:before { + color: #8c8f94; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-uploadedby:before, +#post-body .misc-pub-uploadedto:before, +#post-body .misc-pub-revisions:before, +#post-body .misc-pub-response-to:before, +#post-body .misc-pub-comment-status:before { + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + margin-right: -1px; + padding-left: 3px; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +#post-body .misc-pub-post-status:before, +#post-body .misc-pub-comment-status:before { + content: "\f173"; +} + +#post-body #visibility:before { + content: "\f177"; +} + +.curtime #timestamp:before { + content: "\f145"; + position: relative; + top: -1px; +} + +#post-body .misc-pub-uploadedby:before { + content: "\f110"; + position: relative; + top: -1px; +} + +#post-body .misc-pub-uploadedto:before { + content: "\f318"; + position: relative; + top: -1px; +} + +#post-body .misc-pub-revisions:before { + content: "\f321"; +} + +#post-body .misc-pub-response-to:before { + content: "\f101"; +} + +#timestampdiv { + padding-top: 5px; + line-height: 1.76923076; +} + +#timestampdiv p { + margin: 8px 0 6px; +} + +#timestampdiv input { + text-align: center; +} + +.notification-dialog { + position: fixed; + top: 30%; + max-height: 70%; + right: 50%; + width: 450px; + margin-right: -225px; + background: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + line-height: 1.5; + z-index: 1000005; + overflow-y: auto; +} + +.notification-dialog-background { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: #000; + opacity: 0.7; + filter: alpha(opacity=70); + z-index: 1000000; +} + +#post-lock-dialog .post-locked-message, +#post-lock-dialog .post-taken-over { + margin: 25px; +} + +#post-lock-dialog .post-locked-message a.button, +#file-editor-warning .button { + margin-left: 10px; +} + +#post-lock-dialog .post-locked-avatar { + float: right; + margin: 0 0 20px 20px; +} + +#post-lock-dialog .wp-tab-first { + outline: 0; +} + +#post-lock-dialog .locked-saving img { + float: right; + margin-left: 3px; +} + +#post-lock-dialog.saving .locked-saving, +#post-lock-dialog.saved .locked-saved { + display: inline; +} + +#excerpt { + display: block; + margin: 12px 0 0; + height: 4em; + width: 100%; +} + +.tagchecklist { + margin-right: 14px; + font-size: 12px; + overflow: auto; +} + +.tagchecklist br { + display: none; +} + +.tagchecklist strong { + margin-right: -8px; + position: absolute; +} + +.tagchecklist > li { + float: right; + margin-left: 25px; + font-size: 13px; + line-height: 1.8; + cursor: default; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.tagchecklist .ntdelbutton { + position: absolute; + width: 24px; + height: 24px; + border: none; + margin: 0 -19px 0 0; + padding: 0; + background: none; + cursor: pointer; + text-indent: 0; +} + +#poststuff h3.hndle, /* Back-compat for pre-4.4 */ +#poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */ +#poststuff h2 { + font-size: 14px; + padding: 8px 12px; + margin: 0; + line-height: 1.4; +} + +#poststuff .stuffbox h2 { + padding: 8px 10px; +} + +#poststuff .stuffbox > h2 { + border-bottom: 1px solid #f0f0f1; +} + +#poststuff .inside { + margin: 6px 0 0; +} + +.link-php #poststuff .inside, +.link-add-php #poststuff .inside { + margin-top: 12px; +} + +#poststuff .stuffbox .inside { + margin: 0; +} + +#poststuff .inside #parent_id, +#poststuff .inside #page_template { + max-width: 100%; +} + +.post-attributes-label-wrapper { + margin-bottom: 0.5em; +} + +.post-attributes-label { + vertical-align: baseline; + font-weight: 600; +} + +#post-visibility-select, +#comment-status-radio { + line-height: 1.5; + margin-top: 3px; +} + +#linksubmitdiv .inside, /* Old Link Manager back-compat. */ +#poststuff #submitdiv .inside { + margin: 0; + padding: 0; +} + +#post-body-content, +.edit-form-section { + margin-bottom: 20px; +} + +.wp_attachment_details .attachment-content-description { + margin-top: 0.5385em; + display: inline-block; + min-height: 1.6923em; +} + +/** +* Privacy Settings section +* +* Note: This section includes selectors from +* Site Health where duplicate styling is used. +*/ + +/* General */ +.privacy-settings #wpcontent, +.privacy-settings.auto-fold #wpcontent, +.site-health #wpcontent, +.site-health.auto-fold #wpcontent { + padding-right: 0; +} + +/* Emulates .wrap h1 styling */ +.privacy-settings-header h1, +.health-check-header h1 { + display: inline-block; + font-weight: 600; + margin: 0 0.8rem 1rem; + font-size: 23px; + padding: 9px 0 4px; + line-height: 1.3; +} + +/* Header */ +.privacy-settings-header, +.health-check-header { + text-align: center; + margin: 0 0 1rem; + background: #fff; + border-bottom: 1px solid #dcdcde; +} + +.privacy-settings-title-section, +.health-check-title-section { + display: flex; + align-items: center; + justify-content: center; + clear: both; + padding-top: 8px; +} + +.privacy-settings-tabs-wrapper { + /* IE 11 */ + display: -ms-inline-grid; + -ms-grid-columns: 1fr 1fr; + vertical-align: top; + /* modern browsers */ + display: inline-grid; + grid-template-columns: 1fr 1fr; +} + +.privacy-settings-tab { + display: block; /* IE 11 */ + text-decoration: none; + color: inherit; + padding: 0.5rem 1rem 1rem; + margin: 0 1rem; + transition: box-shadow 0.5s ease-in-out; +} + +.privacy-settings-tab:nth-child(1), +.health-check-tab:nth-child(1) { + -ms-grid-column: 1; /* IE 11 */ +} + +.privacy-settings-tab:nth-child(2), +.health-check-tab:nth-child(2) { + -ms-grid-column: 2; /* IE 11 */ +} + +.privacy-settings-tab:focus, +.health-check-tab:focus { + color: #1d2327; + outline: 1px solid #787c82; + box-shadow: none; +} + +.privacy-settings-tab.active, +.health-check-tab.active { + box-shadow: inset 0 -3px #3582c4; + font-weight: 600; +} + +/* Body */ +.privacy-settings-body, +.health-check-body { + max-width: 800px; + margin: 0 auto; +} + +.tools-privacy-policy-page th { + min-width: 230px; +} + +.hr-separator { + margin-top: 20px; + margin-bottom: 15px; +} + +/* Accordions */ +.privacy-settings-accordion, +.health-check-accordion { + border: 1px solid #c3c4c7; +} + +.privacy-settings-accordion-heading, +.health-check-accordion-heading { + margin: 0; + border-top: 1px solid #c3c4c7; + font-size: inherit; + line-height: inherit; + font-weight: 600; + color: inherit; +} + +.privacy-settings-accordion-heading:first-child, +.health-check-accordion-heading:first-child { + border-top: none; +} + +.privacy-settings-accordion-trigger, +.health-check-accordion-trigger { + background: #fff; + border: 0; + color: #2c3338; + cursor: pointer; + display: flex; + font-weight: 400; + margin: 0; + padding: 1em 1.5em 1em 3.5em; + min-height: 46px; + position: relative; + text-align: right; + width: 100%; + align-items: center; + justify-content: space-between; + -webkit-user-select: auto; + user-select: auto; +} + +.privacy-settings-accordion-trigger:hover, +.privacy-settings-accordion-trigger:active, +.health-check-accordion-trigger:hover, +.health-check-accordion-trigger:active { + background: #f6f7f7; +} + +.privacy-settings-accordion-trigger:focus, +.health-check-accordion-trigger:focus { + color: #1d2327; + border: none; + box-shadow: none; + outline-offset: -1px; + outline: 2px solid #2271b1; + background-color: #f6f7f7; +} + +.privacy-settings-accordion-trigger .title, +.health-check-accordion-trigger .title { + pointer-events: none; + font-weight: 600; + flex-grow: 1; +} + +.privacy-settings-accordion-trigger .icon, +.privacy-settings-view-read .icon, +.health-check-accordion-trigger .icon, +.site-health-view-passed .icon { + border: solid #50575e; + border-width: 0 0 2px 2px; + height: 0.5rem; + pointer-events: none; + position: absolute; + left: 1.5em; + top: 50%; + transform: translateY(-70%) rotate(-45deg); + width: 0.5rem; +} + +.privacy-settings-accordion-trigger .badge, +.health-check-accordion-trigger .badge { + padding: 0.1rem 0.5rem 0.15rem; + color: #2c3338; + font-weight: 600; +} + +.privacy-settings-accordion-trigger .badge { + margin-right: 0.5rem; +} + +.privacy-settings-accordion-trigger .badge.blue, +.health-check-accordion-trigger .badge.blue { + border: 1px solid #72aee6; +} + +.privacy-settings-accordion-trigger .badge.orange, +.health-check-accordion-trigger .badge.orange { + border: 1px solid #dba617; +} + +.privacy-settings-accordion-trigger .badge.red, +.health-check-accordion-trigger .badge.red { + border: 1px solid #e65054; +} + +.privacy-settings-accordion-trigger .badge.green, +.health-check-accordion-trigger .badge.green { + border: 1px solid #00ba37; +} + +.privacy-settings-accordion-trigger .badge.purple, +.health-check-accordion-trigger .badge.purple { + border: 1px solid #2271b1; +} + +.privacy-settings-accordion-trigger .badge.gray, +.health-check-accordion-trigger .badge.gray { + border: 1px solid #c3c4c7; +} + +.privacy-settings-accordion-trigger[aria-expanded="true"] .icon, +.privacy-settings-view-passed[aria-expanded="true"] .icon, +.health-check-accordion-trigger[aria-expanded="true"] .icon, +.site-health-view-passed[aria-expanded="true"] .icon { + transform: translateY(-30%) rotate(135deg) +} + +.privacy-settings-accordion-panel, +.health-check-accordion-panel { + margin: 0; + padding: 1em 1.5em; + background: #fff; +} + +.privacy-settings-accordion-panel[hidden], +.health-check-accordion-panel[hidden] { + display: none; +} + +.privacy-settings-accordion-panel a .dashicons, +.health-check-accordion-panel a .dashicons { + text-decoration: none; +} + +.privacy-settings-accordion-actions { + text-align: left; + display: block; +} + +.privacy-settings-accordion-actions .success { + display: none; + color: #008a20; + padding-left: 1em; + padding-top: 6px; +} + +.privacy-settings-accordion-actions .success.visible { + display: inline-block; +} + +/* Suggested text for privacy policy */ +.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .wp-policy-help, /* For back-compat, see #49282 */ +.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-policy-tutorial, +.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-text-copy { + display: none; +} + +.privacy-settings-accordion-panel strong.wp-policy-help, /* For back-compat, see #49282 */ +.privacy-settings-accordion-panel strong.privacy-policy-tutorial { + display: block; + margin: 0 0 1em; +} + +.privacy-text-copy span { + pointer-events: none; +} + +.privacy-settings-accordion-panel .wp-suggested-text > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), +.privacy-settings-accordion-panel .wp-suggested-text div > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), +.privacy-settings-accordion-panel > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), +.privacy-settings-accordion-panel div > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p) { + margin: 0; + padding: 1em; + border-right: 2px solid #787c82; +} + +/* Media queries */ +@media screen and (max-width: 782px) { + + .privacy-settings-body, + .health-check-body { + margin: 0 12px; + width: auto; + } + + .privacy-settings .notice, + .site-health .notice { + margin: 5px 10px 15px; + } + + .privacy-settings .update-nag, + .site-health .update-nag { + margin-left: 10px; + margin-right: 10px; + } + + input#create-page { + margin-top: 10px; + } + + .wp-core-ui button.privacy-text-copy { + white-space: normal; + line-height: 1.8; + } +} + +@media only screen and (max-width: 1004px) { + + .privacy-settings-body, + .health-check-body { + margin: 0 22px; + width: auto; + } +} + +/** +* End Privacy Settings section +*/ + +/*------------------------------------------------------------------------------ + 11.1 - Custom Fields +------------------------------------------------------------------------------*/ + +#postcustomstuff thead th { + padding: 5px 8px 8px; + background-color: #f0f0f1; +} + +#postcustom #postcustomstuff .submit { + border: 0 none; + float: none; + padding: 0 8px 8px; +} + +#side-sortables #postcustom #postcustomstuff .submit { + margin: 0; + padding: 0; +} + +#side-sortables #postcustom #postcustomstuff #the-list textarea { + height: 85px; +} + +#side-sortables #postcustom #postcustomstuff td.left input, +#side-sortables #postcustom #postcustomstuff td.left select, +#side-sortables #postcustomstuff #newmetaleft a { + margin: 3px 3px 0; +} + +#postcustomstuff table { + margin: 0; + width: 100%; + border: 1px solid #dcdcde; + border-spacing: 0; + background-color: #f6f7f7; +} + +#postcustomstuff tr { + vertical-align: top; +} + +#postcustomstuff table input, +#postcustomstuff table select, +#postcustomstuff table textarea { + width: 96%; + margin: 8px; +} + +#side-sortables #postcustomstuff table input, +#side-sortables #postcustomstuff table select, +#side-sortables #postcustomstuff table textarea { + margin: 3px; +} + +#postcustomstuff th.left, +#postcustomstuff td.left { + width: 38%; +} + +#postcustomstuff .submit input { + margin: 0; + width: auto; +} + +#postcustomstuff #newmetaleft a { + display: inline-block; + margin: 0 8px 8px; + text-decoration: none; +} + +.no-js #postcustomstuff #enternew { + display: none; +} + +#post-body-content .compat-attachment-fields { + margin-bottom: 20px; +} + +.compat-attachment-fields th { + padding-top: 5px; + padding-left: 10px; +} + +/*------------------------------------------------------------------------------ + 11.3 - Featured Images +------------------------------------------------------------------------------*/ + +#select-featured-image { + padding: 4px 0; + overflow: hidden; +} + +#select-featured-image img { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} + +#select-featured-image a { + float: right; + clear: both; +} + +#select-featured-image .remove { + display: none; + margin-top: 10px; +} + +.js #select-featured-image.has-featured-image .remove { + display: inline-block; +} + +.no-js #select-featured-image .choose { + display: none; +} + +/*------------------------------------------------------------------------------ + 11.4 - Post formats +------------------------------------------------------------------------------*/ + +.post-format-icon::before { + display: inline-block; + vertical-align: middle; + height: 20px; + width: 20px; + margin-top: -4px; + margin-left: 7px; + color: #dcdcde; + font: normal 20px/1 dashicons; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a.post-format-icon:hover:before { + color: #135e96; +} + +#post-formats-select { + line-height: 2; +} + +#post-formats-select .post-format-icon::before { + top: 5px; +} + +input.post-format { + margin-top: 1px; +} + +label.post-format-icon { + margin-right: 0; + padding: 2px 0; +} + +.post-format-icon.post-format-standard::before { + content: "\f109"; +} + +.post-format-icon.post-format-image::before { + content: "\f128"; +} + +.post-format-icon.post-format-gallery::before { + content: "\f161"; +} + +.post-format-icon.post-format-audio::before { + content: "\f127"; +} + +.post-format-icon.post-format-video::before { + content: "\f126"; +} + +.post-format-icon.post-format-chat::before { + content: "\f125"; +} + +.post-format-icon.post-format-status::before { + content: "\f130"; +} + +.post-format-icon.post-format-aside::before { + content: "\f123"; +} + +.post-format-icon.post-format-quote::before { + content: "\f122"; +} + +.post-format-icon.post-format-link::before { + content: "\f103"; +} + +/*------------------------------------------------------------------------------ + 12.0 - Categories +------------------------------------------------------------------------------*/ + +.category-adder { + margin-right: 120px; + padding: 4px 0; +} + +.category-adder h4 { + margin: 0 0 8px; +} + +#side-sortables .category-adder { + margin: 0; +} + +.wp-tab-panel, +.categorydiv div.tabs-panel, +.customlinkdiv div.tabs-panel, +.posttypediv div.tabs-panel, +.taxonomydiv div.tabs-panel { + min-height: 42px; + max-height: 200px; + overflow: auto; + padding: 0 0.9em; + border: solid 1px #dcdcde; + background-color: #fff; +} + +div.tabs-panel-active { + display: block; +} + +div.tabs-panel-inactive { + display: none; +} + +div.tabs-panel-active:focus { + box-shadow: inset 0 0 0 1px #4f94d4, inset 0 0 2px 1px rgba(79, 148, 212, 0.8); + outline: 0 none; +} + +#front-page-warning, +#front-static-pages ul, +ul.export-filters, +.inline-editor ul.cat-checklist ul, +.categorydiv ul.categorychecklist ul, +.customlinkdiv ul.categorychecklist ul, +.posttypediv ul.categorychecklist ul, +.taxonomydiv ul.categorychecklist ul { + margin-right: 18px; +} + +ul.categorychecklist li { + margin: 0; + padding: 0; + line-height: 1.69230769; + word-wrap: break-word; +} + +.categorydiv .tabs-panel, +.customlinkdiv .tabs-panel, +.posttypediv .tabs-panel, +.taxonomydiv .tabs-panel { + border-width: 3px; + border-style: solid; +} + +.form-wrap label { + display: block; + padding: 2px 0; +} + +.form-field input[type="text"], +.form-field input[type="password"], +.form-field input[type="email"], +.form-field input[type="number"], +.form-field input[type="search"], +.form-field input[type="tel"], +.form-field input[type="url"], +.form-field textarea { + border-style: solid; + border-width: 1px; + width: 95%; +} + +.form-field select, +.form-field p { + max-width: 95%; +} + +p.description, +.form-wrap p { + margin: 2px 0 5px; + color: #646970; +} + +p.help, +p.description, +span.description, +.form-wrap p { + font-size: 13px; +} + +p.description code { + font-style: normal; +} + +.form-wrap .form-field { + margin: 1em 0; + padding: 0; +} + +.col-wrap h2 { + margin: 12px 0; + font-size: 1.1em; +} + +.col-wrap p.submit { + margin-top: -10px; +} + +.edit-term-notes { + margin-top: 2em; +} + +/*------------------------------------------------------------------------------ + 13.0 - Tags +------------------------------------------------------------------------------*/ + +#poststuff .tagsdiv .ajaxtag { + margin-top: 1em; +} + +#poststuff .tagsdiv .howto { + margin: 1em 0 6px; +} + +.ajaxtag .newtag { + position: relative; +} + +.tagsdiv .newtag { + width: 180px; +} + +.tagsdiv .the-tags { + display: block; + height: 60px; + margin: 0 auto; + overflow: auto; + width: 260px; +} + +#post-body-content .tagsdiv .the-tags { + margin: 0 5px; +} + +p.popular-tags { + border: none; + line-height: 2em; + padding: 8px 12px 12px; + text-align: justify; +} + +p.popular-tags a { + padding: 0 3px; +} + +.tagcloud { + width: 97%; + margin: 0 0 40px; + text-align: justify; +} + +.tagcloud h2 { + margin: 2px 0 12px; +} + +#poststuff .inside .the-tagcloud { + margin: 5px 0 10px; + padding: 8px; + border: 1px solid #dcdcde; + line-height: 1.2; + word-spacing: 3px; +} + +.the-tagcloud ul { + margin: 0; +} + +.the-tagcloud ul li { + display: inline-block; +} + +/* Back-compat styles from deprecated jQuery.suggest, see ticket #40260. */ +.ac_results { + display: none; + margin: -1px 0 0; + padding: 0; + list-style: none; + position: absolute; + z-index: 10000; + border: 1px solid #4f94d4; + background-color: #fff; +} + +.wp-customizer .ac_results { + z-index: 500000; +} + +.ac_results li { + margin: 0; + padding: 5px 10px; + white-space: nowrap; + text-align: right; +} + +.ac_results .ac_over, +.ac_over .ac_match { + background-color: #2271b1; + color: #fff; + cursor: pointer; +} + +.ac_match { + text-decoration: underline; +} + +#addtag .spinner { + float: none; + vertical-align: top; +} + +#edittag { + max-width: 800px; +} + +.edit-tag-actions { + margin-top: 20px; +} + +/* Comments */ + +.comment-php .wp-editor-area { + height: 200px; +} + +.comment-ays th, +.comment-ays td { + padding: 10px 15px; +} + +.comment-ays .comment-content ul { + list-style: initial; + margin-right: 2em; +} + +.comment-ays .comment-content a[href]:after { + content: "(" attr( href ) ")"; + display: inline-block; + padding: 0 4px; + color: #646970; + font-size: 13px; + word-break: break-all; +} + +.comment-ays .comment-content p.edit-comment { + margin-top: 10px; +} + +.comment-ays .comment-content p.edit-comment a[href]:after { + content: ""; + padding: 0; +} + +.comment-ays-submit .button-cancel { + margin-right: 1em; +} + +.trash-undo-inside, +.spam-undo-inside { + margin: 1px 0 1px 8px; + line-height: 1.23076923; +} + +.spam-undo-inside .avatar, +.trash-undo-inside .avatar { + height: 20px; + width: 20px; + margin-left: 8px; + vertical-align: middle; +} + +.stuffbox .editcomment { + clear: none; + margin-top: 0; +} + +#namediv.stuffbox .editcomment input { + width: 100%; +} + +#namediv.stuffbox .editcomment.form-table td { + padding: 10px; +} + +#comment-status-radio p { + margin: 3px 0 5px; +} + +#comment-status-radio input { + margin: 2px 0 5px 3px; + vertical-align: middle; +} + +#comment-status-radio label { + padding: 5px 0; +} + +/* links tables */ +table.links-table { + width: 100%; + border-spacing: 0; +} + +.links-table th { + font-weight: 400; + text-align: right; + vertical-align: top; + min-width: 80px; + width: 20%; + word-wrap: break-word; +} + +.links-table th, +.links-table td { + padding: 5px 0; +} + +.links-table td label { + margin-left: 8px; +} + +.links-table td input[type="text"], +.links-table td textarea { + width: 100%; +} + +.links-table #link_rel { + max-width: 280px; +} + +/* DFW 2 +-------------------------------------------------------------- */ + +#qt_content_dfw { + display: none; +} + +.wp-editor-expand #qt_content_dfw { + display: inline-block; +} + +.focus-on .wrap > h1, +.focus-on .page-title-action, +.focus-on #wpfooter, +.focus-on .postbox-container > *, +.focus-on div.updated, +.focus-on div.error, +.focus-on div.notice, +.focus-on .update-nag, +.focus-on #wp-toolbar, +.focus-on #screen-meta-links, +.focus-on #screen-meta { + opacity: 0; + transition-duration: 0.6s; + transition-property: opacity; + transition-timing-function: ease-in-out; +} + +.focus-on #wp-toolbar { + opacity: 0.3; +} + +.focus-off .wrap > h1, +.focus-off .page-title-action, +.focus-off #wpfooter, +.focus-off .postbox-container > *, +.focus-off div.updated, +.focus-off div.error, +.focus-off div.notice, +.focus-off .update-nag, +.focus-off #wp-toolbar, +.focus-off #screen-meta-links, +.focus-off #screen-meta { + opacity: 1; + transition-duration: 0.2s; + transition-property: opacity; + transition-timing-function: ease-in-out; +} + +.focus-off #wp-toolbar { + -webkit-transform: translate(0, 0); +} + +.focus-on #adminmenuback, +.focus-on #adminmenuwrap { + transition-duration: 0.6s; + transition-property: transform; + transition-timing-function: ease-in-out; +} + +.focus-on #adminmenuback, +.focus-on #adminmenuwrap { + transform: translateX( 100% ); +} + +.focus-off #adminmenuback, +.focus-off #adminmenuwrap { + transform: translateX( 0 ); + transition-duration: 0.2s; + transition-property: transform; + transition-timing-function: ease-in-out; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + #content-resize-handle, + #post-body .wp_themeSkin .mceStatusbar a.mceResize { + background: transparent url(../images/resize-2x.gif) no-repeat scroll left bottom; + background-size: 11px 11px; + } + + /*rtl:ignore*/ + .rtl #content-resize-handle, + .rtl #post-body .wp_themeSkin .mceStatusbar a.mceResize { + background-image: url(../images/resize-rtl-2x.gif); + background-position: left bottom; + } +} + +/* + * The edit attachment screen auto-switches to one column layout when the + * viewport is smaller than 1200 pixels. + */ +@media only screen and (max-width: 1200px) { + .post-type-attachment #poststuff { + min-width: 0; + } + + .post-type-attachment #wpbody-content #poststuff #post-body { + margin: 0; + } + + .post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1 { + margin-left: 0; + width: 100%; + } + + .post-type-attachment #poststuff #postbox-container-1 .empty-container, + .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty { + outline: none; + height: 0; + min-height: 0; + } + + .post-type-attachment #poststuff #post-body.columns-2 #side-sortables { + min-height: 0; + width: auto; + } + + .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables { + outline: none; + min-height: 0; + margin-bottom: 0; + } + + /* hide the radio buttons for column prefs */ + .post-type-attachment .screen-layout, + .post-type-attachment .columns-prefs { + display: none; + } +} + +/* one column on the post write/edit screen */ +@media only screen and (max-width: 850px) { + #poststuff { + min-width: 0; + } + + #wpbody-content #poststuff #post-body { + margin: 0; + } + + #wpbody-content #post-body.columns-2 #postbox-container-1 { + margin-left: 0; + width: 100%; + } + + #poststuff #postbox-container-1 .empty-container, + #poststuff #postbox-container-1 #side-sortables:empty { + height: 0; + min-height: 0; + } + + #poststuff #post-body.columns-2 #side-sortables { + min-height: 0; + width: auto; + } + + /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */ + .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container, + .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty, + .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables, + .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables { + height: auto; + min-height: 60px; + } + + /* hide the radio buttons for column prefs */ + .screen-layout, + .columns-prefs { + display: none; + } +} + +@media screen and (max-width: 782px) { + .wp-core-ui .edit-tag-actions .button-primary { + margin-bottom: 0; + } + + #post-body-content { + min-width: 0; + } + + #titlediv #title-prompt-text { + padding: 10px; + } + + #poststuff .stuffbox .inside { + padding: 0 0 4px 2px; + } + + #poststuff h3.hndle, /* Back-compat for pre-4.4 */ + #poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */ + #poststuff h2 { + padding: 12px; + } + + #namediv.stuffbox .editcomment.form-table td { + padding: 5px 10px; + } + + .post-format-options { + padding-left: 0; + } + + .post-format-options a { + margin-left: 5px; + margin-bottom: 5px; + min-width: 52px; + } + + .post-format-options .post-format-title { + font-size: 11px; + } + + .post-format-options a div { + height: 28px; + width: 28px; + } + + .post-format-options a div:before { + font-size: 26px !important; + } + + /* Publish Metabox Options */ + #post-visibility-select { + line-height: 280%; + } + + .wp-core-ui .save-post-visibility, + .wp-core-ui .save-timestamp { + vertical-align: middle; + margin-left: 15px; + } + + .timestamp-wrap select#mm { + display: block; + width: 100%; + margin-bottom: 10px; + } + + .timestamp-wrap #jj, + .timestamp-wrap #aa, + .timestamp-wrap #hh, + .timestamp-wrap #mn { + padding: 12px 3px; + font-size: 14px; + margin-bottom: 5px; + width: auto; + text-align: center; + } + + /* Categories Metabox */ + ul.category-tabs { + margin: 30px 0 15px; + } + + ul.category-tabs li.tabs { + padding: 15px; + } + + ul.categorychecklist li { + margin-bottom: 15px; + } + + ul.categorychecklist ul { + margin-top: 15px; + } + + .category-add input[type=text], + .category-add select { + max-width: none; + margin-bottom: 15px; + } + + /* Tags Metabox */ + .tagsdiv .newtag { + width: 100%; + height: auto; + margin-bottom: 15px; + } + + .tagchecklist { + margin: 25px 10px; + } + + .tagchecklist > li { + font-size: 16px; + line-height: 1.4; + } + + /* Discussion */ + #commentstatusdiv p { + line-height: 2.8; + } + + /* TinyMCE Adjustments */ + .mceToolbar * { + white-space: normal !important; + } + + .mceToolbar tr, + .mceToolbar td { + float: right !important; + } + + .wp_themeSkin a.mceButton { + width: 30px; + height: 30px; + } + + .wp_themeSkin .mceButton .mceIcon { + margin-top: 5px; + margin-right: 5px; + } + + .wp_themeSkin .mceSplitButton { + margin-top: 1px; + } + + .wp_themeSkin .mceSplitButton td a.mceAction { + padding: 6px 6px 6px 3px; + } + + .wp_themeSkin .mceSplitButton td a.mceOpen, + .wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen { + padding-top: 6px; + padding-bottom: 6px; + background-position: 1px 6px; + } + + .wp_themeSkin table.mceListBox { + margin: 5px; + } + + div.quicktags-toolbar input { + padding: 10px 20px; + } + + button.wp-switch-editor { + font-size: 16px; + line-height: 1; + margin: 7px 7px 0 0; + padding: 8px 12px; + } + + #wp-content-media-buttons a { + font-size: 14px; + padding: 6px 10px; + } + + .wp-media-buttons span.wp-media-buttons-icon, + .wp-media-buttons span.jetpack-contact-form-icon { + width: 22px !important; + margin-right: -2px !important; + } + + .wp-media-buttons .add_media span.wp-media-buttons-icon:before, + .wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before { + font-size: 20px !important; + } + + #content_wp_fullscreen { + display: none; + } + + .misc-pub-section { + padding: 20px 10px; + } + + #delete-action, + #publishing-action { + line-height: 3.61538461; + } + + #publishing-action .spinner { + float: none; + margin-top: -2px; /* Half of the Publish button's bottom margin. */ + } + + /* Moderate Comment */ + .comment-ays th, + .comment-ays td { + padding-bottom: 0; + } + + .comment-ays td { + padding-top: 6px; + } + + /* Links */ + .links-table #link_rel { + max-width: none; + } + + .links-table th, + .links-table td { + padding: 10px 0; + } + + .edit-term-notes { + display: none; + } + + .privacy-text-box { + width: auto; + } + + .privacy-text-box-toc { + float: none; + width: auto; + height: 100%; + display: flex; + flex-direction: column; + } + + .privacy-text-section .return-to-top { + margin: 2em 0 0; + } +} diff --git a/tools/storybook/wordpress/css/edit-rtl.min.css b/tools/storybook/wordpress/css/edit-rtl.min.css new file mode 100644 index 00000000000..f5e6966bbe9 --- /dev/null +++ b/tools/storybook/wordpress/css/edit-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#poststuff{padding-top:10px;min-width:763px}#poststuff #post-body{padding:0}#poststuff .postbox-container{width:100%}#poststuff #post-body.columns-2{margin-left:300px}#show-comments{overflow:hidden}#save-action .spinner,#show-comments a{float:right}#show-comments .spinner{float:none;margin-top:0}#lost-connection-notice .spinner{visibility:visible;float:right;margin:0 0 0 5px}#titlediv{position:relative}#titlediv label{cursor:text}#titlediv div.inside{margin:0}#poststuff #titlewrap{border:0;padding:0}#titlediv #title{padding:3px 8px;font-size:1.7em;line-height:100%;height:1.7em;width:100%;outline:0;margin:0 0 3px;background-color:#fff}#titlediv #title-prompt-text{color:#646970;position:absolute;font-size:1.7em;padding:10px;pointer-events:none}input#link_description,input#link_url{width:100%}#pending{background:100% none;border:0 none;padding:0;font-size:11px;margin-top:-1px}#comment-link-box,#edit-slug-box{line-height:1.84615384;min-height:25px;margin-top:5px;padding:0 10px;color:#646970}#sample-permalink{display:inline-block;max-width:100%;word-wrap:break-word}#edit-slug-box .cancel{margin-left:10px;padding:0;font-size:11px}#comment-link-box{margin:5px 0;padding:0 5px}#editable-post-name-full{display:none}#editable-post-name{font-weight:600}#editable-post-name input{font-size:13px;font-weight:400;height:24px;margin:0;width:16em}.postarea h3 label{float:right}body.post-new-php .submitbox .submitdelete{display:none}.submitbox .submit a:hover{text-decoration:underline}.submitbox .submit input{margin-bottom:8px;margin-left:4px;padding:6px}#post-status-select{margin-top:3px}body.post-type-wp_navigation .inline-edit-status,body.post-type-wp_navigation div#minor-publishing{display:none}.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables{outline:3px dashed #646970;display:flow-root;min-height:60px;margin-bottom:20px}.postbox{position:relative;min-width:255px;border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff}#trackback_url{width:99%}#normal-sortables .postbox .submit{background:transparent none;border:0 none;float:left;padding:0 12px;margin:0}.category-add input[type=text],.category-add select{width:100%;max-width:260px;vertical-align:baseline}#side-sortables .category-add input[type=text],#side-sortables .category-add select{margin:0 0 1em}#side-sortables .add-menu-item-tabs li,.wp-tab-bar li,ul.category-tabs li{display:inline;line-height:1.35}.no-js .category-tabs li.hide-if-no-js{display:none}#side-sortables .add-menu-item-tabs a,.category-tabs a,.wp-tab-bar a{text-decoration:none}#post-body ul.add-menu-item-tabs li.tabs a,#post-body ul.category-tabs li.tabs a,#side-sortables .add-menu-item-tabs .tabs a,#side-sortables .category-tabs .tabs a,.wp-tab-bar .wp-tab-active a{color:#2c3338}.category-tabs{margin:8px 0 5px}#category-adder h4{margin:0}.taxonomy-add-new{display:inline-block;margin:10px 0;font-weight:600}#side-sortables .add-menu-item-tabs,.wp-tab-bar{margin-bottom:3px}#normal-sortables .postbox #replyrow .submit{float:none;margin:0;padding:5px 7px 10px;overflow:hidden}#side-sortables .submitbox .submit .preview,#side-sortables .submitbox .submit a.preview:hover,#side-sortables .submitbox .submit input{border:0 none}ul.add-menu-item-tabs,ul.category-tabs,ul.wp-tab-bar{margin-top:12px}ul.add-menu-item-tabs li,ul.category-tabs li{border:solid 1px transparent;position:relative}.wp-tab-active,ul.add-menu-item-tabs li.tabs,ul.category-tabs li.tabs{border:1px solid #dcdcde;border-bottom-color:#fff;background-color:#fff}ul.add-menu-item-tabs li,ul.category-tabs li,ul.wp-tab-bar li{padding:3px 5px 6px}#set-post-thumbnail{display:inline-block;max-width:100%}#postimagediv .inside img{max-width:100%;height:auto;width:auto;vertical-align:top;background-image:linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:100% 0,10px 10px;background-size:20px 20px}form#tags-filter{position:relative}.ui-tabs-hide,.wp-hidden-children .wp-hidden-child{display:none}#post-body .tagsdiv #newtag{margin-left:5px;width:16em}#side-sortables input#post_password{width:94%}#side-sortables .tagsdiv #newtag{width:68%}#post-status-info{width:100%;border-spacing:0;border:1px solid #c3c4c7;border-top:none;background-color:#f6f7f7;box-shadow:0 1px 1px rgba(0,0,0,.04);z-index:999}#post-status-info td{font-size:12px}.autosave-info{padding:2px 10px;text-align:left}#editorcontent #post-status-info{border:none}#content-resize-handle{background:transparent url(../images/resize.gif) no-repeat scroll left bottom;width:12px;cursor:row-resize}.rtl #content-resize-handle{background-image:url(../images/resize-rtl.gif);background-position:left bottom}.wp-editor-expand #content-resize-handle{display:none}#postdivrich #content{resize:none}#wp-word-count{padding:2px 10px}#wp-content-editor-container{position:relative}.wp-editor-expand #wp-content-editor-tools{z-index:1000;border-bottom:1px solid #c3c4c7}.wp-editor-expand #wp-content-editor-container{box-shadow:none;margin-top:-1px}.wp-editor-expand #wp-content-editor-container{border-bottom:0 none}.wp-editor-expand div.mce-statusbar{z-index:1}.wp-editor-expand #post-status-info{border-top:1px solid #c3c4c7}.wp-editor-expand div.mce-toolbar-grp{z-index:999}.mce-fullscreen #wp-content-wrap .mce-edit-area,.mce-fullscreen #wp-content-wrap .mce-menubar,.mce-fullscreen #wp-content-wrap .mce-statusbar,.mce-fullscreen #wp-content-wrap .mce-toolbar-grp{position:static!important;width:auto!important;padding:0!important}.mce-fullscreen #wp-content-wrap .mce-statusbar{visibility:visible!important}.mce-fullscreen #wp-content-wrap .mce-tinymce .mce-wp-dfw{display:none}.mce-fullscreen #wp-content-wrap .mce-wp-dfw,.post-php.mce-fullscreen #wpadminbar{display:none}#wp-content-editor-tools{background-color:#f0f0f1;padding-top:20px}#poststuff #post-body.columns-2 #side-sortables{width:280px}#timestampdiv select{vertical-align:top;font-size:12px;line-height:2.33333333}#aa,#hh,#jj,#mn{padding:6px 1px;font-size:12px;line-height:1.16666666}#hh,#jj,#mn{width:2em}#aa{width:3.4em}.curtime #timestamp{padding:2px 0 1px;display:inline!important;height:auto!important}#post-body #visibility:before,#post-body .misc-pub-comment-status:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-response-to:before,#post-body .misc-pub-revisions:before,#post-body .misc-pub-uploadedby:before,#post-body .misc-pub-uploadedto:before,.curtime #timestamp:before{color:#8c8f94}#post-body #visibility:before,#post-body .misc-pub-comment-status:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-response-to:before,#post-body .misc-pub-revisions:before,#post-body .misc-pub-uploadedby:before,#post-body .misc-pub-uploadedto:before,.curtime #timestamp:before{font:normal 20px/1 dashicons;speak:never;display:inline-block;margin-right:-1px;padding-left:3px;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#post-body .misc-pub-comment-status:before,#post-body .misc-pub-post-status:before{content:"\f173"}#post-body #visibility:before{content:"\f177"}.curtime #timestamp:before{content:"\f145";position:relative;top:-1px}#post-body .misc-pub-uploadedby:before{content:"\f110";position:relative;top:-1px}#post-body .misc-pub-uploadedto:before{content:"\f318";position:relative;top:-1px}#post-body .misc-pub-revisions:before{content:"\f321"}#post-body .misc-pub-response-to:before{content:"\f101"}#timestampdiv{padding-top:5px;line-height:1.76923076}#timestampdiv p{margin:8px 0 6px}#timestampdiv input{text-align:center}.notification-dialog{position:fixed;top:30%;max-height:70%;right:50%;width:450px;margin-right:-225px;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3);line-height:1.5;z-index:1000005;overflow-y:auto}.notification-dialog-background{position:fixed;top:0;right:0;left:0;bottom:0;background:#000;opacity:.7;z-index:1000000}#post-lock-dialog .post-locked-message,#post-lock-dialog .post-taken-over{margin:25px}#file-editor-warning .button,#post-lock-dialog .post-locked-message a.button{margin-left:10px}#post-lock-dialog .post-locked-avatar{float:right;margin:0 0 20px 20px}#post-lock-dialog .wp-tab-first{outline:0}#post-lock-dialog .locked-saving img{float:right;margin-left:3px}#post-lock-dialog.saved .locked-saved,#post-lock-dialog.saving .locked-saving{display:inline}#excerpt{display:block;margin:12px 0 0;height:4em;width:100%}.tagchecklist{margin-right:14px;font-size:12px;overflow:auto}.tagchecklist br{display:none}.tagchecklist strong{margin-right:-8px;position:absolute}.tagchecklist>li{float:right;margin-left:25px;font-size:13px;line-height:1.8;cursor:default;max-width:100%;overflow:hidden;text-overflow:ellipsis}.tagchecklist .ntdelbutton{position:absolute;width:24px;height:24px;border:none;margin:0 -19px 0 0;padding:0;background:0 0;cursor:pointer;text-indent:0}#poststuff .stuffbox>h3,#poststuff h2,#poststuff h3.hndle{font-size:14px;padding:8px 12px;margin:0;line-height:1.4}#poststuff .stuffbox h2{padding:8px 10px}#poststuff .stuffbox>h2{border-bottom:1px solid #f0f0f1}#poststuff .inside{margin:6px 0 0}.link-add-php #poststuff .inside,.link-php #poststuff .inside{margin-top:12px}#poststuff .stuffbox .inside{margin:0}#poststuff .inside #page_template,#poststuff .inside #parent_id{max-width:100%}.post-attributes-label-wrapper{margin-bottom:.5em}.post-attributes-label{vertical-align:baseline;font-weight:600}#comment-status-radio,#post-visibility-select{line-height:1.5;margin-top:3px}#linksubmitdiv .inside,#poststuff #submitdiv .inside{margin:0;padding:0}#post-body-content,.edit-form-section{margin-bottom:20px}.wp_attachment_details .attachment-content-description{margin-top:.5385em;display:inline-block;min-height:1.6923em}.privacy-settings #wpcontent,.privacy-settings.auto-fold #wpcontent,.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-right:0}.health-check-header h1,.privacy-settings-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px;line-height:1.3}.health-check-header,.privacy-settings-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #dcdcde}.health-check-title-section,.privacy-settings-title-section{display:flex;align-items:center;justify-content:center;clear:both;padding-top:8px}.privacy-settings-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.privacy-settings-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1),.privacy-settings-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2),.privacy-settings-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus,.privacy-settings-tab:focus{color:#1d2327;outline:1px solid #787c82;box-shadow:none}.health-check-tab.active,.privacy-settings-tab.active{box-shadow:inset 0 -3px #3582c4;font-weight:600}.health-check-body,.privacy-settings-body{max-width:800px;margin:0 auto}.tools-privacy-policy-page th{min-width:230px}.hr-separator{margin-top:20px;margin-bottom:15px}.health-check-accordion,.privacy-settings-accordion{border:1px solid #c3c4c7}.health-check-accordion-heading,.privacy-settings-accordion-heading{margin:0;border-top:1px solid #c3c4c7;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child,.privacy-settings-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger,.privacy-settings-accordion-trigger{background:#fff;border:0;color:#2c3338;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 1.5em 1em 3.5em;min-height:46px;position:relative;text-align:right;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;user-select:auto}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover,.privacy-settings-accordion-trigger:active,.privacy-settings-accordion-trigger:hover{background:#f6f7f7}.health-check-accordion-trigger:focus,.privacy-settings-accordion-trigger:focus{color:#1d2327;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #2271b1;background-color:#f6f7f7}.health-check-accordion-trigger .title,.privacy-settings-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.privacy-settings-accordion-trigger .icon,.privacy-settings-view-read .icon,.site-health-view-passed .icon{border:solid #50575e;border-width:0 0 2px 2px;height:.5rem;pointer-events:none;position:absolute;left:1.5em;top:50%;transform:translateY(-70%) rotate(-45deg);width:.5rem}.health-check-accordion-trigger .badge,.privacy-settings-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#2c3338;font-weight:600}.privacy-settings-accordion-trigger .badge{margin-right:.5rem}.health-check-accordion-trigger .badge.blue,.privacy-settings-accordion-trigger .badge.blue{border:1px solid #72aee6}.health-check-accordion-trigger .badge.orange,.privacy-settings-accordion-trigger .badge.orange{border:1px solid #dba617}.health-check-accordion-trigger .badge.red,.privacy-settings-accordion-trigger .badge.red{border:1px solid #e65054}.health-check-accordion-trigger .badge.green,.privacy-settings-accordion-trigger .badge.green{border:1px solid #00ba37}.health-check-accordion-trigger .badge.purple,.privacy-settings-accordion-trigger .badge.purple{border:1px solid #2271b1}.health-check-accordion-trigger .badge.gray,.privacy-settings-accordion-trigger .badge.gray{border:1px solid #c3c4c7}.health-check-accordion-trigger[aria-expanded=true] .icon,.privacy-settings-accordion-trigger[aria-expanded=true] .icon,.privacy-settings-view-passed[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(135deg)}.health-check-accordion-panel,.privacy-settings-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden],.privacy-settings-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons,.privacy-settings-accordion-panel a .dashicons{text-decoration:none}.privacy-settings-accordion-actions{text-align:left;display:block}.privacy-settings-accordion-actions .success{display:none;color:#008a20;padding-left:1em;padding-top:6px}.privacy-settings-accordion-actions .success.visible{display:inline-block}.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-policy-tutorial,.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-text-copy,.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .wp-policy-help{display:none}.privacy-settings-accordion-panel strong.privacy-policy-tutorial,.privacy-settings-accordion-panel strong.wp-policy-help{display:block;margin:0 0 1em}.privacy-text-copy span{pointer-events:none}.privacy-settings-accordion-panel .wp-suggested-text div>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep),.privacy-settings-accordion-panel .wp-suggested-text>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep),.privacy-settings-accordion-panel div>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep),.privacy-settings-accordion-panel>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep){margin:0;padding:1em;border-right:2px solid #787c82}@media screen and (max-width:782px){.health-check-body,.privacy-settings-body{margin:0 12px;width:auto}.privacy-settings .notice,.site-health .notice{margin:5px 10px 15px}.privacy-settings .update-nag,.site-health .update-nag{margin-left:10px;margin-right:10px}input#create-page{margin-top:10px}.wp-core-ui button.privacy-text-copy{white-space:normal;line-height:1.8}}@media only screen and (max-width:1004px){.health-check-body,.privacy-settings-body{margin:0 22px;width:auto}}#postcustomstuff thead th{padding:5px 8px 8px;background-color:#f0f0f1}#postcustom #postcustomstuff .submit{border:0 none;float:none;padding:0 8px 8px}#side-sortables #postcustom #postcustomstuff .submit{margin:0;padding:0}#side-sortables #postcustom #postcustomstuff #the-list textarea{height:85px}#side-sortables #postcustom #postcustomstuff td.left input,#side-sortables #postcustom #postcustomstuff td.left select,#side-sortables #postcustomstuff #newmetaleft a{margin:3px 3px 0}#postcustomstuff table{margin:0;width:100%;border:1px solid #dcdcde;border-spacing:0;background-color:#f6f7f7}#postcustomstuff tr{vertical-align:top}#postcustomstuff table input,#postcustomstuff table select,#postcustomstuff table textarea{width:96%;margin:8px}#side-sortables #postcustomstuff table input,#side-sortables #postcustomstuff table select,#side-sortables #postcustomstuff table textarea{margin:3px}#postcustomstuff td.left,#postcustomstuff th.left{width:38%}#postcustomstuff .submit input{margin:0;width:auto}#postcustomstuff #newmetaleft a{display:inline-block;margin:0 8px 8px;text-decoration:none}.no-js #postcustomstuff #enternew{display:none}#post-body-content .compat-attachment-fields{margin-bottom:20px}.compat-attachment-fields th{padding-top:5px;padding-left:10px}#select-featured-image{padding:4px 0;overflow:hidden}#select-featured-image img{max-width:100%;height:auto;margin-bottom:10px}#select-featured-image a{float:right;clear:both}#select-featured-image .remove{display:none;margin-top:10px}.js #select-featured-image.has-featured-image .remove{display:inline-block}.no-js #select-featured-image .choose{display:none}.post-format-icon::before{display:inline-block;vertical-align:middle;height:20px;width:20px;margin-top:-4px;margin-left:7px;color:#dcdcde;font:normal 20px/1 dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a.post-format-icon:hover:before{color:#135e96}#post-formats-select{line-height:2}#post-formats-select .post-format-icon::before{top:5px}input.post-format{margin-top:1px}label.post-format-icon{margin-right:0;padding:2px 0}.post-format-icon.post-format-standard::before{content:"\f109"}.post-format-icon.post-format-image::before{content:"\f128"}.post-format-icon.post-format-gallery::before{content:"\f161"}.post-format-icon.post-format-audio::before{content:"\f127"}.post-format-icon.post-format-video::before{content:"\f126"}.post-format-icon.post-format-chat::before{content:"\f125"}.post-format-icon.post-format-status::before{content:"\f130"}.post-format-icon.post-format-aside::before{content:"\f123"}.post-format-icon.post-format-quote::before{content:"\f122"}.post-format-icon.post-format-link::before{content:"\f103"}.category-adder{margin-right:120px;padding:4px 0}.category-adder h4{margin:0 0 8px}#side-sortables .category-adder{margin:0}.categorydiv div.tabs-panel,.customlinkdiv div.tabs-panel,.posttypediv div.tabs-panel,.taxonomydiv div.tabs-panel,.wp-tab-panel{min-height:42px;max-height:200px;overflow:auto;padding:0 .9em;border:solid 1px #dcdcde;background-color:#fff}div.tabs-panel-active{display:block}div.tabs-panel-inactive{display:none}div.tabs-panel-active:focus{box-shadow:inset 0 0 0 1px #4f94d4,inset 0 0 2px 1px rgba(79,148,212,.8);outline:0 none}#front-page-warning,#front-static-pages ul,.categorydiv ul.categorychecklist ul,.customlinkdiv ul.categorychecklist ul,.inline-editor ul.cat-checklist ul,.posttypediv ul.categorychecklist ul,.taxonomydiv ul.categorychecklist ul,ul.export-filters{margin-right:18px}ul.categorychecklist li{margin:0;padding:0;line-height:1.69230769;word-wrap:break-word}.categorydiv .tabs-panel,.customlinkdiv .tabs-panel,.posttypediv .tabs-panel,.taxonomydiv .tabs-panel{border-width:3px;border-style:solid}.form-wrap label{display:block;padding:2px 0}.form-field input[type=email],.form-field input[type=number],.form-field input[type=password],.form-field input[type=search],.form-field input[type=tel],.form-field input[type=text],.form-field input[type=url],.form-field textarea{border-style:solid;border-width:1px;width:95%}.form-field p,.form-field select{max-width:95%}.form-wrap p,p.description{margin:2px 0 5px;color:#646970}.form-wrap p,p.description,p.help,span.description{font-size:13px}p.description code{font-style:normal}.form-wrap .form-field{margin:1em 0;padding:0}.col-wrap h2{margin:12px 0;font-size:1.1em}.col-wrap p.submit{margin-top:-10px}.edit-term-notes{margin-top:2em}#poststuff .tagsdiv .ajaxtag{margin-top:1em}#poststuff .tagsdiv .howto{margin:1em 0 6px}.ajaxtag .newtag{position:relative}.tagsdiv .newtag{width:180px}.tagsdiv .the-tags{display:block;height:60px;margin:0 auto;overflow:auto;width:260px}#post-body-content .tagsdiv .the-tags{margin:0 5px}p.popular-tags{border:none;line-height:2em;padding:8px 12px 12px;text-align:justify}p.popular-tags a{padding:0 3px}.tagcloud{width:97%;margin:0 0 40px;text-align:justify}.tagcloud h2{margin:2px 0 12px}#poststuff .inside .the-tagcloud{margin:5px 0 10px;padding:8px;border:1px solid #dcdcde;line-height:1.2;word-spacing:3px}.the-tagcloud ul{margin:0}.the-tagcloud ul li{display:inline-block}.ac_results{display:none;margin:-1px 0 0;padding:0;list-style:none;position:absolute;z-index:10000;border:1px solid #4f94d4;background-color:#fff}.wp-customizer .ac_results{z-index:500000}.ac_results li{margin:0;padding:5px 10px;white-space:nowrap;text-align:right}.ac_over .ac_match,.ac_results .ac_over{background-color:#2271b1;color:#fff;cursor:pointer}.ac_match{text-decoration:underline}#addtag .spinner{float:none;vertical-align:top}#edittag{max-width:800px}.edit-tag-actions{margin-top:20px}.comment-php .wp-editor-area{height:200px}.comment-ays td,.comment-ays th{padding:10px 15px}.comment-ays .comment-content ul{list-style:initial;margin-right:2em}.comment-ays .comment-content a[href]:after{content:"(" attr(href) ")";display:inline-block;padding:0 4px;color:#646970;font-size:13px;word-break:break-all}.comment-ays .comment-content p.edit-comment{margin-top:10px}.comment-ays .comment-content p.edit-comment a[href]:after{content:"";padding:0}.comment-ays-submit .button-cancel{margin-right:1em}.spam-undo-inside,.trash-undo-inside{margin:1px 0 1px 8px;line-height:1.23076923}.spam-undo-inside .avatar,.trash-undo-inside .avatar{height:20px;width:20px;margin-left:8px;vertical-align:middle}.stuffbox .editcomment{clear:none;margin-top:0}#namediv.stuffbox .editcomment input{width:100%}#namediv.stuffbox .editcomment.form-table td{padding:10px}#comment-status-radio p{margin:3px 0 5px}#comment-status-radio input{margin:2px 0 5px 3px;vertical-align:middle}#comment-status-radio label{padding:5px 0}table.links-table{width:100%;border-spacing:0}.links-table th{font-weight:400;text-align:right;vertical-align:top;min-width:80px;width:20%;word-wrap:break-word}.links-table td,.links-table th{padding:5px 0}.links-table td label{margin-left:8px}.links-table td input[type=text],.links-table td textarea{width:100%}.links-table #link_rel{max-width:280px}#qt_content_dfw{display:none}.wp-editor-expand #qt_content_dfw{display:inline-block}.focus-on #screen-meta,.focus-on #screen-meta-links,.focus-on #wp-toolbar,.focus-on #wpfooter,.focus-on .page-title-action,.focus-on .postbox-container>*,.focus-on .update-nag,.focus-on .wrap>h1,.focus-on div.error,.focus-on div.notice,.focus-on div.updated{opacity:0;transition-duration:.6s;transition-property:opacity;transition-timing-function:ease-in-out}.focus-on #wp-toolbar{opacity:.3}.focus-off #screen-meta,.focus-off #screen-meta-links,.focus-off #wp-toolbar,.focus-off #wpfooter,.focus-off .page-title-action,.focus-off .postbox-container>*,.focus-off .update-nag,.focus-off .wrap>h1,.focus-off div.error,.focus-off div.notice,.focus-off div.updated{opacity:1;transition-duration:.2s;transition-property:opacity;transition-timing-function:ease-in-out}.focus-off #wp-toolbar{-webkit-transform:translate(0,0)}.focus-on #adminmenuback,.focus-on #adminmenuwrap{transition-duration:.6s;transition-property:transform;transition-timing-function:ease-in-out}.focus-on #adminmenuback,.focus-on #adminmenuwrap{transform:translateX(100%)}.focus-off #adminmenuback,.focus-off #adminmenuwrap{transform:translateX(0);transition-duration:.2s;transition-property:transform;transition-timing-function:ease-in-out}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){#content-resize-handle,#post-body .wp_themeSkin .mceStatusbar a.mceResize{background:transparent url(../images/resize-2x.gif) no-repeat scroll left bottom;background-size:11px 11px}.rtl #content-resize-handle,.rtl #post-body .wp_themeSkin .mceStatusbar a.mceResize{background-image:url(../images/resize-rtl-2x.gif);background-position:left bottom}}@media only screen and (max-width:1200px){.post-type-attachment #poststuff{min-width:0}.post-type-attachment #wpbody-content #poststuff #post-body{margin:0}.post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1{margin-left:0;width:100%}.post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty,.post-type-attachment #poststuff #postbox-container-1 .empty-container{outline:0;height:0;min-height:0}.post-type-attachment #poststuff #post-body.columns-2 #side-sortables{min-height:0;width:auto}.is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables{outline:0;min-height:0;margin-bottom:0}.post-type-attachment .columns-prefs,.post-type-attachment .screen-layout{display:none}}@media only screen and (max-width:850px){#poststuff{min-width:0}#wpbody-content #poststuff #post-body{margin:0}#wpbody-content #post-body.columns-2 #postbox-container-1{margin-left:0;width:100%}#poststuff #postbox-container-1 #side-sortables:empty,#poststuff #postbox-container-1 .empty-container{height:0;min-height:0}#poststuff #post-body.columns-2 #side-sortables{min-height:0;width:auto}.is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,.is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables,.is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,.is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container{height:auto;min-height:60px}.columns-prefs,.screen-layout{display:none}}@media screen and (max-width:782px){.wp-core-ui .edit-tag-actions .button-primary{margin-bottom:0}#post-body-content{min-width:0}#titlediv #title-prompt-text{padding:10px}#poststuff .stuffbox .inside{padding:0 0 4px 2px}#poststuff .stuffbox>h3,#poststuff h2,#poststuff h3.hndle{padding:12px}#namediv.stuffbox .editcomment.form-table td{padding:5px 10px}.post-format-options{padding-left:0}.post-format-options a{margin-left:5px;margin-bottom:5px;min-width:52px}.post-format-options .post-format-title{font-size:11px}.post-format-options a div{height:28px;width:28px}.post-format-options a div:before{font-size:26px!important}#post-visibility-select{line-height:280%}.wp-core-ui .save-post-visibility,.wp-core-ui .save-timestamp{vertical-align:middle;margin-left:15px}.timestamp-wrap select#mm{display:block;width:100%;margin-bottom:10px}.timestamp-wrap #aa,.timestamp-wrap #hh,.timestamp-wrap #jj,.timestamp-wrap #mn{padding:12px 3px;font-size:14px;margin-bottom:5px;width:auto;text-align:center}ul.category-tabs{margin:30px 0 15px}ul.category-tabs li.tabs{padding:15px}ul.categorychecklist li{margin-bottom:15px}ul.categorychecklist ul{margin-top:15px}.category-add input[type=text],.category-add select{max-width:none;margin-bottom:15px}.tagsdiv .newtag{width:100%;height:auto;margin-bottom:15px}.tagchecklist{margin:25px 10px}.tagchecklist>li{font-size:16px;line-height:1.4}#commentstatusdiv p{line-height:2.8}.mceToolbar *{white-space:normal!important}.mceToolbar td,.mceToolbar tr{float:right!important}.wp_themeSkin a.mceButton{width:30px;height:30px}.wp_themeSkin .mceButton .mceIcon{margin-top:5px;margin-right:5px}.wp_themeSkin .mceSplitButton{margin-top:1px}.wp_themeSkin .mceSplitButton td a.mceAction{padding:6px 6px 6px 3px}.wp_themeSkin .mceSplitButton td a.mceOpen,.wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen{padding-top:6px;padding-bottom:6px;background-position:1px 6px}.wp_themeSkin table.mceListBox{margin:5px}div.quicktags-toolbar input{padding:10px 20px}button.wp-switch-editor{font-size:16px;line-height:1;margin:7px 7px 0 0;padding:8px 12px}#wp-content-media-buttons a{font-size:14px;padding:6px 10px}.wp-media-buttons span.jetpack-contact-form-icon,.wp-media-buttons span.wp-media-buttons-icon{width:22px!important;margin-right:-2px!important}.wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before,.wp-media-buttons .add_media span.wp-media-buttons-icon:before{font-size:20px!important}#content_wp_fullscreen{display:none}.misc-pub-section{padding:20px 10px}#delete-action,#publishing-action{line-height:3.61538461}#publishing-action .spinner{float:none;margin-top:-2px}.comment-ays td,.comment-ays th{padding-bottom:0}.comment-ays td{padding-top:6px}.links-table #link_rel{max-width:none}.links-table td,.links-table th{padding:10px 0}.edit-term-notes{display:none}.privacy-text-box{width:auto}.privacy-text-box-toc{float:none;width:auto;height:100%;display:flex;flex-direction:column}.privacy-text-section .return-to-top{margin:2em 0 0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/edit.css b/tools/storybook/wordpress/css/edit.css new file mode 100644 index 00000000000..7fa904ae1a3 --- /dev/null +++ b/tools/storybook/wordpress/css/edit.css @@ -0,0 +1,2021 @@ +#poststuff { + padding-top: 10px; + min-width: 763px; +} + +#poststuff #post-body { + padding: 0; +} + +#poststuff .postbox-container { + width: 100%; +} + +#poststuff #post-body.columns-2 { + margin-right: 300px; +} + +/*------------------------------------------------------------------------------ + 11.0 - Write/Edit Post Screen +------------------------------------------------------------------------------*/ + +#show-comments { + overflow: hidden; +} + +#save-action .spinner, +#show-comments a { + float: left; +} + +#show-comments .spinner { + float: none; + margin-top: 0; +} + +#lost-connection-notice .spinner { + visibility: visible; + float: left; + margin: 0 5px 0 0; +} + +#titlediv { + position: relative; +} + +#titlediv label { + cursor: text; +} + +#titlediv div.inside { + margin: 0; +} + +#poststuff #titlewrap { + border: 0; + padding: 0; +} + +#titlediv #title { + padding: 3px 8px; + font-size: 1.7em; + line-height: 100%; + height: 1.7em; + width: 100%; + outline: none; + margin: 0 0 3px; + background-color: #fff; +} + +#titlediv #title-prompt-text { + color: #646970; + position: absolute; + font-size: 1.7em; + padding: 10px; + pointer-events: none; +} + +input#link_description, +input#link_url { + width: 100%; +} + +#pending { + background: 0 none; + border: 0 none; + padding: 0; + font-size: 11px; + margin-top: -1px; +} + +#edit-slug-box, +#comment-link-box { + line-height: 1.84615384; + min-height: 25px; + margin-top: 5px; + padding: 0 10px; + color: #646970; +} + +#sample-permalink { + display: inline-block; + max-width: 100%; + word-wrap: break-word; +} + +#edit-slug-box .cancel { + margin-right: 10px; + padding: 0; + font-size: 11px; +} + +#comment-link-box { + margin: 5px 0; + padding: 0 5px; +} + +#editable-post-name-full { + display: none; +} + +#editable-post-name { + font-weight: 600; +} + +#editable-post-name input { + font-size: 13px; + font-weight: 400; + height: 24px; + margin: 0; + width: 16em; +} + +.postarea h3 label { + float: left; +} + +body.post-new-php .submitbox .submitdelete { + display: none; +} + +.submitbox .submit a:hover { + text-decoration: underline; +} + +.submitbox .submit input { + margin-bottom: 8px; + margin-right: 4px; + padding: 6px; +} + +#post-status-select { + margin-top: 3px; +} + +body.post-type-wp_navigation div#minor-publishing, +body.post-type-wp_navigation .inline-edit-status { + display: none; +} + +/* Post Screen */ + +/* Only highlight drop zones when dragging and only in the 2 columns layout. */ +.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables { + outline: 3px dashed #646970; + /* Prevent margin on the child from collapsing with margin on the parent. */ + display: flow-root; + /* + * This min-height is meant to limit jumpiness while dragging. It's equivalent + * to the minimum height of the sortable-placeholder which is given by the height + * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder + * bottom margin (20px) + 2 additional pixels to compensate browsers rounding. + */ + min-height: 60px; + margin-bottom: 20px; +} + +.postbox { + position: relative; + min-width: 255px; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; +} + +#trackback_url { + width: 99%; +} + +#normal-sortables .postbox .submit { + background: transparent none; + border: 0 none; + float: right; + padding: 0 12px; + margin: 0; +} + +.category-add input[type="text"], +.category-add select { + width: 100%; + max-width: 260px; + vertical-align: baseline; +} + +#side-sortables .category-add input[type="text"], +#side-sortables .category-add select { + margin: 0 0 1em; +} + +ul.category-tabs li, +#side-sortables .add-menu-item-tabs li, +.wp-tab-bar li { + display: inline; + line-height: 1.35; +} + +.no-js .category-tabs li.hide-if-no-js { + display: none; +} + +.category-tabs a, +#side-sortables .add-menu-item-tabs a, +.wp-tab-bar a { + text-decoration: none; +} + +/* @todo: do these really need to be so specific? */ +#side-sortables .category-tabs .tabs a, +#side-sortables .add-menu-item-tabs .tabs a, +.wp-tab-bar .wp-tab-active a, +#post-body ul.category-tabs li.tabs a, +#post-body ul.add-menu-item-tabs li.tabs a { + color: #2c3338; +} + +.category-tabs { + margin: 8px 0 5px; +} + +/* Back-compat for pre-4.4 */ +#category-adder h4 { + margin: 0; +} + +.taxonomy-add-new { + display: inline-block; + margin: 10px 0; + font-weight: 600; +} + +#side-sortables .add-menu-item-tabs, +.wp-tab-bar { + margin-bottom: 3px; +} + +#normal-sortables .postbox #replyrow .submit { + float: none; + margin: 0; + padding: 5px 7px 10px; + overflow: hidden; +} + +#side-sortables .submitbox .submit input, +#side-sortables .submitbox .submit .preview, +#side-sortables .submitbox .submit a.preview:hover { + border: 0 none; +} + +/* @todo: make this a more generic class */ +ul.category-tabs, +ul.add-menu-item-tabs, +ul.wp-tab-bar { + margin-top: 12px; +} + +ul.category-tabs li, +ul.add-menu-item-tabs li { + border: solid 1px transparent; + position: relative; +} + +ul.category-tabs li.tabs, +ul.add-menu-item-tabs li.tabs, +.wp-tab-active { + border: 1px solid #dcdcde; + border-bottom-color: #fff; + background-color: #fff; +} + +ul.category-tabs li, +ul.add-menu-item-tabs li, +ul.wp-tab-bar li { + padding: 3px 5px 6px; +} + +#set-post-thumbnail { + display: inline-block; + max-width: 100%; +} + +#postimagediv .inside img { + max-width: 100%; + height: auto; + width: auto; + vertical-align: top; + background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; +} + +form#tags-filter { + position: relative; +} + +/* Global classes */ +.wp-hidden-children .wp-hidden-child, +.ui-tabs-hide { + display: none; +} + +#post-body .tagsdiv #newtag { + margin-right: 5px; + width: 16em; +} + +#side-sortables input#post_password { + width: 94% +} + +#side-sortables .tagsdiv #newtag { + width: 68%; +} + +#post-status-info { + width: 100%; + border-spacing: 0; + border: 1px solid #c3c4c7; + border-top: none; + background-color: #f6f7f7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + z-index: 999; +} + +#post-status-info td { + font-size: 12px; +} + +.autosave-info { + padding: 2px 10px; + text-align: right; +} + +#editorcontent #post-status-info { + border: none; +} + +#content-resize-handle { + background: transparent url(../images/resize.gif) no-repeat scroll right bottom; + width: 12px; + cursor: row-resize; +} + +/*rtl:ignore*/ +.rtl #content-resize-handle { + background-image: url(../images/resize-rtl.gif); + background-position: left bottom; +} + +.wp-editor-expand #content-resize-handle { + display: none; +} + +#postdivrich #content { + resize: none; +} + +#wp-word-count { + padding: 2px 10px; +} + +#wp-content-editor-container { + position: relative; +} + +.wp-editor-expand #wp-content-editor-tools { + z-index: 1000; + border-bottom: 1px solid #c3c4c7; +} + +.wp-editor-expand #wp-content-editor-container { + box-shadow: none; + margin-top: -1px; +} + +.wp-editor-expand #wp-content-editor-container { + border-bottom: 0 none; +} + +.wp-editor-expand div.mce-statusbar { + z-index: 1; +} + +.wp-editor-expand #post-status-info { + border-top: 1px solid #c3c4c7; +} + +.wp-editor-expand div.mce-toolbar-grp { + z-index: 999; +} + +/* TinyMCE native fullscreen mode override */ +.mce-fullscreen #wp-content-wrap .mce-menubar, +.mce-fullscreen #wp-content-wrap .mce-toolbar-grp, +.mce-fullscreen #wp-content-wrap .mce-edit-area, +.mce-fullscreen #wp-content-wrap .mce-statusbar { + position: static !important; + width: auto !important; + padding: 0 !important; +} + +.mce-fullscreen #wp-content-wrap .mce-statusbar { + visibility: visible !important; +} + +.mce-fullscreen #wp-content-wrap .mce-tinymce .mce-wp-dfw { + display: none; +} + +.post-php.mce-fullscreen #wpadminbar, +.mce-fullscreen #wp-content-wrap .mce-wp-dfw { + display: none; +} +/* End TinyMCE native fullscreen mode override */ + +#wp-content-editor-tools { + background-color: #f0f0f1; + padding-top: 20px; +} + +#poststuff #post-body.columns-2 #side-sortables { + width: 280px; +} + +#timestampdiv select { + vertical-align: top; + font-size: 12px; + line-height: 2.33333333; /* 28px */ +} + +#aa, #jj, #hh, #mn { + padding: 6px 1px; + font-size: 12px; + line-height: 1.16666666; /* 14px */ +} + +#jj, #hh, #mn { + width: 2em; +} + +#aa { + width: 3.4em; +} + +.curtime #timestamp { + padding: 2px 0 1px; + display: inline !important; + height: auto !important; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-uploadedby:before, +#post-body .misc-pub-uploadedto:before, +#post-body .misc-pub-revisions:before, +#post-body .misc-pub-response-to:before, +#post-body .misc-pub-comment-status:before { + color: #8c8f94; +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-uploadedby:before, +#post-body .misc-pub-uploadedto:before, +#post-body .misc-pub-revisions:before, +#post-body .misc-pub-response-to:before, +#post-body .misc-pub-comment-status:before { + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + margin-left: -1px; + padding-right: 3px; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +#post-body .misc-pub-post-status:before, +#post-body .misc-pub-comment-status:before { + content: "\f173"; +} + +#post-body #visibility:before { + content: "\f177"; +} + +.curtime #timestamp:before { + content: "\f145"; + position: relative; + top: -1px; +} + +#post-body .misc-pub-uploadedby:before { + content: "\f110"; + position: relative; + top: -1px; +} + +#post-body .misc-pub-uploadedto:before { + content: "\f318"; + position: relative; + top: -1px; +} + +#post-body .misc-pub-revisions:before { + content: "\f321"; +} + +#post-body .misc-pub-response-to:before { + content: "\f101"; +} + +#timestampdiv { + padding-top: 5px; + line-height: 1.76923076; +} + +#timestampdiv p { + margin: 8px 0 6px; +} + +#timestampdiv input { + text-align: center; +} + +.notification-dialog { + position: fixed; + top: 30%; + max-height: 70%; + left: 50%; + width: 450px; + margin-left: -225px; + background: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + line-height: 1.5; + z-index: 1000005; + overflow-y: auto; +} + +.notification-dialog-background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #000; + opacity: 0.7; + filter: alpha(opacity=70); + z-index: 1000000; +} + +#post-lock-dialog .post-locked-message, +#post-lock-dialog .post-taken-over { + margin: 25px; +} + +#post-lock-dialog .post-locked-message a.button, +#file-editor-warning .button { + margin-right: 10px; +} + +#post-lock-dialog .post-locked-avatar { + float: left; + margin: 0 20px 20px 0; +} + +#post-lock-dialog .wp-tab-first { + outline: 0; +} + +#post-lock-dialog .locked-saving img { + float: left; + margin-right: 3px; +} + +#post-lock-dialog.saving .locked-saving, +#post-lock-dialog.saved .locked-saved { + display: inline; +} + +#excerpt { + display: block; + margin: 12px 0 0; + height: 4em; + width: 100%; +} + +.tagchecklist { + margin-left: 14px; + font-size: 12px; + overflow: auto; +} + +.tagchecklist br { + display: none; +} + +.tagchecklist strong { + margin-left: -8px; + position: absolute; +} + +.tagchecklist > li { + float: left; + margin-right: 25px; + font-size: 13px; + line-height: 1.8; + cursor: default; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.tagchecklist .ntdelbutton { + position: absolute; + width: 24px; + height: 24px; + border: none; + margin: 0 0 0 -19px; + padding: 0; + background: none; + cursor: pointer; + text-indent: 0; +} + +#poststuff h3.hndle, /* Back-compat for pre-4.4 */ +#poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */ +#poststuff h2 { + font-size: 14px; + padding: 8px 12px; + margin: 0; + line-height: 1.4; +} + +#poststuff .stuffbox h2 { + padding: 8px 10px; +} + +#poststuff .stuffbox > h2 { + border-bottom: 1px solid #f0f0f1; +} + +#poststuff .inside { + margin: 6px 0 0; +} + +.link-php #poststuff .inside, +.link-add-php #poststuff .inside { + margin-top: 12px; +} + +#poststuff .stuffbox .inside { + margin: 0; +} + +#poststuff .inside #parent_id, +#poststuff .inside #page_template { + max-width: 100%; +} + +.post-attributes-label-wrapper { + margin-bottom: 0.5em; +} + +.post-attributes-label { + vertical-align: baseline; + font-weight: 600; +} + +#post-visibility-select, +#comment-status-radio { + line-height: 1.5; + margin-top: 3px; +} + +#linksubmitdiv .inside, /* Old Link Manager back-compat. */ +#poststuff #submitdiv .inside { + margin: 0; + padding: 0; +} + +#post-body-content, +.edit-form-section { + margin-bottom: 20px; +} + +.wp_attachment_details .attachment-content-description { + margin-top: 0.5385em; + display: inline-block; + min-height: 1.6923em; +} + +/** +* Privacy Settings section +* +* Note: This section includes selectors from +* Site Health where duplicate styling is used. +*/ + +/* General */ +.privacy-settings #wpcontent, +.privacy-settings.auto-fold #wpcontent, +.site-health #wpcontent, +.site-health.auto-fold #wpcontent { + padding-left: 0; +} + +/* Emulates .wrap h1 styling */ +.privacy-settings-header h1, +.health-check-header h1 { + display: inline-block; + font-weight: 600; + margin: 0 0.8rem 1rem; + font-size: 23px; + padding: 9px 0 4px; + line-height: 1.3; +} + +/* Header */ +.privacy-settings-header, +.health-check-header { + text-align: center; + margin: 0 0 1rem; + background: #fff; + border-bottom: 1px solid #dcdcde; +} + +.privacy-settings-title-section, +.health-check-title-section { + display: flex; + align-items: center; + justify-content: center; + clear: both; + padding-top: 8px; +} + +.privacy-settings-tabs-wrapper { + /* IE 11 */ + display: -ms-inline-grid; + -ms-grid-columns: 1fr 1fr; + vertical-align: top; + /* modern browsers */ + display: inline-grid; + grid-template-columns: 1fr 1fr; +} + +.privacy-settings-tab { + display: block; /* IE 11 */ + text-decoration: none; + color: inherit; + padding: 0.5rem 1rem 1rem; + margin: 0 1rem; + transition: box-shadow 0.5s ease-in-out; +} + +.privacy-settings-tab:nth-child(1), +.health-check-tab:nth-child(1) { + -ms-grid-column: 1; /* IE 11 */ +} + +.privacy-settings-tab:nth-child(2), +.health-check-tab:nth-child(2) { + -ms-grid-column: 2; /* IE 11 */ +} + +.privacy-settings-tab:focus, +.health-check-tab:focus { + color: #1d2327; + outline: 1px solid #787c82; + box-shadow: none; +} + +.privacy-settings-tab.active, +.health-check-tab.active { + box-shadow: inset 0 -3px #3582c4; + font-weight: 600; +} + +/* Body */ +.privacy-settings-body, +.health-check-body { + max-width: 800px; + margin: 0 auto; +} + +.tools-privacy-policy-page th { + min-width: 230px; +} + +.hr-separator { + margin-top: 20px; + margin-bottom: 15px; +} + +/* Accordions */ +.privacy-settings-accordion, +.health-check-accordion { + border: 1px solid #c3c4c7; +} + +.privacy-settings-accordion-heading, +.health-check-accordion-heading { + margin: 0; + border-top: 1px solid #c3c4c7; + font-size: inherit; + line-height: inherit; + font-weight: 600; + color: inherit; +} + +.privacy-settings-accordion-heading:first-child, +.health-check-accordion-heading:first-child { + border-top: none; +} + +.privacy-settings-accordion-trigger, +.health-check-accordion-trigger { + background: #fff; + border: 0; + color: #2c3338; + cursor: pointer; + display: flex; + font-weight: 400; + margin: 0; + padding: 1em 3.5em 1em 1.5em; + min-height: 46px; + position: relative; + text-align: left; + width: 100%; + align-items: center; + justify-content: space-between; + -webkit-user-select: auto; + user-select: auto; +} + +.privacy-settings-accordion-trigger:hover, +.privacy-settings-accordion-trigger:active, +.health-check-accordion-trigger:hover, +.health-check-accordion-trigger:active { + background: #f6f7f7; +} + +.privacy-settings-accordion-trigger:focus, +.health-check-accordion-trigger:focus { + color: #1d2327; + border: none; + box-shadow: none; + outline-offset: -1px; + outline: 2px solid #2271b1; + background-color: #f6f7f7; +} + +.privacy-settings-accordion-trigger .title, +.health-check-accordion-trigger .title { + pointer-events: none; + font-weight: 600; + flex-grow: 1; +} + +.privacy-settings-accordion-trigger .icon, +.privacy-settings-view-read .icon, +.health-check-accordion-trigger .icon, +.site-health-view-passed .icon { + border: solid #50575e; + border-width: 0 2px 2px 0; + height: 0.5rem; + pointer-events: none; + position: absolute; + right: 1.5em; + top: 50%; + transform: translateY(-70%) rotate(45deg); + width: 0.5rem; +} + +.privacy-settings-accordion-trigger .badge, +.health-check-accordion-trigger .badge { + padding: 0.1rem 0.5rem 0.15rem; + color: #2c3338; + font-weight: 600; +} + +.privacy-settings-accordion-trigger .badge { + margin-left: 0.5rem; +} + +.privacy-settings-accordion-trigger .badge.blue, +.health-check-accordion-trigger .badge.blue { + border: 1px solid #72aee6; +} + +.privacy-settings-accordion-trigger .badge.orange, +.health-check-accordion-trigger .badge.orange { + border: 1px solid #dba617; +} + +.privacy-settings-accordion-trigger .badge.red, +.health-check-accordion-trigger .badge.red { + border: 1px solid #e65054; +} + +.privacy-settings-accordion-trigger .badge.green, +.health-check-accordion-trigger .badge.green { + border: 1px solid #00ba37; +} + +.privacy-settings-accordion-trigger .badge.purple, +.health-check-accordion-trigger .badge.purple { + border: 1px solid #2271b1; +} + +.privacy-settings-accordion-trigger .badge.gray, +.health-check-accordion-trigger .badge.gray { + border: 1px solid #c3c4c7; +} + +.privacy-settings-accordion-trigger[aria-expanded="true"] .icon, +.privacy-settings-view-passed[aria-expanded="true"] .icon, +.health-check-accordion-trigger[aria-expanded="true"] .icon, +.site-health-view-passed[aria-expanded="true"] .icon { + transform: translateY(-30%) rotate(-135deg) +} + +.privacy-settings-accordion-panel, +.health-check-accordion-panel { + margin: 0; + padding: 1em 1.5em; + background: #fff; +} + +.privacy-settings-accordion-panel[hidden], +.health-check-accordion-panel[hidden] { + display: none; +} + +.privacy-settings-accordion-panel a .dashicons, +.health-check-accordion-panel a .dashicons { + text-decoration: none; +} + +.privacy-settings-accordion-actions { + text-align: right; + display: block; +} + +.privacy-settings-accordion-actions .success { + display: none; + color: #008a20; + padding-right: 1em; + padding-top: 6px; +} + +.privacy-settings-accordion-actions .success.visible { + display: inline-block; +} + +/* Suggested text for privacy policy */ +.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .wp-policy-help, /* For back-compat, see #49282 */ +.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-policy-tutorial, +.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-text-copy { + display: none; +} + +.privacy-settings-accordion-panel strong.wp-policy-help, /* For back-compat, see #49282 */ +.privacy-settings-accordion-panel strong.privacy-policy-tutorial { + display: block; + margin: 0 0 1em; +} + +.privacy-text-copy span { + pointer-events: none; +} + +.privacy-settings-accordion-panel .wp-suggested-text > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), +.privacy-settings-accordion-panel .wp-suggested-text div > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), +.privacy-settings-accordion-panel > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p), +.privacy-settings-accordion-panel div > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p) { + margin: 0; + padding: 1em; + border-left: 2px solid #787c82; +} + +/* Media queries */ +@media screen and (max-width: 782px) { + + .privacy-settings-body, + .health-check-body { + margin: 0 12px; + width: auto; + } + + .privacy-settings .notice, + .site-health .notice { + margin: 5px 10px 15px; + } + + .privacy-settings .update-nag, + .site-health .update-nag { + margin-right: 10px; + margin-left: 10px; + } + + input#create-page { + margin-top: 10px; + } + + .wp-core-ui button.privacy-text-copy { + white-space: normal; + line-height: 1.8; + } +} + +@media only screen and (max-width: 1004px) { + + .privacy-settings-body, + .health-check-body { + margin: 0 22px; + width: auto; + } +} + +/** +* End Privacy Settings section +*/ + +/*------------------------------------------------------------------------------ + 11.1 - Custom Fields +------------------------------------------------------------------------------*/ + +#postcustomstuff thead th { + padding: 5px 8px 8px; + background-color: #f0f0f1; +} + +#postcustom #postcustomstuff .submit { + border: 0 none; + float: none; + padding: 0 8px 8px; +} + +#side-sortables #postcustom #postcustomstuff .submit { + margin: 0; + padding: 0; +} + +#side-sortables #postcustom #postcustomstuff #the-list textarea { + height: 85px; +} + +#side-sortables #postcustom #postcustomstuff td.left input, +#side-sortables #postcustom #postcustomstuff td.left select, +#side-sortables #postcustomstuff #newmetaleft a { + margin: 3px 3px 0; +} + +#postcustomstuff table { + margin: 0; + width: 100%; + border: 1px solid #dcdcde; + border-spacing: 0; + background-color: #f6f7f7; +} + +#postcustomstuff tr { + vertical-align: top; +} + +#postcustomstuff table input, +#postcustomstuff table select, +#postcustomstuff table textarea { + width: 96%; + margin: 8px; +} + +#side-sortables #postcustomstuff table input, +#side-sortables #postcustomstuff table select, +#side-sortables #postcustomstuff table textarea { + margin: 3px; +} + +#postcustomstuff th.left, +#postcustomstuff td.left { + width: 38%; +} + +#postcustomstuff .submit input { + margin: 0; + width: auto; +} + +#postcustomstuff #newmetaleft a { + display: inline-block; + margin: 0 8px 8px; + text-decoration: none; +} + +.no-js #postcustomstuff #enternew { + display: none; +} + +#post-body-content .compat-attachment-fields { + margin-bottom: 20px; +} + +.compat-attachment-fields th { + padding-top: 5px; + padding-right: 10px; +} + +/*------------------------------------------------------------------------------ + 11.3 - Featured Images +------------------------------------------------------------------------------*/ + +#select-featured-image { + padding: 4px 0; + overflow: hidden; +} + +#select-featured-image img { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} + +#select-featured-image a { + float: left; + clear: both; +} + +#select-featured-image .remove { + display: none; + margin-top: 10px; +} + +.js #select-featured-image.has-featured-image .remove { + display: inline-block; +} + +.no-js #select-featured-image .choose { + display: none; +} + +/*------------------------------------------------------------------------------ + 11.4 - Post formats +------------------------------------------------------------------------------*/ + +.post-format-icon::before { + display: inline-block; + vertical-align: middle; + height: 20px; + width: 20px; + margin-top: -4px; + margin-right: 7px; + color: #dcdcde; + font: normal 20px/1 dashicons; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a.post-format-icon:hover:before { + color: #135e96; +} + +#post-formats-select { + line-height: 2; +} + +#post-formats-select .post-format-icon::before { + top: 5px; +} + +input.post-format { + margin-top: 1px; +} + +label.post-format-icon { + margin-left: 0; + padding: 2px 0; +} + +.post-format-icon.post-format-standard::before { + content: "\f109"; +} + +.post-format-icon.post-format-image::before { + content: "\f128"; +} + +.post-format-icon.post-format-gallery::before { + content: "\f161"; +} + +.post-format-icon.post-format-audio::before { + content: "\f127"; +} + +.post-format-icon.post-format-video::before { + content: "\f126"; +} + +.post-format-icon.post-format-chat::before { + content: "\f125"; +} + +.post-format-icon.post-format-status::before { + content: "\f130"; +} + +.post-format-icon.post-format-aside::before { + content: "\f123"; +} + +.post-format-icon.post-format-quote::before { + content: "\f122"; +} + +.post-format-icon.post-format-link::before { + content: "\f103"; +} + +/*------------------------------------------------------------------------------ + 12.0 - Categories +------------------------------------------------------------------------------*/ + +.category-adder { + margin-left: 120px; + padding: 4px 0; +} + +.category-adder h4 { + margin: 0 0 8px; +} + +#side-sortables .category-adder { + margin: 0; +} + +.wp-tab-panel, +.categorydiv div.tabs-panel, +.customlinkdiv div.tabs-panel, +.posttypediv div.tabs-panel, +.taxonomydiv div.tabs-panel { + min-height: 42px; + max-height: 200px; + overflow: auto; + padding: 0 0.9em; + border: solid 1px #dcdcde; + background-color: #fff; +} + +div.tabs-panel-active { + display: block; +} + +div.tabs-panel-inactive { + display: none; +} + +div.tabs-panel-active:focus { + box-shadow: inset 0 0 0 1px #4f94d4, inset 0 0 2px 1px rgba(79, 148, 212, 0.8); + outline: 0 none; +} + +#front-page-warning, +#front-static-pages ul, +ul.export-filters, +.inline-editor ul.cat-checklist ul, +.categorydiv ul.categorychecklist ul, +.customlinkdiv ul.categorychecklist ul, +.posttypediv ul.categorychecklist ul, +.taxonomydiv ul.categorychecklist ul { + margin-left: 18px; +} + +ul.categorychecklist li { + margin: 0; + padding: 0; + line-height: 1.69230769; + word-wrap: break-word; +} + +.categorydiv .tabs-panel, +.customlinkdiv .tabs-panel, +.posttypediv .tabs-panel, +.taxonomydiv .tabs-panel { + border-width: 3px; + border-style: solid; +} + +.form-wrap label { + display: block; + padding: 2px 0; +} + +.form-field input[type="text"], +.form-field input[type="password"], +.form-field input[type="email"], +.form-field input[type="number"], +.form-field input[type="search"], +.form-field input[type="tel"], +.form-field input[type="url"], +.form-field textarea { + border-style: solid; + border-width: 1px; + width: 95%; +} + +.form-field select, +.form-field p { + max-width: 95%; +} + +p.description, +.form-wrap p { + margin: 2px 0 5px; + color: #646970; +} + +p.help, +p.description, +span.description, +.form-wrap p { + font-size: 13px; +} + +p.description code { + font-style: normal; +} + +.form-wrap .form-field { + margin: 1em 0; + padding: 0; +} + +.col-wrap h2 { + margin: 12px 0; + font-size: 1.1em; +} + +.col-wrap p.submit { + margin-top: -10px; +} + +.edit-term-notes { + margin-top: 2em; +} + +/*------------------------------------------------------------------------------ + 13.0 - Tags +------------------------------------------------------------------------------*/ + +#poststuff .tagsdiv .ajaxtag { + margin-top: 1em; +} + +#poststuff .tagsdiv .howto { + margin: 1em 0 6px; +} + +.ajaxtag .newtag { + position: relative; +} + +.tagsdiv .newtag { + width: 180px; +} + +.tagsdiv .the-tags { + display: block; + height: 60px; + margin: 0 auto; + overflow: auto; + width: 260px; +} + +#post-body-content .tagsdiv .the-tags { + margin: 0 5px; +} + +p.popular-tags { + border: none; + line-height: 2em; + padding: 8px 12px 12px; + text-align: justify; +} + +p.popular-tags a { + padding: 0 3px; +} + +.tagcloud { + width: 97%; + margin: 0 0 40px; + text-align: justify; +} + +.tagcloud h2 { + margin: 2px 0 12px; +} + +#poststuff .inside .the-tagcloud { + margin: 5px 0 10px; + padding: 8px; + border: 1px solid #dcdcde; + line-height: 1.2; + word-spacing: 3px; +} + +.the-tagcloud ul { + margin: 0; +} + +.the-tagcloud ul li { + display: inline-block; +} + +/* Back-compat styles from deprecated jQuery.suggest, see ticket #40260. */ +.ac_results { + display: none; + margin: -1px 0 0; + padding: 0; + list-style: none; + position: absolute; + z-index: 10000; + border: 1px solid #4f94d4; + background-color: #fff; +} + +.wp-customizer .ac_results { + z-index: 500000; +} + +.ac_results li { + margin: 0; + padding: 5px 10px; + white-space: nowrap; + text-align: left; +} + +.ac_results .ac_over, +.ac_over .ac_match { + background-color: #2271b1; + color: #fff; + cursor: pointer; +} + +.ac_match { + text-decoration: underline; +} + +#addtag .spinner { + float: none; + vertical-align: top; +} + +#edittag { + max-width: 800px; +} + +.edit-tag-actions { + margin-top: 20px; +} + +/* Comments */ + +.comment-php .wp-editor-area { + height: 200px; +} + +.comment-ays th, +.comment-ays td { + padding: 10px 15px; +} + +.comment-ays .comment-content ul { + list-style: initial; + margin-left: 2em; +} + +.comment-ays .comment-content a[href]:after { + content: "(" attr( href ) ")"; + display: inline-block; + padding: 0 4px; + color: #646970; + font-size: 13px; + word-break: break-all; +} + +.comment-ays .comment-content p.edit-comment { + margin-top: 10px; +} + +.comment-ays .comment-content p.edit-comment a[href]:after { + content: ""; + padding: 0; +} + +.comment-ays-submit .button-cancel { + margin-left: 1em; +} + +.trash-undo-inside, +.spam-undo-inside { + margin: 1px 8px 1px 0; + line-height: 1.23076923; +} + +.spam-undo-inside .avatar, +.trash-undo-inside .avatar { + height: 20px; + width: 20px; + margin-right: 8px; + vertical-align: middle; +} + +.stuffbox .editcomment { + clear: none; + margin-top: 0; +} + +#namediv.stuffbox .editcomment input { + width: 100%; +} + +#namediv.stuffbox .editcomment.form-table td { + padding: 10px; +} + +#comment-status-radio p { + margin: 3px 0 5px; +} + +#comment-status-radio input { + margin: 2px 3px 5px 0; + vertical-align: middle; +} + +#comment-status-radio label { + padding: 5px 0; +} + +/* links tables */ +table.links-table { + width: 100%; + border-spacing: 0; +} + +.links-table th { + font-weight: 400; + text-align: left; + vertical-align: top; + min-width: 80px; + width: 20%; + word-wrap: break-word; +} + +.links-table th, +.links-table td { + padding: 5px 0; +} + +.links-table td label { + margin-right: 8px; +} + +.links-table td input[type="text"], +.links-table td textarea { + width: 100%; +} + +.links-table #link_rel { + max-width: 280px; +} + +/* DFW 2 +-------------------------------------------------------------- */ + +#qt_content_dfw { + display: none; +} + +.wp-editor-expand #qt_content_dfw { + display: inline-block; +} + +.focus-on .wrap > h1, +.focus-on .page-title-action, +.focus-on #wpfooter, +.focus-on .postbox-container > *, +.focus-on div.updated, +.focus-on div.error, +.focus-on div.notice, +.focus-on .update-nag, +.focus-on #wp-toolbar, +.focus-on #screen-meta-links, +.focus-on #screen-meta { + opacity: 0; + transition-duration: 0.6s; + transition-property: opacity; + transition-timing-function: ease-in-out; +} + +.focus-on #wp-toolbar { + opacity: 0.3; +} + +.focus-off .wrap > h1, +.focus-off .page-title-action, +.focus-off #wpfooter, +.focus-off .postbox-container > *, +.focus-off div.updated, +.focus-off div.error, +.focus-off div.notice, +.focus-off .update-nag, +.focus-off #wp-toolbar, +.focus-off #screen-meta-links, +.focus-off #screen-meta { + opacity: 1; + transition-duration: 0.2s; + transition-property: opacity; + transition-timing-function: ease-in-out; +} + +.focus-off #wp-toolbar { + -webkit-transform: translate(0, 0); +} + +.focus-on #adminmenuback, +.focus-on #adminmenuwrap { + transition-duration: 0.6s; + transition-property: transform; + transition-timing-function: ease-in-out; +} + +.focus-on #adminmenuback, +.focus-on #adminmenuwrap { + transform: translateX( -100% ); +} + +.focus-off #adminmenuback, +.focus-off #adminmenuwrap { + transform: translateX( 0 ); + transition-duration: 0.2s; + transition-property: transform; + transition-timing-function: ease-in-out; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + #content-resize-handle, + #post-body .wp_themeSkin .mceStatusbar a.mceResize { + background: transparent url(../images/resize-2x.gif) no-repeat scroll right bottom; + background-size: 11px 11px; + } + + /*rtl:ignore*/ + .rtl #content-resize-handle, + .rtl #post-body .wp_themeSkin .mceStatusbar a.mceResize { + background-image: url(../images/resize-rtl-2x.gif); + background-position: left bottom; + } +} + +/* + * The edit attachment screen auto-switches to one column layout when the + * viewport is smaller than 1200 pixels. + */ +@media only screen and (max-width: 1200px) { + .post-type-attachment #poststuff { + min-width: 0; + } + + .post-type-attachment #wpbody-content #poststuff #post-body { + margin: 0; + } + + .post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1 { + margin-right: 0; + width: 100%; + } + + .post-type-attachment #poststuff #postbox-container-1 .empty-container, + .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty { + outline: none; + height: 0; + min-height: 0; + } + + .post-type-attachment #poststuff #post-body.columns-2 #side-sortables { + min-height: 0; + width: auto; + } + + .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables { + outline: none; + min-height: 0; + margin-bottom: 0; + } + + /* hide the radio buttons for column prefs */ + .post-type-attachment .screen-layout, + .post-type-attachment .columns-prefs { + display: none; + } +} + +/* one column on the post write/edit screen */ +@media only screen and (max-width: 850px) { + #poststuff { + min-width: 0; + } + + #wpbody-content #poststuff #post-body { + margin: 0; + } + + #wpbody-content #post-body.columns-2 #postbox-container-1 { + margin-right: 0; + width: 100%; + } + + #poststuff #postbox-container-1 .empty-container, + #poststuff #postbox-container-1 #side-sortables:empty { + height: 0; + min-height: 0; + } + + #poststuff #post-body.columns-2 #side-sortables { + min-height: 0; + width: auto; + } + + /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */ + .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container, + .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty, + .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables, + .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables { + height: auto; + min-height: 60px; + } + + /* hide the radio buttons for column prefs */ + .screen-layout, + .columns-prefs { + display: none; + } +} + +@media screen and (max-width: 782px) { + .wp-core-ui .edit-tag-actions .button-primary { + margin-bottom: 0; + } + + #post-body-content { + min-width: 0; + } + + #titlediv #title-prompt-text { + padding: 10px; + } + + #poststuff .stuffbox .inside { + padding: 0 2px 4px 0; + } + + #poststuff h3.hndle, /* Back-compat for pre-4.4 */ + #poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */ + #poststuff h2 { + padding: 12px; + } + + #namediv.stuffbox .editcomment.form-table td { + padding: 5px 10px; + } + + .post-format-options { + padding-right: 0; + } + + .post-format-options a { + margin-right: 5px; + margin-bottom: 5px; + min-width: 52px; + } + + .post-format-options .post-format-title { + font-size: 11px; + } + + .post-format-options a div { + height: 28px; + width: 28px; + } + + .post-format-options a div:before { + font-size: 26px !important; + } + + /* Publish Metabox Options */ + #post-visibility-select { + line-height: 280%; + } + + .wp-core-ui .save-post-visibility, + .wp-core-ui .save-timestamp { + vertical-align: middle; + margin-right: 15px; + } + + .timestamp-wrap select#mm { + display: block; + width: 100%; + margin-bottom: 10px; + } + + .timestamp-wrap #jj, + .timestamp-wrap #aa, + .timestamp-wrap #hh, + .timestamp-wrap #mn { + padding: 12px 3px; + font-size: 14px; + margin-bottom: 5px; + width: auto; + text-align: center; + } + + /* Categories Metabox */ + ul.category-tabs { + margin: 30px 0 15px; + } + + ul.category-tabs li.tabs { + padding: 15px; + } + + ul.categorychecklist li { + margin-bottom: 15px; + } + + ul.categorychecklist ul { + margin-top: 15px; + } + + .category-add input[type=text], + .category-add select { + max-width: none; + margin-bottom: 15px; + } + + /* Tags Metabox */ + .tagsdiv .newtag { + width: 100%; + height: auto; + margin-bottom: 15px; + } + + .tagchecklist { + margin: 25px 10px; + } + + .tagchecklist > li { + font-size: 16px; + line-height: 1.4; + } + + /* Discussion */ + #commentstatusdiv p { + line-height: 2.8; + } + + /* TinyMCE Adjustments */ + .mceToolbar * { + white-space: normal !important; + } + + .mceToolbar tr, + .mceToolbar td { + float: left !important; + } + + .wp_themeSkin a.mceButton { + width: 30px; + height: 30px; + } + + .wp_themeSkin .mceButton .mceIcon { + margin-top: 5px; + margin-left: 5px; + } + + .wp_themeSkin .mceSplitButton { + margin-top: 1px; + } + + .wp_themeSkin .mceSplitButton td a.mceAction { + padding: 6px 3px 6px 6px; + } + + .wp_themeSkin .mceSplitButton td a.mceOpen, + .wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen { + padding-top: 6px; + padding-bottom: 6px; + background-position: 1px 6px; + } + + .wp_themeSkin table.mceListBox { + margin: 5px; + } + + div.quicktags-toolbar input { + padding: 10px 20px; + } + + button.wp-switch-editor { + font-size: 16px; + line-height: 1; + margin: 7px 0 0 7px; + padding: 8px 12px; + } + + #wp-content-media-buttons a { + font-size: 14px; + padding: 6px 10px; + } + + .wp-media-buttons span.wp-media-buttons-icon, + .wp-media-buttons span.jetpack-contact-form-icon { + width: 22px !important; + margin-left: -2px !important; + } + + .wp-media-buttons .add_media span.wp-media-buttons-icon:before, + .wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before { + font-size: 20px !important; + } + + #content_wp_fullscreen { + display: none; + } + + .misc-pub-section { + padding: 20px 10px; + } + + #delete-action, + #publishing-action { + line-height: 3.61538461; + } + + #publishing-action .spinner { + float: none; + margin-top: -2px; /* Half of the Publish button's bottom margin. */ + } + + /* Moderate Comment */ + .comment-ays th, + .comment-ays td { + padding-bottom: 0; + } + + .comment-ays td { + padding-top: 6px; + } + + /* Links */ + .links-table #link_rel { + max-width: none; + } + + .links-table th, + .links-table td { + padding: 10px 0; + } + + .edit-term-notes { + display: none; + } + + .privacy-text-box { + width: auto; + } + + .privacy-text-box-toc { + float: none; + width: auto; + height: 100%; + display: flex; + flex-direction: column; + } + + .privacy-text-section .return-to-top { + margin: 2em 0 0; + } +} diff --git a/tools/storybook/wordpress/css/edit.min.css b/tools/storybook/wordpress/css/edit.min.css new file mode 100644 index 00000000000..f9c161352c3 --- /dev/null +++ b/tools/storybook/wordpress/css/edit.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +#poststuff{padding-top:10px;min-width:763px}#poststuff #post-body{padding:0}#poststuff .postbox-container{width:100%}#poststuff #post-body.columns-2{margin-right:300px}#show-comments{overflow:hidden}#save-action .spinner,#show-comments a{float:left}#show-comments .spinner{float:none;margin-top:0}#lost-connection-notice .spinner{visibility:visible;float:left;margin:0 5px 0 0}#titlediv{position:relative}#titlediv label{cursor:text}#titlediv div.inside{margin:0}#poststuff #titlewrap{border:0;padding:0}#titlediv #title{padding:3px 8px;font-size:1.7em;line-height:100%;height:1.7em;width:100%;outline:0;margin:0 0 3px;background-color:#fff}#titlediv #title-prompt-text{color:#646970;position:absolute;font-size:1.7em;padding:10px;pointer-events:none}input#link_description,input#link_url{width:100%}#pending{background:0 none;border:0 none;padding:0;font-size:11px;margin-top:-1px}#comment-link-box,#edit-slug-box{line-height:1.84615384;min-height:25px;margin-top:5px;padding:0 10px;color:#646970}#sample-permalink{display:inline-block;max-width:100%;word-wrap:break-word}#edit-slug-box .cancel{margin-right:10px;padding:0;font-size:11px}#comment-link-box{margin:5px 0;padding:0 5px}#editable-post-name-full{display:none}#editable-post-name{font-weight:600}#editable-post-name input{font-size:13px;font-weight:400;height:24px;margin:0;width:16em}.postarea h3 label{float:left}body.post-new-php .submitbox .submitdelete{display:none}.submitbox .submit a:hover{text-decoration:underline}.submitbox .submit input{margin-bottom:8px;margin-right:4px;padding:6px}#post-status-select{margin-top:3px}body.post-type-wp_navigation .inline-edit-status,body.post-type-wp_navigation div#minor-publishing{display:none}.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables{outline:3px dashed #646970;display:flow-root;min-height:60px;margin-bottom:20px}.postbox{position:relative;min-width:255px;border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff}#trackback_url{width:99%}#normal-sortables .postbox .submit{background:transparent none;border:0 none;float:right;padding:0 12px;margin:0}.category-add input[type=text],.category-add select{width:100%;max-width:260px;vertical-align:baseline}#side-sortables .category-add input[type=text],#side-sortables .category-add select{margin:0 0 1em}#side-sortables .add-menu-item-tabs li,.wp-tab-bar li,ul.category-tabs li{display:inline;line-height:1.35}.no-js .category-tabs li.hide-if-no-js{display:none}#side-sortables .add-menu-item-tabs a,.category-tabs a,.wp-tab-bar a{text-decoration:none}#post-body ul.add-menu-item-tabs li.tabs a,#post-body ul.category-tabs li.tabs a,#side-sortables .add-menu-item-tabs .tabs a,#side-sortables .category-tabs .tabs a,.wp-tab-bar .wp-tab-active a{color:#2c3338}.category-tabs{margin:8px 0 5px}#category-adder h4{margin:0}.taxonomy-add-new{display:inline-block;margin:10px 0;font-weight:600}#side-sortables .add-menu-item-tabs,.wp-tab-bar{margin-bottom:3px}#normal-sortables .postbox #replyrow .submit{float:none;margin:0;padding:5px 7px 10px;overflow:hidden}#side-sortables .submitbox .submit .preview,#side-sortables .submitbox .submit a.preview:hover,#side-sortables .submitbox .submit input{border:0 none}ul.add-menu-item-tabs,ul.category-tabs,ul.wp-tab-bar{margin-top:12px}ul.add-menu-item-tabs li,ul.category-tabs li{border:solid 1px transparent;position:relative}.wp-tab-active,ul.add-menu-item-tabs li.tabs,ul.category-tabs li.tabs{border:1px solid #dcdcde;border-bottom-color:#fff;background-color:#fff}ul.add-menu-item-tabs li,ul.category-tabs li,ul.wp-tab-bar li{padding:3px 5px 6px}#set-post-thumbnail{display:inline-block;max-width:100%}#postimagediv .inside img{max-width:100%;height:auto;width:auto;vertical-align:top;background-image:linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:0 0,10px 10px;background-size:20px 20px}form#tags-filter{position:relative}.ui-tabs-hide,.wp-hidden-children .wp-hidden-child{display:none}#post-body .tagsdiv #newtag{margin-right:5px;width:16em}#side-sortables input#post_password{width:94%}#side-sortables .tagsdiv #newtag{width:68%}#post-status-info{width:100%;border-spacing:0;border:1px solid #c3c4c7;border-top:none;background-color:#f6f7f7;box-shadow:0 1px 1px rgba(0,0,0,.04);z-index:999}#post-status-info td{font-size:12px}.autosave-info{padding:2px 10px;text-align:right}#editorcontent #post-status-info{border:none}#content-resize-handle{background:transparent url(../images/resize.gif) no-repeat scroll right bottom;width:12px;cursor:row-resize}.rtl #content-resize-handle{background-image:url(../images/resize-rtl.gif);background-position:left bottom}.wp-editor-expand #content-resize-handle{display:none}#postdivrich #content{resize:none}#wp-word-count{padding:2px 10px}#wp-content-editor-container{position:relative}.wp-editor-expand #wp-content-editor-tools{z-index:1000;border-bottom:1px solid #c3c4c7}.wp-editor-expand #wp-content-editor-container{box-shadow:none;margin-top:-1px}.wp-editor-expand #wp-content-editor-container{border-bottom:0 none}.wp-editor-expand div.mce-statusbar{z-index:1}.wp-editor-expand #post-status-info{border-top:1px solid #c3c4c7}.wp-editor-expand div.mce-toolbar-grp{z-index:999}.mce-fullscreen #wp-content-wrap .mce-edit-area,.mce-fullscreen #wp-content-wrap .mce-menubar,.mce-fullscreen #wp-content-wrap .mce-statusbar,.mce-fullscreen #wp-content-wrap .mce-toolbar-grp{position:static!important;width:auto!important;padding:0!important}.mce-fullscreen #wp-content-wrap .mce-statusbar{visibility:visible!important}.mce-fullscreen #wp-content-wrap .mce-tinymce .mce-wp-dfw{display:none}.mce-fullscreen #wp-content-wrap .mce-wp-dfw,.post-php.mce-fullscreen #wpadminbar{display:none}#wp-content-editor-tools{background-color:#f0f0f1;padding-top:20px}#poststuff #post-body.columns-2 #side-sortables{width:280px}#timestampdiv select{vertical-align:top;font-size:12px;line-height:2.33333333}#aa,#hh,#jj,#mn{padding:6px 1px;font-size:12px;line-height:1.16666666}#hh,#jj,#mn{width:2em}#aa{width:3.4em}.curtime #timestamp{padding:2px 0 1px;display:inline!important;height:auto!important}#post-body #visibility:before,#post-body .misc-pub-comment-status:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-response-to:before,#post-body .misc-pub-revisions:before,#post-body .misc-pub-uploadedby:before,#post-body .misc-pub-uploadedto:before,.curtime #timestamp:before{color:#8c8f94}#post-body #visibility:before,#post-body .misc-pub-comment-status:before,#post-body .misc-pub-post-status:before,#post-body .misc-pub-response-to:before,#post-body .misc-pub-revisions:before,#post-body .misc-pub-uploadedby:before,#post-body .misc-pub-uploadedto:before,.curtime #timestamp:before{font:normal 20px/1 dashicons;speak:never;display:inline-block;margin-left:-1px;padding-right:3px;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#post-body .misc-pub-comment-status:before,#post-body .misc-pub-post-status:before{content:"\f173"}#post-body #visibility:before{content:"\f177"}.curtime #timestamp:before{content:"\f145";position:relative;top:-1px}#post-body .misc-pub-uploadedby:before{content:"\f110";position:relative;top:-1px}#post-body .misc-pub-uploadedto:before{content:"\f318";position:relative;top:-1px}#post-body .misc-pub-revisions:before{content:"\f321"}#post-body .misc-pub-response-to:before{content:"\f101"}#timestampdiv{padding-top:5px;line-height:1.76923076}#timestampdiv p{margin:8px 0 6px}#timestampdiv input{text-align:center}.notification-dialog{position:fixed;top:30%;max-height:70%;left:50%;width:450px;margin-left:-225px;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3);line-height:1.5;z-index:1000005;overflow-y:auto}.notification-dialog-background{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;opacity:.7;z-index:1000000}#post-lock-dialog .post-locked-message,#post-lock-dialog .post-taken-over{margin:25px}#file-editor-warning .button,#post-lock-dialog .post-locked-message a.button{margin-right:10px}#post-lock-dialog .post-locked-avatar{float:left;margin:0 20px 20px 0}#post-lock-dialog .wp-tab-first{outline:0}#post-lock-dialog .locked-saving img{float:left;margin-right:3px}#post-lock-dialog.saved .locked-saved,#post-lock-dialog.saving .locked-saving{display:inline}#excerpt{display:block;margin:12px 0 0;height:4em;width:100%}.tagchecklist{margin-left:14px;font-size:12px;overflow:auto}.tagchecklist br{display:none}.tagchecklist strong{margin-left:-8px;position:absolute}.tagchecklist>li{float:left;margin-right:25px;font-size:13px;line-height:1.8;cursor:default;max-width:100%;overflow:hidden;text-overflow:ellipsis}.tagchecklist .ntdelbutton{position:absolute;width:24px;height:24px;border:none;margin:0 0 0 -19px;padding:0;background:0 0;cursor:pointer;text-indent:0}#poststuff .stuffbox>h3,#poststuff h2,#poststuff h3.hndle{font-size:14px;padding:8px 12px;margin:0;line-height:1.4}#poststuff .stuffbox h2{padding:8px 10px}#poststuff .stuffbox>h2{border-bottom:1px solid #f0f0f1}#poststuff .inside{margin:6px 0 0}.link-add-php #poststuff .inside,.link-php #poststuff .inside{margin-top:12px}#poststuff .stuffbox .inside{margin:0}#poststuff .inside #page_template,#poststuff .inside #parent_id{max-width:100%}.post-attributes-label-wrapper{margin-bottom:.5em}.post-attributes-label{vertical-align:baseline;font-weight:600}#comment-status-radio,#post-visibility-select{line-height:1.5;margin-top:3px}#linksubmitdiv .inside,#poststuff #submitdiv .inside{margin:0;padding:0}#post-body-content,.edit-form-section{margin-bottom:20px}.wp_attachment_details .attachment-content-description{margin-top:.5385em;display:inline-block;min-height:1.6923em}.privacy-settings #wpcontent,.privacy-settings.auto-fold #wpcontent,.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-left:0}.health-check-header h1,.privacy-settings-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px;line-height:1.3}.health-check-header,.privacy-settings-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #dcdcde}.health-check-title-section,.privacy-settings-title-section{display:flex;align-items:center;justify-content:center;clear:both;padding-top:8px}.privacy-settings-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.privacy-settings-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1),.privacy-settings-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2),.privacy-settings-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus,.privacy-settings-tab:focus{color:#1d2327;outline:1px solid #787c82;box-shadow:none}.health-check-tab.active,.privacy-settings-tab.active{box-shadow:inset 0 -3px #3582c4;font-weight:600}.health-check-body,.privacy-settings-body{max-width:800px;margin:0 auto}.tools-privacy-policy-page th{min-width:230px}.hr-separator{margin-top:20px;margin-bottom:15px}.health-check-accordion,.privacy-settings-accordion{border:1px solid #c3c4c7}.health-check-accordion-heading,.privacy-settings-accordion-heading{margin:0;border-top:1px solid #c3c4c7;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child,.privacy-settings-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger,.privacy-settings-accordion-trigger{background:#fff;border:0;color:#2c3338;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 3.5em 1em 1.5em;min-height:46px;position:relative;text-align:left;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;user-select:auto}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover,.privacy-settings-accordion-trigger:active,.privacy-settings-accordion-trigger:hover{background:#f6f7f7}.health-check-accordion-trigger:focus,.privacy-settings-accordion-trigger:focus{color:#1d2327;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #2271b1;background-color:#f6f7f7}.health-check-accordion-trigger .title,.privacy-settings-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.privacy-settings-accordion-trigger .icon,.privacy-settings-view-read .icon,.site-health-view-passed .icon{border:solid #50575e;border-width:0 2px 2px 0;height:.5rem;pointer-events:none;position:absolute;right:1.5em;top:50%;transform:translateY(-70%) rotate(45deg);width:.5rem}.health-check-accordion-trigger .badge,.privacy-settings-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#2c3338;font-weight:600}.privacy-settings-accordion-trigger .badge{margin-left:.5rem}.health-check-accordion-trigger .badge.blue,.privacy-settings-accordion-trigger .badge.blue{border:1px solid #72aee6}.health-check-accordion-trigger .badge.orange,.privacy-settings-accordion-trigger .badge.orange{border:1px solid #dba617}.health-check-accordion-trigger .badge.red,.privacy-settings-accordion-trigger .badge.red{border:1px solid #e65054}.health-check-accordion-trigger .badge.green,.privacy-settings-accordion-trigger .badge.green{border:1px solid #00ba37}.health-check-accordion-trigger .badge.purple,.privacy-settings-accordion-trigger .badge.purple{border:1px solid #2271b1}.health-check-accordion-trigger .badge.gray,.privacy-settings-accordion-trigger .badge.gray{border:1px solid #c3c4c7}.health-check-accordion-trigger[aria-expanded=true] .icon,.privacy-settings-accordion-trigger[aria-expanded=true] .icon,.privacy-settings-view-passed[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(-135deg)}.health-check-accordion-panel,.privacy-settings-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden],.privacy-settings-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons,.privacy-settings-accordion-panel a .dashicons{text-decoration:none}.privacy-settings-accordion-actions{text-align:right;display:block}.privacy-settings-accordion-actions .success{display:none;color:#008a20;padding-right:1em;padding-top:6px}.privacy-settings-accordion-actions .success.visible{display:inline-block}.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-policy-tutorial,.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .privacy-text-copy,.privacy-settings-accordion-panel.hide-privacy-policy-tutorial .wp-policy-help{display:none}.privacy-settings-accordion-panel strong.privacy-policy-tutorial,.privacy-settings-accordion-panel strong.wp-policy-help{display:block;margin:0 0 1em}.privacy-text-copy span{pointer-events:none}.privacy-settings-accordion-panel .wp-suggested-text div>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep),.privacy-settings-accordion-panel .wp-suggested-text>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep),.privacy-settings-accordion-panel div>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep),.privacy-settings-accordion-panel>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.noticep){margin:0;padding:1em;border-left:2px solid #787c82}@media screen and (max-width:782px){.health-check-body,.privacy-settings-body{margin:0 12px;width:auto}.privacy-settings .notice,.site-health .notice{margin:5px 10px 15px}.privacy-settings .update-nag,.site-health .update-nag{margin-right:10px;margin-left:10px}input#create-page{margin-top:10px}.wp-core-ui button.privacy-text-copy{white-space:normal;line-height:1.8}}@media only screen and (max-width:1004px){.health-check-body,.privacy-settings-body{margin:0 22px;width:auto}}#postcustomstuff thead th{padding:5px 8px 8px;background-color:#f0f0f1}#postcustom #postcustomstuff .submit{border:0 none;float:none;padding:0 8px 8px}#side-sortables #postcustom #postcustomstuff .submit{margin:0;padding:0}#side-sortables #postcustom #postcustomstuff #the-list textarea{height:85px}#side-sortables #postcustom #postcustomstuff td.left input,#side-sortables #postcustom #postcustomstuff td.left select,#side-sortables #postcustomstuff #newmetaleft a{margin:3px 3px 0}#postcustomstuff table{margin:0;width:100%;border:1px solid #dcdcde;border-spacing:0;background-color:#f6f7f7}#postcustomstuff tr{vertical-align:top}#postcustomstuff table input,#postcustomstuff table select,#postcustomstuff table textarea{width:96%;margin:8px}#side-sortables #postcustomstuff table input,#side-sortables #postcustomstuff table select,#side-sortables #postcustomstuff table textarea{margin:3px}#postcustomstuff td.left,#postcustomstuff th.left{width:38%}#postcustomstuff .submit input{margin:0;width:auto}#postcustomstuff #newmetaleft a{display:inline-block;margin:0 8px 8px;text-decoration:none}.no-js #postcustomstuff #enternew{display:none}#post-body-content .compat-attachment-fields{margin-bottom:20px}.compat-attachment-fields th{padding-top:5px;padding-right:10px}#select-featured-image{padding:4px 0;overflow:hidden}#select-featured-image img{max-width:100%;height:auto;margin-bottom:10px}#select-featured-image a{float:left;clear:both}#select-featured-image .remove{display:none;margin-top:10px}.js #select-featured-image.has-featured-image .remove{display:inline-block}.no-js #select-featured-image .choose{display:none}.post-format-icon::before{display:inline-block;vertical-align:middle;height:20px;width:20px;margin-top:-4px;margin-right:7px;color:#dcdcde;font:normal 20px/1 dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a.post-format-icon:hover:before{color:#135e96}#post-formats-select{line-height:2}#post-formats-select .post-format-icon::before{top:5px}input.post-format{margin-top:1px}label.post-format-icon{margin-left:0;padding:2px 0}.post-format-icon.post-format-standard::before{content:"\f109"}.post-format-icon.post-format-image::before{content:"\f128"}.post-format-icon.post-format-gallery::before{content:"\f161"}.post-format-icon.post-format-audio::before{content:"\f127"}.post-format-icon.post-format-video::before{content:"\f126"}.post-format-icon.post-format-chat::before{content:"\f125"}.post-format-icon.post-format-status::before{content:"\f130"}.post-format-icon.post-format-aside::before{content:"\f123"}.post-format-icon.post-format-quote::before{content:"\f122"}.post-format-icon.post-format-link::before{content:"\f103"}.category-adder{margin-left:120px;padding:4px 0}.category-adder h4{margin:0 0 8px}#side-sortables .category-adder{margin:0}.categorydiv div.tabs-panel,.customlinkdiv div.tabs-panel,.posttypediv div.tabs-panel,.taxonomydiv div.tabs-panel,.wp-tab-panel{min-height:42px;max-height:200px;overflow:auto;padding:0 .9em;border:solid 1px #dcdcde;background-color:#fff}div.tabs-panel-active{display:block}div.tabs-panel-inactive{display:none}div.tabs-panel-active:focus{box-shadow:inset 0 0 0 1px #4f94d4,inset 0 0 2px 1px rgba(79,148,212,.8);outline:0 none}#front-page-warning,#front-static-pages ul,.categorydiv ul.categorychecklist ul,.customlinkdiv ul.categorychecklist ul,.inline-editor ul.cat-checklist ul,.posttypediv ul.categorychecklist ul,.taxonomydiv ul.categorychecklist ul,ul.export-filters{margin-left:18px}ul.categorychecklist li{margin:0;padding:0;line-height:1.69230769;word-wrap:break-word}.categorydiv .tabs-panel,.customlinkdiv .tabs-panel,.posttypediv .tabs-panel,.taxonomydiv .tabs-panel{border-width:3px;border-style:solid}.form-wrap label{display:block;padding:2px 0}.form-field input[type=email],.form-field input[type=number],.form-field input[type=password],.form-field input[type=search],.form-field input[type=tel],.form-field input[type=text],.form-field input[type=url],.form-field textarea{border-style:solid;border-width:1px;width:95%}.form-field p,.form-field select{max-width:95%}.form-wrap p,p.description{margin:2px 0 5px;color:#646970}.form-wrap p,p.description,p.help,span.description{font-size:13px}p.description code{font-style:normal}.form-wrap .form-field{margin:1em 0;padding:0}.col-wrap h2{margin:12px 0;font-size:1.1em}.col-wrap p.submit{margin-top:-10px}.edit-term-notes{margin-top:2em}#poststuff .tagsdiv .ajaxtag{margin-top:1em}#poststuff .tagsdiv .howto{margin:1em 0 6px}.ajaxtag .newtag{position:relative}.tagsdiv .newtag{width:180px}.tagsdiv .the-tags{display:block;height:60px;margin:0 auto;overflow:auto;width:260px}#post-body-content .tagsdiv .the-tags{margin:0 5px}p.popular-tags{border:none;line-height:2em;padding:8px 12px 12px;text-align:justify}p.popular-tags a{padding:0 3px}.tagcloud{width:97%;margin:0 0 40px;text-align:justify}.tagcloud h2{margin:2px 0 12px}#poststuff .inside .the-tagcloud{margin:5px 0 10px;padding:8px;border:1px solid #dcdcde;line-height:1.2;word-spacing:3px}.the-tagcloud ul{margin:0}.the-tagcloud ul li{display:inline-block}.ac_results{display:none;margin:-1px 0 0;padding:0;list-style:none;position:absolute;z-index:10000;border:1px solid #4f94d4;background-color:#fff}.wp-customizer .ac_results{z-index:500000}.ac_results li{margin:0;padding:5px 10px;white-space:nowrap;text-align:left}.ac_over .ac_match,.ac_results .ac_over{background-color:#2271b1;color:#fff;cursor:pointer}.ac_match{text-decoration:underline}#addtag .spinner{float:none;vertical-align:top}#edittag{max-width:800px}.edit-tag-actions{margin-top:20px}.comment-php .wp-editor-area{height:200px}.comment-ays td,.comment-ays th{padding:10px 15px}.comment-ays .comment-content ul{list-style:initial;margin-left:2em}.comment-ays .comment-content a[href]:after{content:"(" attr(href) ")";display:inline-block;padding:0 4px;color:#646970;font-size:13px;word-break:break-all}.comment-ays .comment-content p.edit-comment{margin-top:10px}.comment-ays .comment-content p.edit-comment a[href]:after{content:"";padding:0}.comment-ays-submit .button-cancel{margin-left:1em}.spam-undo-inside,.trash-undo-inside{margin:1px 8px 1px 0;line-height:1.23076923}.spam-undo-inside .avatar,.trash-undo-inside .avatar{height:20px;width:20px;margin-right:8px;vertical-align:middle}.stuffbox .editcomment{clear:none;margin-top:0}#namediv.stuffbox .editcomment input{width:100%}#namediv.stuffbox .editcomment.form-table td{padding:10px}#comment-status-radio p{margin:3px 0 5px}#comment-status-radio input{margin:2px 3px 5px 0;vertical-align:middle}#comment-status-radio label{padding:5px 0}table.links-table{width:100%;border-spacing:0}.links-table th{font-weight:400;text-align:left;vertical-align:top;min-width:80px;width:20%;word-wrap:break-word}.links-table td,.links-table th{padding:5px 0}.links-table td label{margin-right:8px}.links-table td input[type=text],.links-table td textarea{width:100%}.links-table #link_rel{max-width:280px}#qt_content_dfw{display:none}.wp-editor-expand #qt_content_dfw{display:inline-block}.focus-on #screen-meta,.focus-on #screen-meta-links,.focus-on #wp-toolbar,.focus-on #wpfooter,.focus-on .page-title-action,.focus-on .postbox-container>*,.focus-on .update-nag,.focus-on .wrap>h1,.focus-on div.error,.focus-on div.notice,.focus-on div.updated{opacity:0;transition-duration:.6s;transition-property:opacity;transition-timing-function:ease-in-out}.focus-on #wp-toolbar{opacity:.3}.focus-off #screen-meta,.focus-off #screen-meta-links,.focus-off #wp-toolbar,.focus-off #wpfooter,.focus-off .page-title-action,.focus-off .postbox-container>*,.focus-off .update-nag,.focus-off .wrap>h1,.focus-off div.error,.focus-off div.notice,.focus-off div.updated{opacity:1;transition-duration:.2s;transition-property:opacity;transition-timing-function:ease-in-out}.focus-off #wp-toolbar{-webkit-transform:translate(0,0)}.focus-on #adminmenuback,.focus-on #adminmenuwrap{transition-duration:.6s;transition-property:transform;transition-timing-function:ease-in-out}.focus-on #adminmenuback,.focus-on #adminmenuwrap{transform:translateX(-100%)}.focus-off #adminmenuback,.focus-off #adminmenuwrap{transform:translateX(0);transition-duration:.2s;transition-property:transform;transition-timing-function:ease-in-out}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){#content-resize-handle,#post-body .wp_themeSkin .mceStatusbar a.mceResize{background:transparent url(../images/resize-2x.gif) no-repeat scroll right bottom;background-size:11px 11px}.rtl #content-resize-handle,.rtl #post-body .wp_themeSkin .mceStatusbar a.mceResize{background-image:url(../images/resize-rtl-2x.gif);background-position:left bottom}}@media only screen and (max-width:1200px){.post-type-attachment #poststuff{min-width:0}.post-type-attachment #wpbody-content #poststuff #post-body{margin:0}.post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1{margin-right:0;width:100%}.post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty,.post-type-attachment #poststuff #postbox-container-1 .empty-container{outline:0;height:0;min-height:0}.post-type-attachment #poststuff #post-body.columns-2 #side-sortables{min-height:0;width:auto}.is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables{outline:0;min-height:0;margin-bottom:0}.post-type-attachment .columns-prefs,.post-type-attachment .screen-layout{display:none}}@media only screen and (max-width:850px){#poststuff{min-width:0}#wpbody-content #poststuff #post-body{margin:0}#wpbody-content #post-body.columns-2 #postbox-container-1{margin-right:0;width:100%}#poststuff #postbox-container-1 #side-sortables:empty,#poststuff #postbox-container-1 .empty-container{height:0;min-height:0}#poststuff #post-body.columns-2 #side-sortables{min-height:0;width:auto}.is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,.is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables,.is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,.is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container{height:auto;min-height:60px}.columns-prefs,.screen-layout{display:none}}@media screen and (max-width:782px){.wp-core-ui .edit-tag-actions .button-primary{margin-bottom:0}#post-body-content{min-width:0}#titlediv #title-prompt-text{padding:10px}#poststuff .stuffbox .inside{padding:0 2px 4px 0}#poststuff .stuffbox>h3,#poststuff h2,#poststuff h3.hndle{padding:12px}#namediv.stuffbox .editcomment.form-table td{padding:5px 10px}.post-format-options{padding-right:0}.post-format-options a{margin-right:5px;margin-bottom:5px;min-width:52px}.post-format-options .post-format-title{font-size:11px}.post-format-options a div{height:28px;width:28px}.post-format-options a div:before{font-size:26px!important}#post-visibility-select{line-height:280%}.wp-core-ui .save-post-visibility,.wp-core-ui .save-timestamp{vertical-align:middle;margin-right:15px}.timestamp-wrap select#mm{display:block;width:100%;margin-bottom:10px}.timestamp-wrap #aa,.timestamp-wrap #hh,.timestamp-wrap #jj,.timestamp-wrap #mn{padding:12px 3px;font-size:14px;margin-bottom:5px;width:auto;text-align:center}ul.category-tabs{margin:30px 0 15px}ul.category-tabs li.tabs{padding:15px}ul.categorychecklist li{margin-bottom:15px}ul.categorychecklist ul{margin-top:15px}.category-add input[type=text],.category-add select{max-width:none;margin-bottom:15px}.tagsdiv .newtag{width:100%;height:auto;margin-bottom:15px}.tagchecklist{margin:25px 10px}.tagchecklist>li{font-size:16px;line-height:1.4}#commentstatusdiv p{line-height:2.8}.mceToolbar *{white-space:normal!important}.mceToolbar td,.mceToolbar tr{float:left!important}.wp_themeSkin a.mceButton{width:30px;height:30px}.wp_themeSkin .mceButton .mceIcon{margin-top:5px;margin-left:5px}.wp_themeSkin .mceSplitButton{margin-top:1px}.wp_themeSkin .mceSplitButton td a.mceAction{padding:6px 3px 6px 6px}.wp_themeSkin .mceSplitButton td a.mceOpen,.wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen{padding-top:6px;padding-bottom:6px;background-position:1px 6px}.wp_themeSkin table.mceListBox{margin:5px}div.quicktags-toolbar input{padding:10px 20px}button.wp-switch-editor{font-size:16px;line-height:1;margin:7px 0 0 7px;padding:8px 12px}#wp-content-media-buttons a{font-size:14px;padding:6px 10px}.wp-media-buttons span.jetpack-contact-form-icon,.wp-media-buttons span.wp-media-buttons-icon{width:22px!important;margin-left:-2px!important}.wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before,.wp-media-buttons .add_media span.wp-media-buttons-icon:before{font-size:20px!important}#content_wp_fullscreen{display:none}.misc-pub-section{padding:20px 10px}#delete-action,#publishing-action{line-height:3.61538461}#publishing-action .spinner{float:none;margin-top:-2px}.comment-ays td,.comment-ays th{padding-bottom:0}.comment-ays td{padding-top:6px}.links-table #link_rel{max-width:none}.links-table td,.links-table th{padding:10px 0}.edit-term-notes{display:none}.privacy-text-box{width:auto}.privacy-text-box-toc{float:none;width:auto;height:100%;display:flex;flex-direction:column}.privacy-text-section .return-to-top{margin:2em 0 0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/farbtastic-rtl.css b/tools/storybook/wordpress/css/farbtastic-rtl.css new file mode 100644 index 00000000000..e7c1c829b9d --- /dev/null +++ b/tools/storybook/wordpress/css/farbtastic-rtl.css @@ -0,0 +1,42 @@ +/*! This file is auto-generated */ + +.farbtastic { + position: relative; +} + +.farbtastic * { + position: absolute; + cursor: crosshair; +} + +.farbtastic, +.farbtastic .wheel { + width: 195px; + height: 195px; +} + +.farbtastic .color, +.farbtastic .overlay { + top: 47px; + right: 47px; + width: 101px; + height: 101px; +} + +.farbtastic .wheel { + background: url(../images/wheel.png) no-repeat; + width: 195px; + height: 195px; +} + +.farbtastic .overlay { + background: url(../images/mask.png) no-repeat; +} + +.farbtastic .marker { + width: 17px; + height: 17px; + margin: -8px -8px 0 0; + overflow: hidden; + background: url(../images/marker.png) no-repeat; +} diff --git a/tools/storybook/wordpress/css/farbtastic-rtl.min.css b/tools/storybook/wordpress/css/farbtastic-rtl.min.css new file mode 100644 index 00000000000..26cc0c401d8 --- /dev/null +++ b/tools/storybook/wordpress/css/farbtastic-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.farbtastic{position:relative}.farbtastic *{position:absolute;cursor:crosshair}.farbtastic,.farbtastic .wheel{width:195px;height:195px}.farbtastic .color,.farbtastic .overlay{top:47px;right:47px;width:101px;height:101px}.farbtastic .wheel{background:url(../images/wheel.png) no-repeat;width:195px;height:195px}.farbtastic .overlay{background:url(../images/mask.png) no-repeat}.farbtastic .marker{width:17px;height:17px;margin:-8px -8px 0 0;overflow:hidden;background:url(../images/marker.png) no-repeat} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/farbtastic.css b/tools/storybook/wordpress/css/farbtastic.css new file mode 100644 index 00000000000..2bb73bfc7ce --- /dev/null +++ b/tools/storybook/wordpress/css/farbtastic.css @@ -0,0 +1,41 @@ + +.farbtastic { + position: relative; +} + +.farbtastic * { + position: absolute; + cursor: crosshair; +} + +.farbtastic, +.farbtastic .wheel { + width: 195px; + height: 195px; +} + +.farbtastic .color, +.farbtastic .overlay { + top: 47px; + left: 47px; + width: 101px; + height: 101px; +} + +.farbtastic .wheel { + background: url(../images/wheel.png) no-repeat; + width: 195px; + height: 195px; +} + +.farbtastic .overlay { + background: url(../images/mask.png) no-repeat; +} + +.farbtastic .marker { + width: 17px; + height: 17px; + margin: -8px 0 0 -8px; + overflow: hidden; + background: url(../images/marker.png) no-repeat; +} diff --git a/tools/storybook/wordpress/css/farbtastic.min.css b/tools/storybook/wordpress/css/farbtastic.min.css new file mode 100644 index 00000000000..e2768088a8f --- /dev/null +++ b/tools/storybook/wordpress/css/farbtastic.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.farbtastic{position:relative}.farbtastic *{position:absolute;cursor:crosshair}.farbtastic,.farbtastic .wheel{width:195px;height:195px}.farbtastic .color,.farbtastic .overlay{top:47px;left:47px;width:101px;height:101px}.farbtastic .wheel{background:url(../images/wheel.png) no-repeat;width:195px;height:195px}.farbtastic .overlay{background:url(../images/mask.png) no-repeat}.farbtastic .marker{width:17px;height:17px;margin:-8px 0 0 -8px;overflow:hidden;background:url(../images/marker.png) no-repeat} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/forms-rtl.css b/tools/storybook/wordpress/css/forms-rtl.css new file mode 100644 index 00000000000..f665f2fba9f --- /dev/null +++ b/tools/storybook/wordpress/css/forms-rtl.css @@ -0,0 +1,1766 @@ +/*! This file is auto-generated */ +/* Include margin and padding in the width calculation of input and textarea. */ +input, +select, +textarea, +button { + box-sizing: border-box; + font-family: inherit; + font-size: inherit; + font-weight: inherit; +} + +textarea, +input { + font-size: 14px; +} + +textarea { + overflow: auto; + padding: 2px 6px; + /* inherits font size 14px */ + line-height: 1.42857143; /* 20px */ + resize: vertical; +} + +label { + cursor: pointer; +} + +input, +select { + margin: 0 1px; +} + +textarea.code { + padding: 4px 6px 1px; +} + +input[type="text"], +input[type="password"], +input[type="color"], +input[type="date"], +input[type="datetime"], +input[type="datetime-local"], +input[type="email"], +input[type="month"], +input[type="number"], +input[type="search"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"], +select, +textarea { + box-shadow: 0 0 0 transparent; + border-radius: 4px; + border: 1px solid #8c8f94; + background-color: #fff; + color: #2c3338; +} + +input[type="text"], +input[type="password"], +input[type="date"], +input[type="datetime"], +input[type="datetime-local"], +input[type="email"], +input[type="month"], +input[type="number"], +input[type="search"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"] { + padding: 0 8px; + /* inherits font size 14px */ + line-height: 2; /* 28px */ + /* Only necessary for IE11 */ + min-height: 30px; +} + +::-webkit-datetime-edit { + /* inherits font size 14px */ + line-height: 1.85714286; /* 26px */ +} + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="color"]:focus, +input[type="date"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="email"]:focus, +input[type="month"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="time"]:focus, +input[type="url"]:focus, +input[type="week"]:focus, +input[type="checkbox"]:focus, +input[type="radio"]:focus, +select:focus, +textarea:focus { + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +/* rtl:ignore */ +input[type="email"], +input[type="url"] { + direction: ltr; +} + +input[type="checkbox"], +input[type="radio"] { + border: 1px solid #8c8f94; + border-radius: 4px; + background: #fff; + color: #50575e; + clear: none; + cursor: pointer; + display: inline-block; + line-height: 0; + height: 1rem; + margin: -0.25rem 0 0 0.25rem; + outline: 0; + padding: 0 !important; + text-align: center; + vertical-align: middle; + width: 1rem; + min-width: 1rem; + -webkit-appearance: none; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + transition: .05s border-color ease-in-out; +} + +input[type="radio"]:checked + label:before { + color: #8c8f94; +} + +.wp-core-ui input[type="reset"]:hover, +.wp-core-ui input[type="reset"]:active { + color: #135e96; +} + +td > input[type="checkbox"], +.wp-admin p input[type="checkbox"], +.wp-admin p input[type="radio"] { + margin-top: 0; +} + +.wp-admin p label input[type="checkbox"] { + margin-top: -4px; +} + +.wp-admin p label input[type="radio"] { + margin-top: -2px; +} + +input[type="radio"] { + border-radius: 50%; + margin-left: 0.25rem; + /* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */ + line-height: 0.71428571; +} + +input[type="checkbox"]:checked::before, +input[type="radio"]:checked::before { + float: right; + display: inline-block; + vertical-align: middle; + width: 1rem; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +input[type="checkbox"]:checked::before { + /* Use the "Yes" SVG Dashicon */ + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E"); + margin: -0.1875rem -0.25rem 0 0; + height: 1.3125rem; + width: 1.3125rem; +} + +input[type="radio"]:checked::before { + content: ""; + border-radius: 50%; + width: 0.5rem; /* 8px */ + height: 0.5rem; /* 8px */ + margin: 0.1875rem; /* 3px */ + background-color: #3582c4; + /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */ + line-height: 1.14285714; +} + +@-moz-document url-prefix() { + input[type="checkbox"], + input[type="radio"], + .form-table input.tog { + margin-bottom: -1px; + } +} + +/* Search */ +input[type="search"] { + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-decoration { + display: none; +} + +.wp-admin input[type="file"] { + padding: 3px 0; + cursor: pointer; +} + +input.readonly, +input[readonly], +textarea.readonly, +textarea[readonly] { + background-color: #f0f0f1; +} + +::-webkit-input-placeholder { + color: #646970; +} + +::-moz-placeholder { + color: #646970; + opacity: 1; +} + +:-ms-input-placeholder { + color: #646970; +} + +.form-invalid .form-required, +.form-invalid .form-required:focus, +.form-invalid.form-required input, +.form-invalid.form-required input:focus, +.form-invalid.form-required select, +.form-invalid.form-required select:focus { + border-color: #d63638 !important; + box-shadow: 0 0 2px rgba(214, 54, 56, 0.8); +} + +.form-table .form-required.form-invalid td:after { + content: "\f534"; + font: normal 20px/1 dashicons; + color: #d63638; + margin-right: -25px; + vertical-align: middle; +} + +/* Adjust error indicator for password layout */ +.form-table .form-required.user-pass1-wrap.form-invalid td:after { + content: ""; +} + +.form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after { + content: "\f534"; + font: normal 20px/1 dashicons; + color: #d63638; + margin: 0 -29px 0 6px; + vertical-align: middle; +} + +.form-input-tip { + color: #646970; +} + +input:disabled, +input.disabled, +select:disabled, +select.disabled, +textarea:disabled, +textarea.disabled { + background: rgba(255, 255, 255, 0.5); + border-color: rgba(220, 220, 222, 0.75); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + color: rgba(44, 51, 56, 0.5); +} + +input[type="file"]:disabled, +input[type="file"].disabled, +input[type="range"]:disabled, +input[type="range"].disabled { + background: none; + box-shadow: none; + cursor: default; +} + +input[type="checkbox"]:disabled, +input[type="checkbox"].disabled, +input[type="radio"]:disabled, +input[type="radio"].disabled, +input[type="checkbox"]:disabled:checked:before, +input[type="checkbox"].disabled:checked:before, +input[type="radio"]:disabled:checked:before, +input[type="radio"].disabled:checked:before { + opacity: 0.7; +} + +/*------------------------------------------------------------------------------ + 2.0 - Forms +------------------------------------------------------------------------------*/ + +/* Select styles are based on the default button in buttons.css */ +.wp-core-ui select { + font-size: 14px; + line-height: 2; /* 28px */ + color: #2c3338; + border-color: #8c8f94; + box-shadow: none; + border-radius: 3px; + padding: 0 8px 0 24px; + min-height: 30px; + max-width: 25rem; + -webkit-appearance: none; + /* The SVG is arrow-down-alt2 from Dashicons. */ + background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat left 5px top 55%; + background-size: 16px 16px; + cursor: pointer; + vertical-align: middle; +} + +.wp-core-ui select:hover { + color: #2271b1; +} + +.wp-core-ui select:focus { + border-color: #2271b1; + color: #0a4b78; + box-shadow: 0 0 0 1px #2271b1; +} + +.wp-core-ui select:active { + border-color: #8c8f94; + box-shadow: none; +} + +.wp-core-ui select.disabled, +.wp-core-ui select:disabled { + color: #a7aaad; + border-color: #dcdcde; + background-color: #f6f7f7; + /* The SVG is arrow-down-alt2 from Dashicons. */ + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E'); + box-shadow: none; + text-shadow: 0 1px 0 #fff; + cursor: default; + transform: none; +} + +/* Reset Firefox inner outline that appears on :focus. */ +/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */ +.wp-core-ui select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #0a4b78; +} + +/* Remove background focus style from IE11 while keeping focus style available on option elements. */ +.wp-core-ui select::-ms-value { + background: transparent; + color: #50575e; +} + +.wp-core-ui select:hover::-ms-value { + color: #2271b1; +} + +.wp-core-ui select:focus::-ms-value { + color: #0a4b78; +} + +.wp-core-ui select.disabled::-ms-value, +.wp-core-ui select:disabled::-ms-value { + color: #a7aaad; +} + +/* Hide the native down arrow for select element on IE. */ +.wp-core-ui select::-ms-expand { + display: none; +} + +.wp-admin .button-cancel { + display: inline-block; + min-height: 28px; + padding: 0 5px; + line-height: 2; +} + +.meta-box-sortables select { + max-width: 100%; +} + +.meta-box-sortables input { + vertical-align: middle; +} + +.misc-pub-post-status select { + margin-top: 0; +} + +.wp-core-ui select[multiple] { + height: auto; + padding-left: 8px; + background: #fff; +} + +.submit { + padding: 1.5em 0; + margin: 5px 0; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; + border: none; +} + +form p.submit a.cancel:hover { + text-decoration: none; +} + +p.submit { + text-align: right; + max-width: 100%; + margin-top: 20px; + padding-top: 10px; +} + +.textright p.submit { + border: none; + text-align: left; +} + +table.form-table + p.submit, +table.form-table + input + p.submit, +table.form-table + input + input + p.submit { + border-top: none; + padding-top: 0; +} + +#minor-publishing-actions input, +#major-publishing-actions input, +#minor-publishing-actions .preview { + text-align: center; +} + +textarea.all-options, +input.all-options { + width: 250px; +} + +input.large-text, +textarea.large-text { + width: 99%; +} + +.regular-text { + width: 25em; +} + +input.small-text { + width: 50px; + padding: 0 6px; +} + +label input.small-text { + margin-top: -4px; +} + +input[type="number"].small-text { + width: 65px; + padding-left: 0; +} + +input.tiny-text { + width: 35px; +} + +input[type="number"].tiny-text { + width: 45px; + padding-left: 0; +} + +#doaction, +#doaction2, +#post-query-submit { + margin: 0 0 0 8px; +} + +/* @since 5.7.0 secondary bulk action controls require JS. */ +.no-js label[for="bulk-action-selector-bottom"], +.no-js select#bulk-action-selector-bottom, +.no-js input#doaction2, +.no-js label[for="new_role2"], +.no-js select#new_role2, +.no-js input#changeit2 { + display: none; +} + +.tablenav .actions select { + float: right; + margin-left: 6px; + max-width: 12.5rem; +} + +#timezone_string option { + margin-right: 1em; +} + +.wp-hide-pw > .dashicons, +.wp-cancel-pw > .dashicons { + position: relative; + top: 3px; + width: 1.25rem; + height: 1.25rem; + top: 0.25rem; + font-size: 20px; +} + +.wp-cancel-pw .dashicons-no { + display: none; +} + +label, +#your-profile label + a { + vertical-align: middle; +} + +fieldset label, +#your-profile label + a { + vertical-align: middle; +} + +.options-media-php [for*="_size_"] { + min-width: 10em; + vertical-align: baseline; +} + +.options-media-php .small-text[name*="_size_"] { + margin: 0 0 1em; +} + +.wp-generate-pw { + margin-top: 1em; +} + +.wp-pwd { + margin-top: 1em; +} + +#misc-publishing-actions label { + vertical-align: baseline; +} + +#pass-strength-result { + background-color: #f0f0f1; + border: 1px solid #dcdcde; + color: #1d2327; + margin: -1px 1px 5px; + padding: 3px 5px; + text-align: center; + width: 25em; + box-sizing: border-box; + opacity: 0; +} + +#pass-strength-result.short { + background-color: #ffabaf; + border-color: #e65054; + opacity: 1; +} + +#pass-strength-result.bad { + background-color: #facfd2; + border-color: #f86368; + opacity: 1; +} + +#pass-strength-result.good { + background-color: #f5e6ab; + border-color: #f0c33c; + opacity: 1; +} + +#pass-strength-result.strong { + background-color: #b8e6bf; + border-color: #68de7c; + opacity: 1; +} + +.password-input-wrapper input { + font-family: Consolas, Monaco, monospace; +} + +#pass1.short, #pass1-text.short { + border-color: #e65054; +} + +#pass1.bad, #pass1-text.bad { + border-color: #f86368; +} + +#pass1.good, #pass1-text.good { + border-color: #f0c33c; +} + +#pass1.strong, #pass1-text.strong { + border-color: #68de7c; +} + +.pw-weak { + display: none; +} + +.indicator-hint { + padding-top: 8px; +} + +.wp-pwd [type="text"], +.wp-pwd [type="password"] { + margin-bottom: 0; + /* Same height as the buttons */ + min-height: 30px; +} + +/* Hide the Edge "reveal password" native button */ +.wp-pwd input::-ms-reveal { + display: none; +} + +#pass1-text, +.show-password #pass1 { + display: none; +} + +#pass1-text::-ms-clear { + display: none; +} + +.show-password #pass1-text { + display: inline-block; +} + +p.search-box { + float: left; + margin: 0; +} + +.network-admin.themes-php p.search-box { + clear: right; +} + +.search-box input[name="s"], +.tablenav .search-plugins input[name="s"], +.tagsdiv .newtag { + float: right; + margin: 0 0 0 4px; +} + +.js.plugins-php .search-box .wp-filter-search { + margin: 0; + width: 280px; +} + +input[type="text"].ui-autocomplete-loading, +input[type="email"].ui-autocomplete-loading { + background-image: url(../images/loading.gif); + background-repeat: no-repeat; + background-position: left center; + visibility: visible; +} + +input.ui-autocomplete-input.open { + border-bottom-color: transparent; +} + +ul#add-to-blog-users { + margin: 0 14px 0 0; +} + +.ui-autocomplete { + padding: 0; + margin: 0; + list-style: none; + position: absolute; + z-index: 10000; + border: 1px solid #4f94d4; + box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8); + background-color: #fff; +} + +.ui-autocomplete li { + margin-bottom: 0; + padding: 4px 10px; + white-space: nowrap; + text-align: right; + cursor: pointer; +} + +/* Colors for the wplink toolbar autocomplete. */ +.ui-autocomplete .ui-state-focus { + background-color: #dcdcde; +} + +/* Colors for the tags autocomplete. */ +.wp-tags-autocomplete .ui-state-focus, +.wp-tags-autocomplete [aria-selected="true"] { + background-color: #2271b1; + color: #fff; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +/*------------------------------------------------------------------------------ + 15.0 - Comments Screen +------------------------------------------------------------------------------*/ + +.form-table { + border-collapse: collapse; + margin-top: 0.5em; + width: 100%; + clear: both; +} + +.form-table, +.form-table td, +.form-table th, +.form-table td p { + font-size: 14px; +} + +.form-table td { + margin-bottom: 9px; + padding: 15px 10px; + line-height: 1.3; + vertical-align: middle; +} + +.form-table th, +.form-wrap label { + color: #1d2327; + font-weight: 400; + text-shadow: none; + vertical-align: baseline; +} + +.form-table th { + vertical-align: top; + text-align: right; + padding: 20px 0 20px 10px; + width: 200px; + line-height: 1.3; + font-weight: 600; +} + +.form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */ +.form-table .td-full { + width: auto; + padding: 20px 0 20px 10px; + font-weight: 400; +} + +.form-table td p { + margin-top: 4px; + margin-bottom: 0; +} + +.form-table .date-time-doc { + margin-top: 1em; +} + +.form-table p.timezone-info { + margin: 1em 0; +} + +.form-table td fieldset label { + margin: 0.35em 0 0.5em !important; + display: inline-block; +} + +.form-table td fieldset p label { + margin-top: 0 !important; +} + +.form-table td fieldset label, +.form-table td fieldset p, +.form-table td fieldset li { + line-height: 1.4; +} + +.form-table input.tog, +.form-table input[type="radio"] { + margin-top: -4px; + margin-left: 4px; + float: none; +} + +.form-table .pre { + padding: 8px; + margin: 0; +} + +table.form-table td .updated { + font-size: 13px; +} + +table.form-table td .updated p { + font-size: 13px; + margin: 0.3em 0; +} + +/*------------------------------------------------------------------------------ + 18.0 - Users +------------------------------------------------------------------------------*/ + +#profile-page .form-table textarea { + width: 500px; + margin-bottom: 6px; +} + +#profile-page .form-table #rich_editing { + margin-left: 5px +} + +#your-profile legend { + font-size: 22px; +} + +#display_name { + width: 15em; +} + +#adduser .form-field input, +#createuser .form-field input { + width: 25em; +} + +.color-option { + display: inline-block; + width: 24%; + padding: 5px 15px 15px; + box-sizing: border-box; + margin-bottom: 3px; +} + +.color-option:hover, +.color-option.selected { + background: #dcdcde; +} + +.color-palette { + width: 100%; + border-spacing: 0; + border-collapse: collapse; +} +.color-palette td { + height: 20px; + padding: 0; + border: none; +} + +.color-option { + cursor: pointer; +} + +.create-application-password .form-field { + max-width: 25em; +} + +.create-application-password label { + font-weight: 600; +} + +.create-application-password p.submit { + margin-bottom: 0; + padding-bottom: 0; + display: block; +} + +#application-passwords-section .notice { + margin-top: 20px; + margin-bottom: 0; +} + +.application-password-display input.code { + width: 19em; +} + +.auth-app-card.card { + max-width: 768px; +} + +.authorize-application-php .form-wrap p { + display: block; +} + +/*------------------------------------------------------------------------------ + 19.0 - Tools +------------------------------------------------------------------------------*/ + +.tool-box .title { + margin: 8px 0; + font-size: 18px; + font-weight: 400; + line-height: 24px; +} + +.label-responsive { + vertical-align: middle; +} + +#export-filters p { + margin: 0 0 1em; +} + +#export-filters p.submit { + margin: 7px 0 5px; +} + +/* Card styles */ + +.card { + position: relative; + margin-top: 20px; + padding: 0.7em 2em 1em; + min-width: 255px; + max-width: 520px; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; + box-sizing: border-box; +} + +/* Press this styles */ + +.pressthis h4 { + margin: 2em 0 1em; +} + +.pressthis textarea { + width: 100%; + font-size: 1em; +} + +#pressthis-code-wrap { + overflow: auto; +} + +.pressthis-bookmarklet-wrapper { + margin: 20px 0 8px; + vertical-align: top; + position: relative; + z-index: 1; +} + +.pressthis-bookmarklet, +.pressthis-bookmarklet:hover, +.pressthis-bookmarklet:focus, +.pressthis-bookmarklet:active { + display: inline-block; + position: relative; + cursor: move; + color: #2c3338; + background: #dcdcde; + border-radius: 5px; + border: 1px solid #c3c4c7; + font-style: normal; + line-height: 16px; + font-size: 14px; + text-decoration: none; +} + +.pressthis-bookmarklet:active { + outline: none; +} + +.pressthis-bookmarklet:after { + content: ""; + width: 70%; + height: 55%; + z-index: -1; + position: absolute; + left: 10px; + bottom: 9px; + background: transparent; + transform: skew(-20deg) rotate(-6deg); + box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); +} + +.pressthis-bookmarklet:hover:after { + transform: skew(-20deg) rotate(-9deg); + box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); +} + +.pressthis-bookmarklet span { + display: inline-block; + margin: 0; + padding: 0 9px 8px 12px; +} + +.pressthis-bookmarklet span:before { + color: #787c82; + font: normal 20px/1 dashicons; + content: "\f157"; + position: relative; + display: inline-block; + top: 4px; + margin-left: 4px; +} + +.pressthis-js-toggle { + margin-right: 10px; + padding: 0; + height: auto; + vertical-align: top; +} + +/* to override the button class being applied */ +.pressthis-js-toggle.button.button { + margin-right: 10px; + padding: 0; + height: auto; + vertical-align: top; +} + +.pressthis-js-toggle .dashicons { + margin: 5px 7px 6px 8px; + color: #50575e; +} + +/*------------------------------------------------------------------------------ + 20.0 - Settings +------------------------------------------------------------------------------*/ + +.timezone-info code { + white-space: nowrap; +} + +.defaultavatarpicker .avatar { + margin: 2px 0; + vertical-align: middle; +} + +.options-general-php .date-time-text { + display: inline-block; + min-width: 10em; +} + +.options-general-php input.small-text { + width: 56px; + margin: -2px 0; +} + +.options-general-php .spinner { + float: none; + margin: -3px 3px 0; +} + +.settings-php .language-install-spinner, +.options-general-php .language-install-spinner { + display: inline-block; + float: none; + margin: -3px 5px 0; + vertical-align: middle; +} + +.form-table.permalink-structure .available-structure-tags li { + float: right; + margin-left: 5px; +} + +/*------------------------------------------------------------------------------ + 21.0 - Network Admin +------------------------------------------------------------------------------*/ + +.setup-php textarea { + max-width: 100%; +} + +.form-field #site-address { + max-width: 25em; +} + +.form-field #domain { + max-width: 22em; +} + +.form-field #site-title, +.form-field #admin-email, +.form-field #path, +.form-field #blog_registered, +.form-field #blog_last_updated { + max-width: 25em; +} + +.form-field #path { + margin-bottom: 5px; +} + +#search-users, +#search-sites { + max-width: 60%; +} + +/*------------------------------------------------------------------------------ + Credentials check dialog for Install and Updates +------------------------------------------------------------------------------*/ + +.request-filesystem-credentials-dialog { + display: none; + /* The customizer uses visibility: hidden on the body for full-overlays. */ + visibility: visible; +} + +.request-filesystem-credentials-dialog .notification-dialog { + top: 10%; + max-height: 85%; +} + +.request-filesystem-credentials-dialog-content { + margin: 25px; +} + +#request-filesystem-credentials-title { + font-size: 1.3em; + margin: 1em 0; +} + +.request-filesystem-credentials-form legend { + font-size: 1em; + padding: 1.33em 0; + font-weight: 600; +} + +.request-filesystem-credentials-form input[type="text"], +.request-filesystem-credentials-form input[type="password"] { + display: block; +} + +.request-filesystem-credentials-dialog input[type="text"], +.request-filesystem-credentials-dialog input[type="password"] { + width: 100%; +} + +.request-filesystem-credentials-form .field-title { + font-weight: 600; +} + +.request-filesystem-credentials-dialog label[for="hostname"], +.request-filesystem-credentials-dialog label[for="public_key"], +.request-filesystem-credentials-dialog label[for="private_key"] { + display: block; + margin-bottom: 1em; +} + +.request-filesystem-credentials-dialog .ftp-username, +.request-filesystem-credentials-dialog .ftp-password { + float: right; + width: 48%; +} + +.request-filesystem-credentials-dialog .ftp-password { + margin-right: 4%; +} + +.request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons { + text-align: left; +} + +.request-filesystem-credentials-dialog label[for="ftp"] { + margin-left: 10px; +} + +.request-filesystem-credentials-dialog #auth-keys-desc { + margin-bottom: 0; +} + +#request-filesystem-credentials-dialog .button:not(:last-child) { + margin-left: 10px; +} + +#request-filesystem-credentials-form .cancel-button { + display: none; +} + +#request-filesystem-credentials-dialog .cancel-button { + display: inline; +} + +.request-filesystem-credentials-dialog .ftp-username, +.request-filesystem-credentials-dialog .ftp-password { + float: none; + width: auto; +} + +.request-filesystem-credentials-dialog .ftp-username { + margin-bottom: 1em; +} + +.request-filesystem-credentials-dialog .ftp-password { + margin: 0; +} + +.request-filesystem-credentials-dialog .ftp-password em { + color: #8c8f94; +} + +.request-filesystem-credentials-dialog label { + display: block; + line-height: 1.5; + margin-bottom: 1em; +} + +.request-filesystem-credentials-form legend { + padding-bottom: 0; +} + +.request-filesystem-credentials-form #ssh-keys legend { + font-size: 1.3em; +} + +.request-filesystem-credentials-form .notice { + margin: 0 0 20px; + clear: both; +} + +/*------------------------------------------------------------------------------ + Privacy Policy settings screen +------------------------------------------------------------------------------*/ +.tools-privacy-policy-page form { + margin-bottom: 1.3em; +} + +.tools-privacy-policy-page input.button { + margin: 0 6px 0 1px; +} + +.tools-privacy-policy-page select { + margin: 0 6px 0.5em 1px; +} + +.tools-privacy-edit { + margin: 1.5em 0; +} + +.tools-privacy-policy-page span { + line-height: 2; +} + +.privacy_requests .column-email { + width: 40%; +} + +.privacy_requests .column-type { + text-align: center; +} + +.privacy_requests thead td:first-child, +.privacy_requests tfoot td:first-child { + border-right: 4px solid #fff; +} + +.privacy_requests tbody th { + border-right: 4px solid #fff; + background: #fff; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.privacy_requests .row-actions { + color: #787c82; +} + +.privacy_requests .row-actions.processing { + position: static; +} + +.privacy_requests tbody .has-request-results th { + box-shadow: none; +} + +.privacy_requests tbody .request-results th .notice { + margin: 0 0 5px; +} + +.privacy_requests tbody td { + background: #fff; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.privacy_requests tbody .has-request-results td { + box-shadow: none; +} + +.privacy_requests .next_steps .button { + word-wrap: break-word; + white-space: normal; +} + +.privacy_requests .status-request-confirmed th, +.privacy_requests .status-request-confirmed td { + background-color: #fff; + border-right-color: #72aee6; +} + +.privacy_requests .status-request-failed th, +.privacy_requests .status-request-failed td { + background-color: #f6f7f7; + border-right-color: #d63638; +} + +.privacy_requests .export_personal_data_failed a { + vertical-align: baseline; +} + +.status-label { + font-weight: 600; +} + +.status-label.status-request-pending { + font-weight: 400; + font-style: italic; + color: #646970; +} + +.status-label.status-request-failed { + color: #d63638; + font-weight: 600; +} + +.wp-privacy-request-form { + clear: both; +} + +.wp-privacy-request-form-field { + margin: 1.5em 0; +} + +.wp-privacy-request-form input { + margin: 0; +} + +.email-personal-data::before { + display: inline-block; + font: normal 20px/1 dashicons; + margin: 3px -2px 0 5px; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.email-personal-data--sending::before { + color: #d63638; + content: "\f463"; + animation: rotation 2s infinite linear; +} + +.email-personal-data--sent::before { + color: #68de7c; + content: "\f147"; +} + + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 782px) { + /* Input Elements */ + textarea { + -webkit-appearance: none; + } + + input[type="text"], + input[type="password"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="email"], + input[type="month"], + input[type="number"], + input[type="search"], + input[type="tel"], + input[type="time"], + input[type="url"], + input[type="week"] { + -webkit-appearance: none; + padding: 3px 10px; + /* Only necessary for IE11 */ + min-height: 40px; + } + + ::-webkit-datetime-edit { + line-height: 1.875; /* 30px */ + } + + input[type="checkbox"], + .widefat th input[type="checkbox"], + .widefat thead td input[type="checkbox"], + .widefat tfoot td input[type="checkbox"] { + -webkit-appearance: none; + } + + .widefat th input[type="checkbox"], + .widefat thead td input[type="checkbox"], + .widefat tfoot td input[type="checkbox"] { + margin-bottom: 8px; + } + + input[type="checkbox"]:checked:before, + .widefat th input[type="checkbox"]:before, + .widefat thead td input[type="checkbox"]:before, + .widefat tfoot td input[type="checkbox"]:before { + width: 1.875rem; + height: 1.875rem; + margin: -0.1875rem -0.3125rem; + } + + input[type="radio"], + input[type="checkbox"] { + height: 1.5625rem; + width: 1.5625rem; + } + + .wp-admin p input[type="checkbox"], + .wp-admin p input[type="radio"] { + margin-top: -0.1875rem; + } + + input[type="radio"]:checked:before { + vertical-align: middle; + width: 0.5625rem; + height: 0.5625rem; + margin: 0.4375rem; + line-height: 0.76190476; + } + + .wp-upload-form input[type="submit"] { + margin-top: 10px; + } + + .wp-core-ui select, + .wp-admin .form-table select { + min-height: 40px; + font-size: 16px; + line-height: 1.625; /* 26px */ + padding: 5px 8px 5px 24px; + } + + .wp-admin .button-cancel { + margin-bottom: 0; + padding: 2px 0; + font-size: 14px; + vertical-align: middle; + } + + #adduser .form-field input, + #createuser .form-field input { + width: 100%; + } + + .form-table { + box-sizing: border-box; + } + + .form-table th, + .form-table td, + .label-responsive { + display: block; + width: auto; + vertical-align: middle; + } + + .label-responsive { + margin: 0.5em 0; + } + + .export-filters li { + margin-bottom: 0; + } + + .form-table .color-palette td { + display: table-cell; + width: 15px; + } + + .form-table table.color-palette { + margin-left: 10px; + } + + textarea, + input { + font-size: 16px; + } + + .form-table td input[type="text"], + .form-table td input[type="email"], + .form-table td input[type="password"], + .form-table td select, + .form-table td textarea, + .form-table span.description, + #profile-page .form-table textarea { + width: 100%; + display: block; + max-width: none; + box-sizing: border-box; + } + + .form-table .form-required.form-invalid td:after { + float: left; + margin: -30px 0 0 3px; + } + + input[type="text"].small-text, + input[type="search"].small-text, + input[type="password"].small-text, + input[type="number"].small-text, + input[type="number"].small-text, + .form-table input[type="text"].small-text { + width: auto; + max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */ + display: inline; + padding: 3px 6px; + margin: 0 3px; + } + + .form-table .regular-text ~ input[type="text"].small-text { + margin-top: 5px; + } + + #pass-strength-result { + width: 100%; + box-sizing: border-box; + padding: 8px; + } + + p.search-box { + float: none; + position: absolute; + bottom: 0; + width: 98%; + height: 90px; + margin-bottom: 20px; + } + + p.search-box input[name="s"] { + float: none; + width: 100%; + margin-bottom: 10px; + vertical-align: middle; + } + + p.search-box input[type="submit"] { + margin-bottom: 10px; + } + + .form-table span.description { + display: inline; + padding: 4px 0 0; + line-height: 1.4; + font-size: 14px; + } + + .form-table th { + padding: 10px 0 0; + border-bottom: 0; + } + + .form-table td { + margin-bottom: 0; + padding: 4px 0 6px; + } + + .form-table.permalink-structure td code { + margin-right: 32px; + display: inline-block; + } + + .form-table.permalink-structure td input[type="text"] { + margin-right: 32px; + margin-top: 4px; + width: 96%; + } + + .form-table input.regular-text { + width: 100%; + } + + .form-table label { + font-size: 14px; + } + + .background-position-control .button-group > label { + font-size: 0; + } + + .form-table fieldset label { + display: block; + } + + #utc-time, + #local-time { + display: block; + float: none; + margin-top: 0.5em; + } + + .form-field #domain { + max-width: none; + } + + /* New Password */ + .wp-pwd { + position: relative; + } + + /* Needs higher specificity than normal input type text and password. */ + #profile-page .form-table #pass1 { + padding-left: 90px; + } + + .wp-pwd button.button { + background: transparent; + border: 1px solid transparent; + box-shadow: none; + line-height: 2; + margin: 0; + padding: 5px 9px; + position: absolute; + left: 0; + top: 0; + width: 2.375rem; + height: 2.375rem; + min-width: 40px; + min-height: 40px; + } + + .wp-pwd button.wp-hide-pw { + left: 2.5rem; + } + + .wp-pwd button.button:hover, + .wp-pwd button.button:focus { + background: transparent; + } + + .wp-pwd button.button:active { + background: transparent; + box-shadow: none; + transform: none; + } + + .wp-pwd .button .text { + display: none; + } + + .wp-pwd [type="text"], + .wp-pwd [type="password"] { + line-height: 2; + padding-left: 5rem; + } + + .wp-cancel-pw .dashicons-no { + display: inline-block; + } + + .options-general-php input[type="text"].small-text { + max-width: 6.25em; + margin: 0; + } + + /* Privacy Policy settings screen */ + .tools-privacy-policy-page form.wp-create-privacy-page { + margin-bottom: 1em; + } + + .tools-privacy-policy-page input#set-page, + .tools-privacy-policy-page select { + margin: 10px 0 0; + } + + .tools-privacy-policy-page .wp-create-privacy-page span { + display: block; + margin-bottom: 1em; + } + + .tools-privacy-policy-page .wp-create-privacy-page .button { + margin-right: 0; + } + + .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) { + display: table-cell; + } + + .wp-list-table.privacy_requests.widefat th input, + .wp-list-table.privacy_requests.widefat thead td input { + margin-right: 5px; + } + + .wp-privacy-request-form-field input[type="text"] { + width: 100%; + margin-bottom: 10px; + vertical-align: middle; + } + + .regular-text { + max-width: 100%; + } +} + +@media only screen and (max-width: 768px) { + .form-field input[type="text"], + .form-field input[type="email"], + .form-field input[type="password"], + .form-field select, + .form-field textarea { + width: 99%; + } + + .form-wrap .form-field { + padding: 0; + } +} + +@media only screen and (max-height: 480px), screen and (max-width: 450px) { + /* Request Credentials / File Editor Warning */ + .request-filesystem-credentials-dialog .notification-dialog, + .file-editor-warning .notification-dialog { + width: 100%; + height: 100%; + max-height: 100%; + position: fixed; + top: 0; + margin: 0; + right: 0; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Color Picker Options */ + .color-option { + width: 49%; + } +} + +@media only screen and (max-width: 320px) { + .options-general-php .date-time-text.date-time-custom-text { + min-width: 0; + margin-left: 0.5em; + } +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-359deg); + } +} diff --git a/tools/storybook/wordpress/css/forms-rtl.min.css b/tools/storybook/wordpress/css/forms-rtl.min.css new file mode 100644 index 00000000000..60023c3163d --- /dev/null +++ b/tools/storybook/wordpress/css/forms-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +button,input,select,textarea{box-sizing:border-box;font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea{font-size:14px}textarea{overflow:auto;padding:2px 6px;line-height:1.42857143;resize:vertical}label{cursor:pointer}input,select{margin:0 1px}textarea.code{padding:4px 6px 1px}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{box-shadow:0 0 0 transparent;border-radius:4px;border:1px solid #8c8f94;background-color:#fff;color:#2c3338}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{padding:0 8px;line-height:2;min-height:30px}::-webkit-datetime-edit{line-height:1.85714286}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#2271b1;box-shadow:0 0 0 1px #2271b1;outline:2px solid transparent}input[type=email],input[type=url]{direction:ltr}input[type=checkbox],input[type=radio]{border:1px solid #8c8f94;border-radius:4px;background:#fff;color:#50575e;clear:none;cursor:pointer;display:inline-block;line-height:0;height:1rem;margin:-.25rem 0 0 .25rem;outline:0;padding:0!important;text-align:center;vertical-align:middle;width:1rem;min-width:1rem;-webkit-appearance:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);transition:.05s border-color ease-in-out}input[type=radio]:checked+label:before{color:#8c8f94}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#135e96}.wp-admin p input[type=checkbox],.wp-admin p input[type=radio],td>input[type=checkbox]{margin-top:0}.wp-admin p label input[type=checkbox]{margin-top:-4px}.wp-admin p label input[type=radio]{margin-top:-2px}input[type=radio]{border-radius:50%;margin-left:.25rem;line-height:.71428571}input[type=checkbox]:checked::before,input[type=radio]:checked::before{float:right;display:inline-block;vertical-align:middle;width:1rem;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E");margin:-.1875rem -.25rem 0 0;height:1.3125rem;width:1.3125rem}input[type=radio]:checked::before{content:"";border-radius:50%;width:.5rem;height:.5rem;margin:.1875rem;background-color:#3582c4;line-height:1.14285714}@-moz-document url-prefix(){.form-table input.tog,input[type=checkbox],input[type=radio]{margin-bottom:-1px}}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-decoration{display:none}.wp-admin input[type=file]{padding:3px 0;cursor:pointer}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#f0f0f1}::-webkit-input-placeholder{color:#646970}::-moz-placeholder{color:#646970;opacity:1}:-ms-input-placeholder{color:#646970}.form-invalid .form-required,.form-invalid .form-required:focus,.form-invalid.form-required input,.form-invalid.form-required input:focus,.form-invalid.form-required select,.form-invalid.form-required select:focus{border-color:#d63638!important;box-shadow:0 0 2px rgba(214,54,56,.8)}.form-table .form-required.form-invalid td:after{content:"\f534";font:normal 20px/1 dashicons;color:#d63638;margin-right:-25px;vertical-align:middle}.form-table .form-required.user-pass1-wrap.form-invalid td:after{content:""}.form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after{content:"\f534";font:normal 20px/1 dashicons;color:#d63638;margin:0 -29px 0 6px;vertical-align:middle}.form-input-tip{color:#646970}input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:rgba(255,255,255,.5);border-color:rgba(220,220,222,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(44,51,56,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:0 0;box-shadow:none;cursor:default}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}.wp-core-ui select{font-size:14px;line-height:2;color:#2c3338;border-color:#8c8f94;box-shadow:none;border-radius:3px;padding:0 8px 0 24px;min-height:30px;max-width:25rem;-webkit-appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat left 5px top 55%;background-size:16px 16px;cursor:pointer;vertical-align:middle}.wp-core-ui select:hover{color:#2271b1}.wp-core-ui select:focus{border-color:#2271b1;color:#0a4b78;box-shadow:0 0 0 1px #2271b1}.wp-core-ui select:active{border-color:#8c8f94;box-shadow:none}.wp-core-ui select.disabled,.wp-core-ui select:disabled{color:#a7aaad;border-color:#dcdcde;background-color:#f6f7f7;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E');box-shadow:none;text-shadow:0 1px 0 #fff;cursor:default;transform:none}.wp-core-ui select:-moz-focusring{color:transparent;text-shadow:0 0 0 #0a4b78}.wp-core-ui select::-ms-value{background:0 0;color:#50575e}.wp-core-ui select:hover::-ms-value{color:#2271b1}.wp-core-ui select:focus::-ms-value{color:#0a4b78}.wp-core-ui select.disabled::-ms-value,.wp-core-ui select:disabled::-ms-value{color:#a7aaad}.wp-core-ui select::-ms-expand{display:none}.wp-admin .button-cancel{display:inline-block;min-height:28px;padding:0 5px;line-height:2}.meta-box-sortables select{max-width:100%}.meta-box-sortables input{vertical-align:middle}.misc-pub-post-status select{margin-top:0}.wp-core-ui select[multiple]{height:auto;padding-left:8px;background:#fff}.submit{padding:1.5em 0;margin:5px 0;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border:none}form p.submit a.cancel:hover{text-decoration:none}p.submit{text-align:right;max-width:100%;margin-top:20px;padding-top:10px}.textright p.submit{border:none;text-align:left}table.form-table+input+input+p.submit,table.form-table+input+p.submit,table.form-table+p.submit{border-top:none;padding-top:0}#major-publishing-actions input,#minor-publishing-actions .preview,#minor-publishing-actions input{text-align:center}input.all-options,textarea.all-options{width:250px}input.large-text,textarea.large-text{width:99%}.regular-text{width:25em}input.small-text{width:50px;padding:0 6px}label input.small-text{margin-top:-4px}input[type=number].small-text{width:65px;padding-left:0}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px;padding-left:0}#doaction,#doaction2,#post-query-submit{margin:0 0 0 8px}.no-js input#changeit2,.no-js input#doaction2,.no-js label[for=bulk-action-selector-bottom],.no-js label[for=new_role2],.no-js select#bulk-action-selector-bottom,.no-js select#new_role2{display:none}.tablenav .actions select{float:right;margin-left:6px;max-width:12.5rem}#timezone_string option{margin-right:1em}.wp-cancel-pw>.dashicons,.wp-hide-pw>.dashicons{position:relative;top:3px;width:1.25rem;height:1.25rem;top:.25rem;font-size:20px}.wp-cancel-pw .dashicons-no{display:none}#your-profile label+a,label{vertical-align:middle}#your-profile label+a,fieldset label{vertical-align:middle}.options-media-php [for*="_size_"]{min-width:10em;vertical-align:baseline}.options-media-php .small-text[name*="_size_"]{margin:0 0 1em}.wp-generate-pw{margin-top:1em}.wp-pwd{margin-top:1em}#misc-publishing-actions label{vertical-align:baseline}#pass-strength-result{background-color:#f0f0f1;border:1px solid #dcdcde;color:#1d2327;margin:-1px 1px 5px;padding:3px 5px;text-align:center;width:25em;box-sizing:border-box;opacity:0}#pass-strength-result.short{background-color:#ffabaf;border-color:#e65054;opacity:1}#pass-strength-result.bad{background-color:#facfd2;border-color:#f86368;opacity:1}#pass-strength-result.good{background-color:#f5e6ab;border-color:#f0c33c;opacity:1}#pass-strength-result.strong{background-color:#b8e6bf;border-color:#68de7c;opacity:1}.password-input-wrapper input{font-family:Consolas,Monaco,monospace}#pass1-text.short,#pass1.short{border-color:#e65054}#pass1-text.bad,#pass1.bad{border-color:#f86368}#pass1-text.good,#pass1.good{border-color:#f0c33c}#pass1-text.strong,#pass1.strong{border-color:#68de7c}.pw-weak{display:none}.indicator-hint{padding-top:8px}.wp-pwd [type=password],.wp-pwd [type=text]{margin-bottom:0;min-height:30px}.wp-pwd input::-ms-reveal{display:none}#pass1-text,.show-password #pass1{display:none}#pass1-text::-ms-clear{display:none}.show-password #pass1-text{display:inline-block}p.search-box{float:left;margin:0}.network-admin.themes-php p.search-box{clear:right}.search-box input[name="s"],.tablenav .search-plugins input[name="s"],.tagsdiv .newtag{float:right;margin:0 0 0 4px}.js.plugins-php .search-box .wp-filter-search{margin:0;width:280px}input[type=email].ui-autocomplete-loading,input[type=text].ui-autocomplete-loading{background-image:url(../images/loading.gif);background-repeat:no-repeat;background-position:left center;visibility:visible}input.ui-autocomplete-input.open{border-bottom-color:transparent}ul#add-to-blog-users{margin:0 14px 0 0}.ui-autocomplete{padding:0;margin:0;list-style:none;position:absolute;z-index:10000;border:1px solid #4f94d4;box-shadow:0 1px 2px rgba(79,148,212,.8);background-color:#fff}.ui-autocomplete li{margin-bottom:0;padding:4px 10px;white-space:nowrap;text-align:right;cursor:pointer}.ui-autocomplete .ui-state-focus{background-color:#dcdcde}.wp-tags-autocomplete .ui-state-focus,.wp-tags-autocomplete [aria-selected=true]{background-color:#2271b1;color:#fff;outline:2px solid transparent}.form-table{border-collapse:collapse;margin-top:.5em;width:100%;clear:both}.form-table,.form-table td,.form-table td p,.form-table th{font-size:14px}.form-table td{margin-bottom:9px;padding:15px 10px;line-height:1.3;vertical-align:middle}.form-table th,.form-wrap label{color:#1d2327;font-weight:400;text-shadow:none;vertical-align:baseline}.form-table th{vertical-align:top;text-align:right;padding:20px 0 20px 10px;width:200px;line-height:1.3;font-weight:600}.form-table .td-full,.form-table th.th-full{width:auto;padding:20px 0 20px 10px;font-weight:400}.form-table td p{margin-top:4px;margin-bottom:0}.form-table .date-time-doc{margin-top:1em}.form-table p.timezone-info{margin:1em 0}.form-table td fieldset label{margin:.35em 0 .5em!important;display:inline-block}.form-table td fieldset p label{margin-top:0!important}.form-table td fieldset label,.form-table td fieldset li,.form-table td fieldset p{line-height:1.4}.form-table input.tog,.form-table input[type=radio]{margin-top:-4px;margin-left:4px;float:none}.form-table .pre{padding:8px;margin:0}table.form-table td .updated{font-size:13px}table.form-table td .updated p{font-size:13px;margin:.3em 0}#profile-page .form-table textarea{width:500px;margin-bottom:6px}#profile-page .form-table #rich_editing{margin-left:5px}#your-profile legend{font-size:22px}#display_name{width:15em}#adduser .form-field input,#createuser .form-field input{width:25em}.color-option{display:inline-block;width:24%;padding:5px 15px 15px;box-sizing:border-box;margin-bottom:3px}.color-option.selected,.color-option:hover{background:#dcdcde}.color-palette{width:100%;border-spacing:0;border-collapse:collapse}.color-palette td{height:20px;padding:0;border:none}.color-option{cursor:pointer}.create-application-password .form-field{max-width:25em}.create-application-password label{font-weight:600}.create-application-password p.submit{margin-bottom:0;padding-bottom:0;display:block}#application-passwords-section .notice{margin-top:20px;margin-bottom:0}.application-password-display input.code{width:19em}.auth-app-card.card{max-width:768px}.authorize-application-php .form-wrap p{display:block}.tool-box .title{margin:8px 0;font-size:18px;font-weight:400;line-height:24px}.label-responsive{vertical-align:middle}#export-filters p{margin:0 0 1em}#export-filters p.submit{margin:7px 0 5px}.card{position:relative;margin-top:20px;padding:.7em 2em 1em;min-width:255px;max-width:520px;border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;box-sizing:border-box}.pressthis h4{margin:2em 0 1em}.pressthis textarea{width:100%;font-size:1em}#pressthis-code-wrap{overflow:auto}.pressthis-bookmarklet-wrapper{margin:20px 0 8px;vertical-align:top;position:relative;z-index:1}.pressthis-bookmarklet,.pressthis-bookmarklet:active,.pressthis-bookmarklet:focus,.pressthis-bookmarklet:hover{display:inline-block;position:relative;cursor:move;color:#2c3338;background:#dcdcde;border-radius:5px;border:1px solid #c3c4c7;font-style:normal;line-height:16px;font-size:14px;text-decoration:none}.pressthis-bookmarklet:active{outline:0}.pressthis-bookmarklet:after{content:"";width:70%;height:55%;z-index:-1;position:absolute;left:10px;bottom:9px;background:0 0;transform:skew(-20deg) rotate(-6deg);box-shadow:0 10px 8px rgba(0,0,0,.6)}.pressthis-bookmarklet:hover:after{transform:skew(-20deg) rotate(-9deg);box-shadow:0 10px 8px rgba(0,0,0,.7)}.pressthis-bookmarklet span{display:inline-block;margin:0;padding:0 9px 8px 12px}.pressthis-bookmarklet span:before{color:#787c82;font:normal 20px/1 dashicons;content:"\f157";position:relative;display:inline-block;top:4px;margin-left:4px}.pressthis-js-toggle{margin-right:10px;padding:0;height:auto;vertical-align:top}.pressthis-js-toggle.button.button{margin-right:10px;padding:0;height:auto;vertical-align:top}.pressthis-js-toggle .dashicons{margin:5px 7px 6px 8px;color:#50575e}.timezone-info code{white-space:nowrap}.defaultavatarpicker .avatar{margin:2px 0;vertical-align:middle}.options-general-php .date-time-text{display:inline-block;min-width:10em}.options-general-php input.small-text{width:56px;margin:-2px 0}.options-general-php .spinner{float:none;margin:-3px 3px 0}.options-general-php .language-install-spinner,.settings-php .language-install-spinner{display:inline-block;float:none;margin:-3px 5px 0;vertical-align:middle}.form-table.permalink-structure .available-structure-tags li{float:right;margin-left:5px}.setup-php textarea{max-width:100%}.form-field #site-address{max-width:25em}.form-field #domain{max-width:22em}.form-field #admin-email,.form-field #blog_last_updated,.form-field #blog_registered,.form-field #path,.form-field #site-title{max-width:25em}.form-field #path{margin-bottom:5px}#search-sites,#search-users{max-width:60%}.request-filesystem-credentials-dialog{display:none;visibility:visible}.request-filesystem-credentials-dialog .notification-dialog{top:10%;max-height:85%}.request-filesystem-credentials-dialog-content{margin:25px}#request-filesystem-credentials-title{font-size:1.3em;margin:1em 0}.request-filesystem-credentials-form legend{font-size:1em;padding:1.33em 0;font-weight:600}.request-filesystem-credentials-form input[type=password],.request-filesystem-credentials-form input[type=text]{display:block}.request-filesystem-credentials-dialog input[type=password],.request-filesystem-credentials-dialog input[type=text]{width:100%}.request-filesystem-credentials-form .field-title{font-weight:600}.request-filesystem-credentials-dialog label[for=hostname],.request-filesystem-credentials-dialog label[for=private_key],.request-filesystem-credentials-dialog label[for=public_key]{display:block;margin-bottom:1em}.request-filesystem-credentials-dialog .ftp-password,.request-filesystem-credentials-dialog .ftp-username{float:right;width:48%}.request-filesystem-credentials-dialog .ftp-password{margin-right:4%}.request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons{text-align:left}.request-filesystem-credentials-dialog label[for=ftp]{margin-left:10px}.request-filesystem-credentials-dialog #auth-keys-desc{margin-bottom:0}#request-filesystem-credentials-dialog .button:not(:last-child){margin-left:10px}#request-filesystem-credentials-form .cancel-button{display:none}#request-filesystem-credentials-dialog .cancel-button{display:inline}.request-filesystem-credentials-dialog .ftp-password,.request-filesystem-credentials-dialog .ftp-username{float:none;width:auto}.request-filesystem-credentials-dialog .ftp-username{margin-bottom:1em}.request-filesystem-credentials-dialog .ftp-password{margin:0}.request-filesystem-credentials-dialog .ftp-password em{color:#8c8f94}.request-filesystem-credentials-dialog label{display:block;line-height:1.5;margin-bottom:1em}.request-filesystem-credentials-form legend{padding-bottom:0}.request-filesystem-credentials-form #ssh-keys legend{font-size:1.3em}.request-filesystem-credentials-form .notice{margin:0 0 20px;clear:both}.tools-privacy-policy-page form{margin-bottom:1.3em}.tools-privacy-policy-page input.button{margin:0 6px 0 1px}.tools-privacy-policy-page select{margin:0 6px .5em 1px}.tools-privacy-edit{margin:1.5em 0}.tools-privacy-policy-page span{line-height:2}.privacy_requests .column-email{width:40%}.privacy_requests .column-type{text-align:center}.privacy_requests tfoot td:first-child,.privacy_requests thead td:first-child{border-right:4px solid #fff}.privacy_requests tbody th{border-right:4px solid #fff;background:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.privacy_requests .row-actions{color:#787c82}.privacy_requests .row-actions.processing{position:static}.privacy_requests tbody .has-request-results th{box-shadow:none}.privacy_requests tbody .request-results th .notice{margin:0 0 5px}.privacy_requests tbody td{background:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.privacy_requests tbody .has-request-results td{box-shadow:none}.privacy_requests .next_steps .button{word-wrap:break-word;white-space:normal}.privacy_requests .status-request-confirmed td,.privacy_requests .status-request-confirmed th{background-color:#fff;border-right-color:#72aee6}.privacy_requests .status-request-failed td,.privacy_requests .status-request-failed th{background-color:#f6f7f7;border-right-color:#d63638}.privacy_requests .export_personal_data_failed a{vertical-align:baseline}.status-label{font-weight:600}.status-label.status-request-pending{font-weight:400;font-style:italic;color:#646970}.status-label.status-request-failed{color:#d63638;font-weight:600}.wp-privacy-request-form{clear:both}.wp-privacy-request-form-field{margin:1.5em 0}.wp-privacy-request-form input{margin:0}.email-personal-data::before{display:inline-block;font:normal 20px/1 dashicons;margin:3px -2px 0 5px;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.email-personal-data--sending::before{color:#d63638;content:"\f463";animation:rotation 2s infinite linear}.email-personal-data--sent::before{color:#68de7c;content:"\f147"}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{-webkit-appearance:none;padding:3px 10px;min-height:40px}::-webkit-datetime-edit{line-height:1.875}.widefat tfoot td input[type=checkbox],.widefat th input[type=checkbox],.widefat thead td input[type=checkbox],input[type=checkbox]{-webkit-appearance:none}.widefat tfoot td input[type=checkbox],.widefat th input[type=checkbox],.widefat thead td input[type=checkbox]{margin-bottom:8px}.widefat tfoot td input[type=checkbox]:before,.widefat th input[type=checkbox]:before,.widefat thead td input[type=checkbox]:before,input[type=checkbox]:checked:before{width:1.875rem;height:1.875rem;margin:-.1875rem -.3125rem}input[type=checkbox],input[type=radio]{height:1.5625rem;width:1.5625rem}.wp-admin p input[type=checkbox],.wp-admin p input[type=radio]{margin-top:-.1875rem}input[type=radio]:checked:before{vertical-align:middle;width:.5625rem;height:.5625rem;margin:.4375rem;line-height:.76190476}.wp-upload-form input[type=submit]{margin-top:10px}.wp-admin .form-table select,.wp-core-ui select{min-height:40px;font-size:16px;line-height:1.625;padding:5px 8px 5px 24px}.wp-admin .button-cancel{margin-bottom:0;padding:2px 0;font-size:14px;vertical-align:middle}#adduser .form-field input,#createuser .form-field input{width:100%}.form-table{box-sizing:border-box}.form-table td,.form-table th,.label-responsive{display:block;width:auto;vertical-align:middle}.label-responsive{margin:.5em 0}.export-filters li{margin-bottom:0}.form-table .color-palette td{display:table-cell;width:15px}.form-table table.color-palette{margin-left:10px}input,textarea{font-size:16px}#profile-page .form-table textarea,.form-table span.description,.form-table td input[type=email],.form-table td input[type=password],.form-table td input[type=text],.form-table td select,.form-table td textarea{width:100%;display:block;max-width:none;box-sizing:border-box}.form-table .form-required.form-invalid td:after{float:left;margin:-30px 0 0 3px}.form-table input[type=text].small-text,input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:4.375em;display:inline;padding:3px 6px;margin:0 3px}.form-table .regular-text~input[type=text].small-text{margin-top:5px}#pass-strength-result{width:100%;box-sizing:border-box;padding:8px}p.search-box{float:none;position:absolute;bottom:0;width:98%;height:90px;margin-bottom:20px}p.search-box input[name="s"]{float:none;width:100%;margin-bottom:10px;vertical-align:middle}p.search-box input[type=submit]{margin-bottom:10px}.form-table span.description{display:inline;padding:4px 0 0;line-height:1.4;font-size:14px}.form-table th{padding:10px 0 0;border-bottom:0}.form-table td{margin-bottom:0;padding:4px 0 6px}.form-table.permalink-structure td code{margin-right:32px;display:inline-block}.form-table.permalink-structure td input[type=text]{margin-right:32px;margin-top:4px;width:96%}.form-table input.regular-text{width:100%}.form-table label{font-size:14px}.background-position-control .button-group>label{font-size:0}.form-table fieldset label{display:block}#local-time,#utc-time{display:block;float:none;margin-top:.5em}.form-field #domain{max-width:none}.wp-pwd{position:relative}#profile-page .form-table #pass1{padding-left:90px}.wp-pwd button.button{background:0 0;border:1px solid transparent;box-shadow:none;line-height:2;margin:0;padding:5px 9px;position:absolute;left:0;top:0;width:2.375rem;height:2.375rem;min-width:40px;min-height:40px}.wp-pwd button.wp-hide-pw{left:2.5rem}.wp-pwd button.button:focus,.wp-pwd button.button:hover{background:0 0}.wp-pwd button.button:active{background:0 0;box-shadow:none;transform:none}.wp-pwd .button .text{display:none}.wp-pwd [type=password],.wp-pwd [type=text]{line-height:2;padding-left:5rem}.wp-cancel-pw .dashicons-no{display:inline-block}.options-general-php input[type=text].small-text{max-width:6.25em;margin:0}.tools-privacy-policy-page form.wp-create-privacy-page{margin-bottom:1em}.tools-privacy-policy-page input#set-page,.tools-privacy-policy-page select{margin:10px 0 0}.tools-privacy-policy-page .wp-create-privacy-page span{display:block;margin-bottom:1em}.tools-privacy-policy-page .wp-create-privacy-page .button{margin-right:0}.wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column){display:table-cell}.wp-list-table.privacy_requests.widefat th input,.wp-list-table.privacy_requests.widefat thead td input{margin-right:5px}.wp-privacy-request-form-field input[type=text]{width:100%;margin-bottom:10px;vertical-align:middle}.regular-text{max-width:100%}}@media only screen and (max-width:768px){.form-field input[type=email],.form-field input[type=password],.form-field input[type=text],.form-field select,.form-field textarea{width:99%}.form-wrap .form-field{padding:0}}@media only screen and (max-height:480px),screen and (max-width:450px){.file-editor-warning .notification-dialog,.request-filesystem-credentials-dialog .notification-dialog{width:100%;height:100%;max-height:100%;position:fixed;top:0;margin:0;right:0}}@media screen and (max-width:600px){.color-option{width:49%}}@media only screen and (max-width:320px){.options-general-php .date-time-text.date-time-custom-text{min-width:0;margin-left:.5em}}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(-359deg)}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/forms.css b/tools/storybook/wordpress/css/forms.css new file mode 100644 index 00000000000..6349c1e8645 --- /dev/null +++ b/tools/storybook/wordpress/css/forms.css @@ -0,0 +1,1765 @@ +/* Include margin and padding in the width calculation of input and textarea. */ +input, +select, +textarea, +button { + box-sizing: border-box; + font-family: inherit; + font-size: inherit; + font-weight: inherit; +} + +textarea, +input { + font-size: 14px; +} + +textarea { + overflow: auto; + padding: 2px 6px; + /* inherits font size 14px */ + line-height: 1.42857143; /* 20px */ + resize: vertical; +} + +label { + cursor: pointer; +} + +input, +select { + margin: 0 1px; +} + +textarea.code { + padding: 4px 6px 1px; +} + +input[type="text"], +input[type="password"], +input[type="color"], +input[type="date"], +input[type="datetime"], +input[type="datetime-local"], +input[type="email"], +input[type="month"], +input[type="number"], +input[type="search"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"], +select, +textarea { + box-shadow: 0 0 0 transparent; + border-radius: 4px; + border: 1px solid #8c8f94; + background-color: #fff; + color: #2c3338; +} + +input[type="text"], +input[type="password"], +input[type="date"], +input[type="datetime"], +input[type="datetime-local"], +input[type="email"], +input[type="month"], +input[type="number"], +input[type="search"], +input[type="tel"], +input[type="time"], +input[type="url"], +input[type="week"] { + padding: 0 8px; + /* inherits font size 14px */ + line-height: 2; /* 28px */ + /* Only necessary for IE11 */ + min-height: 30px; +} + +::-webkit-datetime-edit { + /* inherits font size 14px */ + line-height: 1.85714286; /* 26px */ +} + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="color"]:focus, +input[type="date"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="email"]:focus, +input[type="month"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="time"]:focus, +input[type="url"]:focus, +input[type="week"]:focus, +input[type="checkbox"]:focus, +input[type="radio"]:focus, +select:focus, +textarea:focus { + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +/* rtl:ignore */ +input[type="email"], +input[type="url"] { + direction: ltr; +} + +input[type="checkbox"], +input[type="radio"] { + border: 1px solid #8c8f94; + border-radius: 4px; + background: #fff; + color: #50575e; + clear: none; + cursor: pointer; + display: inline-block; + line-height: 0; + height: 1rem; + margin: -0.25rem 0.25rem 0 0; + outline: 0; + padding: 0 !important; + text-align: center; + vertical-align: middle; + width: 1rem; + min-width: 1rem; + -webkit-appearance: none; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + transition: .05s border-color ease-in-out; +} + +input[type="radio"]:checked + label:before { + color: #8c8f94; +} + +.wp-core-ui input[type="reset"]:hover, +.wp-core-ui input[type="reset"]:active { + color: #135e96; +} + +td > input[type="checkbox"], +.wp-admin p input[type="checkbox"], +.wp-admin p input[type="radio"] { + margin-top: 0; +} + +.wp-admin p label input[type="checkbox"] { + margin-top: -4px; +} + +.wp-admin p label input[type="radio"] { + margin-top: -2px; +} + +input[type="radio"] { + border-radius: 50%; + margin-right: 0.25rem; + /* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */ + line-height: 0.71428571; +} + +input[type="checkbox"]:checked::before, +input[type="radio"]:checked::before { + float: left; + display: inline-block; + vertical-align: middle; + width: 1rem; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +input[type="checkbox"]:checked::before { + /* Use the "Yes" SVG Dashicon */ + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E"); + margin: -0.1875rem 0 0 -0.25rem; + height: 1.3125rem; + width: 1.3125rem; +} + +input[type="radio"]:checked::before { + content: ""; + border-radius: 50%; + width: 0.5rem; /* 8px */ + height: 0.5rem; /* 8px */ + margin: 0.1875rem; /* 3px */ + background-color: #3582c4; + /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */ + line-height: 1.14285714; +} + +@-moz-document url-prefix() { + input[type="checkbox"], + input[type="radio"], + .form-table input.tog { + margin-bottom: -1px; + } +} + +/* Search */ +input[type="search"] { + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-decoration { + display: none; +} + +.wp-admin input[type="file"] { + padding: 3px 0; + cursor: pointer; +} + +input.readonly, +input[readonly], +textarea.readonly, +textarea[readonly] { + background-color: #f0f0f1; +} + +::-webkit-input-placeholder { + color: #646970; +} + +::-moz-placeholder { + color: #646970; + opacity: 1; +} + +:-ms-input-placeholder { + color: #646970; +} + +.form-invalid .form-required, +.form-invalid .form-required:focus, +.form-invalid.form-required input, +.form-invalid.form-required input:focus, +.form-invalid.form-required select, +.form-invalid.form-required select:focus { + border-color: #d63638 !important; + box-shadow: 0 0 2px rgba(214, 54, 56, 0.8); +} + +.form-table .form-required.form-invalid td:after { + content: "\f534"; + font: normal 20px/1 dashicons; + color: #d63638; + margin-left: -25px; + vertical-align: middle; +} + +/* Adjust error indicator for password layout */ +.form-table .form-required.user-pass1-wrap.form-invalid td:after { + content: ""; +} + +.form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after { + content: "\f534"; + font: normal 20px/1 dashicons; + color: #d63638; + margin: 0 6px 0 -29px; + vertical-align: middle; +} + +.form-input-tip { + color: #646970; +} + +input:disabled, +input.disabled, +select:disabled, +select.disabled, +textarea:disabled, +textarea.disabled { + background: rgba(255, 255, 255, 0.5); + border-color: rgba(220, 220, 222, 0.75); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + color: rgba(44, 51, 56, 0.5); +} + +input[type="file"]:disabled, +input[type="file"].disabled, +input[type="range"]:disabled, +input[type="range"].disabled { + background: none; + box-shadow: none; + cursor: default; +} + +input[type="checkbox"]:disabled, +input[type="checkbox"].disabled, +input[type="radio"]:disabled, +input[type="radio"].disabled, +input[type="checkbox"]:disabled:checked:before, +input[type="checkbox"].disabled:checked:before, +input[type="radio"]:disabled:checked:before, +input[type="radio"].disabled:checked:before { + opacity: 0.7; +} + +/*------------------------------------------------------------------------------ + 2.0 - Forms +------------------------------------------------------------------------------*/ + +/* Select styles are based on the default button in buttons.css */ +.wp-core-ui select { + font-size: 14px; + line-height: 2; /* 28px */ + color: #2c3338; + border-color: #8c8f94; + box-shadow: none; + border-radius: 3px; + padding: 0 24px 0 8px; + min-height: 30px; + max-width: 25rem; + -webkit-appearance: none; + /* The SVG is arrow-down-alt2 from Dashicons. */ + background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%; + background-size: 16px 16px; + cursor: pointer; + vertical-align: middle; +} + +.wp-core-ui select:hover { + color: #2271b1; +} + +.wp-core-ui select:focus { + border-color: #2271b1; + color: #0a4b78; + box-shadow: 0 0 0 1px #2271b1; +} + +.wp-core-ui select:active { + border-color: #8c8f94; + box-shadow: none; +} + +.wp-core-ui select.disabled, +.wp-core-ui select:disabled { + color: #a7aaad; + border-color: #dcdcde; + background-color: #f6f7f7; + /* The SVG is arrow-down-alt2 from Dashicons. */ + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E'); + box-shadow: none; + text-shadow: 0 1px 0 #fff; + cursor: default; + transform: none; +} + +/* Reset Firefox inner outline that appears on :focus. */ +/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */ +.wp-core-ui select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #0a4b78; +} + +/* Remove background focus style from IE11 while keeping focus style available on option elements. */ +.wp-core-ui select::-ms-value { + background: transparent; + color: #50575e; +} + +.wp-core-ui select:hover::-ms-value { + color: #2271b1; +} + +.wp-core-ui select:focus::-ms-value { + color: #0a4b78; +} + +.wp-core-ui select.disabled::-ms-value, +.wp-core-ui select:disabled::-ms-value { + color: #a7aaad; +} + +/* Hide the native down arrow for select element on IE. */ +.wp-core-ui select::-ms-expand { + display: none; +} + +.wp-admin .button-cancel { + display: inline-block; + min-height: 28px; + padding: 0 5px; + line-height: 2; +} + +.meta-box-sortables select { + max-width: 100%; +} + +.meta-box-sortables input { + vertical-align: middle; +} + +.misc-pub-post-status select { + margin-top: 0; +} + +.wp-core-ui select[multiple] { + height: auto; + padding-right: 8px; + background: #fff; +} + +.submit { + padding: 1.5em 0; + margin: 5px 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border: none; +} + +form p.submit a.cancel:hover { + text-decoration: none; +} + +p.submit { + text-align: left; + max-width: 100%; + margin-top: 20px; + padding-top: 10px; +} + +.textright p.submit { + border: none; + text-align: right; +} + +table.form-table + p.submit, +table.form-table + input + p.submit, +table.form-table + input + input + p.submit { + border-top: none; + padding-top: 0; +} + +#minor-publishing-actions input, +#major-publishing-actions input, +#minor-publishing-actions .preview { + text-align: center; +} + +textarea.all-options, +input.all-options { + width: 250px; +} + +input.large-text, +textarea.large-text { + width: 99%; +} + +.regular-text { + width: 25em; +} + +input.small-text { + width: 50px; + padding: 0 6px; +} + +label input.small-text { + margin-top: -4px; +} + +input[type="number"].small-text { + width: 65px; + padding-right: 0; +} + +input.tiny-text { + width: 35px; +} + +input[type="number"].tiny-text { + width: 45px; + padding-right: 0; +} + +#doaction, +#doaction2, +#post-query-submit { + margin: 0 8px 0 0; +} + +/* @since 5.7.0 secondary bulk action controls require JS. */ +.no-js label[for="bulk-action-selector-bottom"], +.no-js select#bulk-action-selector-bottom, +.no-js input#doaction2, +.no-js label[for="new_role2"], +.no-js select#new_role2, +.no-js input#changeit2 { + display: none; +} + +.tablenav .actions select { + float: left; + margin-right: 6px; + max-width: 12.5rem; +} + +#timezone_string option { + margin-left: 1em; +} + +.wp-hide-pw > .dashicons, +.wp-cancel-pw > .dashicons { + position: relative; + top: 3px; + width: 1.25rem; + height: 1.25rem; + top: 0.25rem; + font-size: 20px; +} + +.wp-cancel-pw .dashicons-no { + display: none; +} + +label, +#your-profile label + a { + vertical-align: middle; +} + +fieldset label, +#your-profile label + a { + vertical-align: middle; +} + +.options-media-php [for*="_size_"] { + min-width: 10em; + vertical-align: baseline; +} + +.options-media-php .small-text[name*="_size_"] { + margin: 0 0 1em; +} + +.wp-generate-pw { + margin-top: 1em; +} + +.wp-pwd { + margin-top: 1em; +} + +#misc-publishing-actions label { + vertical-align: baseline; +} + +#pass-strength-result { + background-color: #f0f0f1; + border: 1px solid #dcdcde; + color: #1d2327; + margin: -1px 1px 5px; + padding: 3px 5px; + text-align: center; + width: 25em; + box-sizing: border-box; + opacity: 0; +} + +#pass-strength-result.short { + background-color: #ffabaf; + border-color: #e65054; + opacity: 1; +} + +#pass-strength-result.bad { + background-color: #facfd2; + border-color: #f86368; + opacity: 1; +} + +#pass-strength-result.good { + background-color: #f5e6ab; + border-color: #f0c33c; + opacity: 1; +} + +#pass-strength-result.strong { + background-color: #b8e6bf; + border-color: #68de7c; + opacity: 1; +} + +.password-input-wrapper input { + font-family: Consolas, Monaco, monospace; +} + +#pass1.short, #pass1-text.short { + border-color: #e65054; +} + +#pass1.bad, #pass1-text.bad { + border-color: #f86368; +} + +#pass1.good, #pass1-text.good { + border-color: #f0c33c; +} + +#pass1.strong, #pass1-text.strong { + border-color: #68de7c; +} + +.pw-weak { + display: none; +} + +.indicator-hint { + padding-top: 8px; +} + +.wp-pwd [type="text"], +.wp-pwd [type="password"] { + margin-bottom: 0; + /* Same height as the buttons */ + min-height: 30px; +} + +/* Hide the Edge "reveal password" native button */ +.wp-pwd input::-ms-reveal { + display: none; +} + +#pass1-text, +.show-password #pass1 { + display: none; +} + +#pass1-text::-ms-clear { + display: none; +} + +.show-password #pass1-text { + display: inline-block; +} + +p.search-box { + float: right; + margin: 0; +} + +.network-admin.themes-php p.search-box { + clear: left; +} + +.search-box input[name="s"], +.tablenav .search-plugins input[name="s"], +.tagsdiv .newtag { + float: left; + margin: 0 4px 0 0; +} + +.js.plugins-php .search-box .wp-filter-search { + margin: 0; + width: 280px; +} + +input[type="text"].ui-autocomplete-loading, +input[type="email"].ui-autocomplete-loading { + background-image: url(../images/loading.gif); + background-repeat: no-repeat; + background-position: right center; + visibility: visible; +} + +input.ui-autocomplete-input.open { + border-bottom-color: transparent; +} + +ul#add-to-blog-users { + margin: 0 0 0 14px; +} + +.ui-autocomplete { + padding: 0; + margin: 0; + list-style: none; + position: absolute; + z-index: 10000; + border: 1px solid #4f94d4; + box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8); + background-color: #fff; +} + +.ui-autocomplete li { + margin-bottom: 0; + padding: 4px 10px; + white-space: nowrap; + text-align: left; + cursor: pointer; +} + +/* Colors for the wplink toolbar autocomplete. */ +.ui-autocomplete .ui-state-focus { + background-color: #dcdcde; +} + +/* Colors for the tags autocomplete. */ +.wp-tags-autocomplete .ui-state-focus, +.wp-tags-autocomplete [aria-selected="true"] { + background-color: #2271b1; + color: #fff; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +/*------------------------------------------------------------------------------ + 15.0 - Comments Screen +------------------------------------------------------------------------------*/ + +.form-table { + border-collapse: collapse; + margin-top: 0.5em; + width: 100%; + clear: both; +} + +.form-table, +.form-table td, +.form-table th, +.form-table td p { + font-size: 14px; +} + +.form-table td { + margin-bottom: 9px; + padding: 15px 10px; + line-height: 1.3; + vertical-align: middle; +} + +.form-table th, +.form-wrap label { + color: #1d2327; + font-weight: 400; + text-shadow: none; + vertical-align: baseline; +} + +.form-table th { + vertical-align: top; + text-align: left; + padding: 20px 10px 20px 0; + width: 200px; + line-height: 1.3; + font-weight: 600; +} + +.form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */ +.form-table .td-full { + width: auto; + padding: 20px 10px 20px 0; + font-weight: 400; +} + +.form-table td p { + margin-top: 4px; + margin-bottom: 0; +} + +.form-table .date-time-doc { + margin-top: 1em; +} + +.form-table p.timezone-info { + margin: 1em 0; +} + +.form-table td fieldset label { + margin: 0.35em 0 0.5em !important; + display: inline-block; +} + +.form-table td fieldset p label { + margin-top: 0 !important; +} + +.form-table td fieldset label, +.form-table td fieldset p, +.form-table td fieldset li { + line-height: 1.4; +} + +.form-table input.tog, +.form-table input[type="radio"] { + margin-top: -4px; + margin-right: 4px; + float: none; +} + +.form-table .pre { + padding: 8px; + margin: 0; +} + +table.form-table td .updated { + font-size: 13px; +} + +table.form-table td .updated p { + font-size: 13px; + margin: 0.3em 0; +} + +/*------------------------------------------------------------------------------ + 18.0 - Users +------------------------------------------------------------------------------*/ + +#profile-page .form-table textarea { + width: 500px; + margin-bottom: 6px; +} + +#profile-page .form-table #rich_editing { + margin-right: 5px +} + +#your-profile legend { + font-size: 22px; +} + +#display_name { + width: 15em; +} + +#adduser .form-field input, +#createuser .form-field input { + width: 25em; +} + +.color-option { + display: inline-block; + width: 24%; + padding: 5px 15px 15px; + box-sizing: border-box; + margin-bottom: 3px; +} + +.color-option:hover, +.color-option.selected { + background: #dcdcde; +} + +.color-palette { + width: 100%; + border-spacing: 0; + border-collapse: collapse; +} +.color-palette td { + height: 20px; + padding: 0; + border: none; +} + +.color-option { + cursor: pointer; +} + +.create-application-password .form-field { + max-width: 25em; +} + +.create-application-password label { + font-weight: 600; +} + +.create-application-password p.submit { + margin-bottom: 0; + padding-bottom: 0; + display: block; +} + +#application-passwords-section .notice { + margin-top: 20px; + margin-bottom: 0; +} + +.application-password-display input.code { + width: 19em; +} + +.auth-app-card.card { + max-width: 768px; +} + +.authorize-application-php .form-wrap p { + display: block; +} + +/*------------------------------------------------------------------------------ + 19.0 - Tools +------------------------------------------------------------------------------*/ + +.tool-box .title { + margin: 8px 0; + font-size: 18px; + font-weight: 400; + line-height: 24px; +} + +.label-responsive { + vertical-align: middle; +} + +#export-filters p { + margin: 0 0 1em; +} + +#export-filters p.submit { + margin: 7px 0 5px; +} + +/* Card styles */ + +.card { + position: relative; + margin-top: 20px; + padding: 0.7em 2em 1em; + min-width: 255px; + max-width: 520px; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; + box-sizing: border-box; +} + +/* Press this styles */ + +.pressthis h4 { + margin: 2em 0 1em; +} + +.pressthis textarea { + width: 100%; + font-size: 1em; +} + +#pressthis-code-wrap { + overflow: auto; +} + +.pressthis-bookmarklet-wrapper { + margin: 20px 0 8px; + vertical-align: top; + position: relative; + z-index: 1; +} + +.pressthis-bookmarklet, +.pressthis-bookmarklet:hover, +.pressthis-bookmarklet:focus, +.pressthis-bookmarklet:active { + display: inline-block; + position: relative; + cursor: move; + color: #2c3338; + background: #dcdcde; + border-radius: 5px; + border: 1px solid #c3c4c7; + font-style: normal; + line-height: 16px; + font-size: 14px; + text-decoration: none; +} + +.pressthis-bookmarklet:active { + outline: none; +} + +.pressthis-bookmarklet:after { + content: ""; + width: 70%; + height: 55%; + z-index: -1; + position: absolute; + right: 10px; + bottom: 9px; + background: transparent; + transform: skew(20deg) rotate(6deg); + box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); +} + +.pressthis-bookmarklet:hover:after { + transform: skew(20deg) rotate(9deg); + box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); +} + +.pressthis-bookmarklet span { + display: inline-block; + margin: 0; + padding: 0 12px 8px 9px; +} + +.pressthis-bookmarklet span:before { + color: #787c82; + font: normal 20px/1 dashicons; + content: "\f157"; + position: relative; + display: inline-block; + top: 4px; + margin-right: 4px; +} + +.pressthis-js-toggle { + margin-left: 10px; + padding: 0; + height: auto; + vertical-align: top; +} + +/* to override the button class being applied */ +.pressthis-js-toggle.button.button { + margin-left: 10px; + padding: 0; + height: auto; + vertical-align: top; +} + +.pressthis-js-toggle .dashicons { + margin: 5px 8px 6px 7px; + color: #50575e; +} + +/*------------------------------------------------------------------------------ + 20.0 - Settings +------------------------------------------------------------------------------*/ + +.timezone-info code { + white-space: nowrap; +} + +.defaultavatarpicker .avatar { + margin: 2px 0; + vertical-align: middle; +} + +.options-general-php .date-time-text { + display: inline-block; + min-width: 10em; +} + +.options-general-php input.small-text { + width: 56px; + margin: -2px 0; +} + +.options-general-php .spinner { + float: none; + margin: -3px 3px 0; +} + +.settings-php .language-install-spinner, +.options-general-php .language-install-spinner { + display: inline-block; + float: none; + margin: -3px 5px 0; + vertical-align: middle; +} + +.form-table.permalink-structure .available-structure-tags li { + float: left; + margin-right: 5px; +} + +/*------------------------------------------------------------------------------ + 21.0 - Network Admin +------------------------------------------------------------------------------*/ + +.setup-php textarea { + max-width: 100%; +} + +.form-field #site-address { + max-width: 25em; +} + +.form-field #domain { + max-width: 22em; +} + +.form-field #site-title, +.form-field #admin-email, +.form-field #path, +.form-field #blog_registered, +.form-field #blog_last_updated { + max-width: 25em; +} + +.form-field #path { + margin-bottom: 5px; +} + +#search-users, +#search-sites { + max-width: 60%; +} + +/*------------------------------------------------------------------------------ + Credentials check dialog for Install and Updates +------------------------------------------------------------------------------*/ + +.request-filesystem-credentials-dialog { + display: none; + /* The customizer uses visibility: hidden on the body for full-overlays. */ + visibility: visible; +} + +.request-filesystem-credentials-dialog .notification-dialog { + top: 10%; + max-height: 85%; +} + +.request-filesystem-credentials-dialog-content { + margin: 25px; +} + +#request-filesystem-credentials-title { + font-size: 1.3em; + margin: 1em 0; +} + +.request-filesystem-credentials-form legend { + font-size: 1em; + padding: 1.33em 0; + font-weight: 600; +} + +.request-filesystem-credentials-form input[type="text"], +.request-filesystem-credentials-form input[type="password"] { + display: block; +} + +.request-filesystem-credentials-dialog input[type="text"], +.request-filesystem-credentials-dialog input[type="password"] { + width: 100%; +} + +.request-filesystem-credentials-form .field-title { + font-weight: 600; +} + +.request-filesystem-credentials-dialog label[for="hostname"], +.request-filesystem-credentials-dialog label[for="public_key"], +.request-filesystem-credentials-dialog label[for="private_key"] { + display: block; + margin-bottom: 1em; +} + +.request-filesystem-credentials-dialog .ftp-username, +.request-filesystem-credentials-dialog .ftp-password { + float: left; + width: 48%; +} + +.request-filesystem-credentials-dialog .ftp-password { + margin-left: 4%; +} + +.request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons { + text-align: right; +} + +.request-filesystem-credentials-dialog label[for="ftp"] { + margin-right: 10px; +} + +.request-filesystem-credentials-dialog #auth-keys-desc { + margin-bottom: 0; +} + +#request-filesystem-credentials-dialog .button:not(:last-child) { + margin-right: 10px; +} + +#request-filesystem-credentials-form .cancel-button { + display: none; +} + +#request-filesystem-credentials-dialog .cancel-button { + display: inline; +} + +.request-filesystem-credentials-dialog .ftp-username, +.request-filesystem-credentials-dialog .ftp-password { + float: none; + width: auto; +} + +.request-filesystem-credentials-dialog .ftp-username { + margin-bottom: 1em; +} + +.request-filesystem-credentials-dialog .ftp-password { + margin: 0; +} + +.request-filesystem-credentials-dialog .ftp-password em { + color: #8c8f94; +} + +.request-filesystem-credentials-dialog label { + display: block; + line-height: 1.5; + margin-bottom: 1em; +} + +.request-filesystem-credentials-form legend { + padding-bottom: 0; +} + +.request-filesystem-credentials-form #ssh-keys legend { + font-size: 1.3em; +} + +.request-filesystem-credentials-form .notice { + margin: 0 0 20px; + clear: both; +} + +/*------------------------------------------------------------------------------ + Privacy Policy settings screen +------------------------------------------------------------------------------*/ +.tools-privacy-policy-page form { + margin-bottom: 1.3em; +} + +.tools-privacy-policy-page input.button { + margin: 0 1px 0 6px; +} + +.tools-privacy-policy-page select { + margin: 0 1px 0.5em 6px; +} + +.tools-privacy-edit { + margin: 1.5em 0; +} + +.tools-privacy-policy-page span { + line-height: 2; +} + +.privacy_requests .column-email { + width: 40%; +} + +.privacy_requests .column-type { + text-align: center; +} + +.privacy_requests thead td:first-child, +.privacy_requests tfoot td:first-child { + border-left: 4px solid #fff; +} + +.privacy_requests tbody th { + border-left: 4px solid #fff; + background: #fff; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.privacy_requests .row-actions { + color: #787c82; +} + +.privacy_requests .row-actions.processing { + position: static; +} + +.privacy_requests tbody .has-request-results th { + box-shadow: none; +} + +.privacy_requests tbody .request-results th .notice { + margin: 0 0 5px; +} + +.privacy_requests tbody td { + background: #fff; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.privacy_requests tbody .has-request-results td { + box-shadow: none; +} + +.privacy_requests .next_steps .button { + word-wrap: break-word; + white-space: normal; +} + +.privacy_requests .status-request-confirmed th, +.privacy_requests .status-request-confirmed td { + background-color: #fff; + border-left-color: #72aee6; +} + +.privacy_requests .status-request-failed th, +.privacy_requests .status-request-failed td { + background-color: #f6f7f7; + border-left-color: #d63638; +} + +.privacy_requests .export_personal_data_failed a { + vertical-align: baseline; +} + +.status-label { + font-weight: 600; +} + +.status-label.status-request-pending { + font-weight: 400; + font-style: italic; + color: #646970; +} + +.status-label.status-request-failed { + color: #d63638; + font-weight: 600; +} + +.wp-privacy-request-form { + clear: both; +} + +.wp-privacy-request-form-field { + margin: 1.5em 0; +} + +.wp-privacy-request-form input { + margin: 0; +} + +.email-personal-data::before { + display: inline-block; + font: normal 20px/1 dashicons; + margin: 3px 5px 0 -2px; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.email-personal-data--sending::before { + color: #d63638; + content: "\f463"; + animation: rotation 2s infinite linear; +} + +.email-personal-data--sent::before { + color: #68de7c; + content: "\f147"; +} + + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 782px) { + /* Input Elements */ + textarea { + -webkit-appearance: none; + } + + input[type="text"], + input[type="password"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="email"], + input[type="month"], + input[type="number"], + input[type="search"], + input[type="tel"], + input[type="time"], + input[type="url"], + input[type="week"] { + -webkit-appearance: none; + padding: 3px 10px; + /* Only necessary for IE11 */ + min-height: 40px; + } + + ::-webkit-datetime-edit { + line-height: 1.875; /* 30px */ + } + + input[type="checkbox"], + .widefat th input[type="checkbox"], + .widefat thead td input[type="checkbox"], + .widefat tfoot td input[type="checkbox"] { + -webkit-appearance: none; + } + + .widefat th input[type="checkbox"], + .widefat thead td input[type="checkbox"], + .widefat tfoot td input[type="checkbox"] { + margin-bottom: 8px; + } + + input[type="checkbox"]:checked:before, + .widefat th input[type="checkbox"]:before, + .widefat thead td input[type="checkbox"]:before, + .widefat tfoot td input[type="checkbox"]:before { + width: 1.875rem; + height: 1.875rem; + margin: -0.1875rem -0.3125rem; + } + + input[type="radio"], + input[type="checkbox"] { + height: 1.5625rem; + width: 1.5625rem; + } + + .wp-admin p input[type="checkbox"], + .wp-admin p input[type="radio"] { + margin-top: -0.1875rem; + } + + input[type="radio"]:checked:before { + vertical-align: middle; + width: 0.5625rem; + height: 0.5625rem; + margin: 0.4375rem; + line-height: 0.76190476; + } + + .wp-upload-form input[type="submit"] { + margin-top: 10px; + } + + .wp-core-ui select, + .wp-admin .form-table select { + min-height: 40px; + font-size: 16px; + line-height: 1.625; /* 26px */ + padding: 5px 24px 5px 8px; + } + + .wp-admin .button-cancel { + margin-bottom: 0; + padding: 2px 0; + font-size: 14px; + vertical-align: middle; + } + + #adduser .form-field input, + #createuser .form-field input { + width: 100%; + } + + .form-table { + box-sizing: border-box; + } + + .form-table th, + .form-table td, + .label-responsive { + display: block; + width: auto; + vertical-align: middle; + } + + .label-responsive { + margin: 0.5em 0; + } + + .export-filters li { + margin-bottom: 0; + } + + .form-table .color-palette td { + display: table-cell; + width: 15px; + } + + .form-table table.color-palette { + margin-right: 10px; + } + + textarea, + input { + font-size: 16px; + } + + .form-table td input[type="text"], + .form-table td input[type="email"], + .form-table td input[type="password"], + .form-table td select, + .form-table td textarea, + .form-table span.description, + #profile-page .form-table textarea { + width: 100%; + display: block; + max-width: none; + box-sizing: border-box; + } + + .form-table .form-required.form-invalid td:after { + float: right; + margin: -30px 3px 0 0; + } + + input[type="text"].small-text, + input[type="search"].small-text, + input[type="password"].small-text, + input[type="number"].small-text, + input[type="number"].small-text, + .form-table input[type="text"].small-text { + width: auto; + max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */ + display: inline; + padding: 3px 6px; + margin: 0 3px; + } + + .form-table .regular-text ~ input[type="text"].small-text { + margin-top: 5px; + } + + #pass-strength-result { + width: 100%; + box-sizing: border-box; + padding: 8px; + } + + p.search-box { + float: none; + position: absolute; + bottom: 0; + width: 98%; + height: 90px; + margin-bottom: 20px; + } + + p.search-box input[name="s"] { + float: none; + width: 100%; + margin-bottom: 10px; + vertical-align: middle; + } + + p.search-box input[type="submit"] { + margin-bottom: 10px; + } + + .form-table span.description { + display: inline; + padding: 4px 0 0; + line-height: 1.4; + font-size: 14px; + } + + .form-table th { + padding: 10px 0 0; + border-bottom: 0; + } + + .form-table td { + margin-bottom: 0; + padding: 4px 0 6px; + } + + .form-table.permalink-structure td code { + margin-left: 32px; + display: inline-block; + } + + .form-table.permalink-structure td input[type="text"] { + margin-left: 32px; + margin-top: 4px; + width: 96%; + } + + .form-table input.regular-text { + width: 100%; + } + + .form-table label { + font-size: 14px; + } + + .background-position-control .button-group > label { + font-size: 0; + } + + .form-table fieldset label { + display: block; + } + + #utc-time, + #local-time { + display: block; + float: none; + margin-top: 0.5em; + } + + .form-field #domain { + max-width: none; + } + + /* New Password */ + .wp-pwd { + position: relative; + } + + /* Needs higher specificity than normal input type text and password. */ + #profile-page .form-table #pass1 { + padding-right: 90px; + } + + .wp-pwd button.button { + background: transparent; + border: 1px solid transparent; + box-shadow: none; + line-height: 2; + margin: 0; + padding: 5px 9px; + position: absolute; + right: 0; + top: 0; + width: 2.375rem; + height: 2.375rem; + min-width: 40px; + min-height: 40px; + } + + .wp-pwd button.wp-hide-pw { + right: 2.5rem; + } + + .wp-pwd button.button:hover, + .wp-pwd button.button:focus { + background: transparent; + } + + .wp-pwd button.button:active { + background: transparent; + box-shadow: none; + transform: none; + } + + .wp-pwd .button .text { + display: none; + } + + .wp-pwd [type="text"], + .wp-pwd [type="password"] { + line-height: 2; + padding-right: 5rem; + } + + .wp-cancel-pw .dashicons-no { + display: inline-block; + } + + .options-general-php input[type="text"].small-text { + max-width: 6.25em; + margin: 0; + } + + /* Privacy Policy settings screen */ + .tools-privacy-policy-page form.wp-create-privacy-page { + margin-bottom: 1em; + } + + .tools-privacy-policy-page input#set-page, + .tools-privacy-policy-page select { + margin: 10px 0 0; + } + + .tools-privacy-policy-page .wp-create-privacy-page span { + display: block; + margin-bottom: 1em; + } + + .tools-privacy-policy-page .wp-create-privacy-page .button { + margin-left: 0; + } + + .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) { + display: table-cell; + } + + .wp-list-table.privacy_requests.widefat th input, + .wp-list-table.privacy_requests.widefat thead td input { + margin-left: 5px; + } + + .wp-privacy-request-form-field input[type="text"] { + width: 100%; + margin-bottom: 10px; + vertical-align: middle; + } + + .regular-text { + max-width: 100%; + } +} + +@media only screen and (max-width: 768px) { + .form-field input[type="text"], + .form-field input[type="email"], + .form-field input[type="password"], + .form-field select, + .form-field textarea { + width: 99%; + } + + .form-wrap .form-field { + padding: 0; + } +} + +@media only screen and (max-height: 480px), screen and (max-width: 450px) { + /* Request Credentials / File Editor Warning */ + .request-filesystem-credentials-dialog .notification-dialog, + .file-editor-warning .notification-dialog { + width: 100%; + height: 100%; + max-height: 100%; + position: fixed; + top: 0; + margin: 0; + left: 0; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Color Picker Options */ + .color-option { + width: 49%; + } +} + +@media only screen and (max-width: 320px) { + .options-general-php .date-time-text.date-time-custom-text { + min-width: 0; + margin-right: 0.5em; + } +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +} diff --git a/tools/storybook/wordpress/css/forms.min.css b/tools/storybook/wordpress/css/forms.min.css new file mode 100644 index 00000000000..d212ee50a4b --- /dev/null +++ b/tools/storybook/wordpress/css/forms.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +button,input,select,textarea{box-sizing:border-box;font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea{font-size:14px}textarea{overflow:auto;padding:2px 6px;line-height:1.42857143;resize:vertical}label{cursor:pointer}input,select{margin:0 1px}textarea.code{padding:4px 6px 1px}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{box-shadow:0 0 0 transparent;border-radius:4px;border:1px solid #8c8f94;background-color:#fff;color:#2c3338}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{padding:0 8px;line-height:2;min-height:30px}::-webkit-datetime-edit{line-height:1.85714286}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#2271b1;box-shadow:0 0 0 1px #2271b1;outline:2px solid transparent}input[type=email],input[type=url]{direction:ltr}input[type=checkbox],input[type=radio]{border:1px solid #8c8f94;border-radius:4px;background:#fff;color:#50575e;clear:none;cursor:pointer;display:inline-block;line-height:0;height:1rem;margin:-.25rem .25rem 0 0;outline:0;padding:0!important;text-align:center;vertical-align:middle;width:1rem;min-width:1rem;-webkit-appearance:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);transition:.05s border-color ease-in-out}input[type=radio]:checked+label:before{color:#8c8f94}.wp-core-ui input[type=reset]:active,.wp-core-ui input[type=reset]:hover{color:#135e96}.wp-admin p input[type=checkbox],.wp-admin p input[type=radio],td>input[type=checkbox]{margin-top:0}.wp-admin p label input[type=checkbox]{margin-top:-4px}.wp-admin p label input[type=radio]{margin-top:-2px}input[type=radio]{border-radius:50%;margin-right:.25rem;line-height:.71428571}input[type=checkbox]:checked::before,input[type=radio]:checked::before{float:left;display:inline-block;vertical-align:middle;width:1rem;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E");margin:-.1875rem 0 0 -.25rem;height:1.3125rem;width:1.3125rem}input[type=radio]:checked::before{content:"";border-radius:50%;width:.5rem;height:.5rem;margin:.1875rem;background-color:#3582c4;line-height:1.14285714}@-moz-document url-prefix(){.form-table input.tog,input[type=checkbox],input[type=radio]{margin-bottom:-1px}}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-decoration{display:none}.wp-admin input[type=file]{padding:3px 0;cursor:pointer}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#f0f0f1}::-webkit-input-placeholder{color:#646970}::-moz-placeholder{color:#646970;opacity:1}:-ms-input-placeholder{color:#646970}.form-invalid .form-required,.form-invalid .form-required:focus,.form-invalid.form-required input,.form-invalid.form-required input:focus,.form-invalid.form-required select,.form-invalid.form-required select:focus{border-color:#d63638!important;box-shadow:0 0 2px rgba(214,54,56,.8)}.form-table .form-required.form-invalid td:after{content:"\f534";font:normal 20px/1 dashicons;color:#d63638;margin-left:-25px;vertical-align:middle}.form-table .form-required.user-pass1-wrap.form-invalid td:after{content:""}.form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after{content:"\f534";font:normal 20px/1 dashicons;color:#d63638;margin:0 6px 0 -29px;vertical-align:middle}.form-input-tip{color:#646970}input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:rgba(255,255,255,.5);border-color:rgba(220,220,222,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(44,51,56,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:0 0;box-shadow:none;cursor:default}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}.wp-core-ui select{font-size:14px;line-height:2;color:#2c3338;border-color:#8c8f94;box-shadow:none;border-radius:3px;padding:0 24px 0 8px;min-height:30px;max-width:25rem;-webkit-appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;background-size:16px 16px;cursor:pointer;vertical-align:middle}.wp-core-ui select:hover{color:#2271b1}.wp-core-ui select:focus{border-color:#2271b1;color:#0a4b78;box-shadow:0 0 0 1px #2271b1}.wp-core-ui select:active{border-color:#8c8f94;box-shadow:none}.wp-core-ui select.disabled,.wp-core-ui select:disabled{color:#a7aaad;border-color:#dcdcde;background-color:#f6f7f7;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E');box-shadow:none;text-shadow:0 1px 0 #fff;cursor:default;transform:none}.wp-core-ui select:-moz-focusring{color:transparent;text-shadow:0 0 0 #0a4b78}.wp-core-ui select::-ms-value{background:0 0;color:#50575e}.wp-core-ui select:hover::-ms-value{color:#2271b1}.wp-core-ui select:focus::-ms-value{color:#0a4b78}.wp-core-ui select.disabled::-ms-value,.wp-core-ui select:disabled::-ms-value{color:#a7aaad}.wp-core-ui select::-ms-expand{display:none}.wp-admin .button-cancel{display:inline-block;min-height:28px;padding:0 5px;line-height:2}.meta-box-sortables select{max-width:100%}.meta-box-sortables input{vertical-align:middle}.misc-pub-post-status select{margin-top:0}.wp-core-ui select[multiple]{height:auto;padding-right:8px;background:#fff}.submit{padding:1.5em 0;margin:5px 0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;border:none}form p.submit a.cancel:hover{text-decoration:none}p.submit{text-align:left;max-width:100%;margin-top:20px;padding-top:10px}.textright p.submit{border:none;text-align:right}table.form-table+input+input+p.submit,table.form-table+input+p.submit,table.form-table+p.submit{border-top:none;padding-top:0}#major-publishing-actions input,#minor-publishing-actions .preview,#minor-publishing-actions input{text-align:center}input.all-options,textarea.all-options{width:250px}input.large-text,textarea.large-text{width:99%}.regular-text{width:25em}input.small-text{width:50px;padding:0 6px}label input.small-text{margin-top:-4px}input[type=number].small-text{width:65px;padding-right:0}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px;padding-right:0}#doaction,#doaction2,#post-query-submit{margin:0 8px 0 0}.no-js input#changeit2,.no-js input#doaction2,.no-js label[for=bulk-action-selector-bottom],.no-js label[for=new_role2],.no-js select#bulk-action-selector-bottom,.no-js select#new_role2{display:none}.tablenav .actions select{float:left;margin-right:6px;max-width:12.5rem}#timezone_string option{margin-left:1em}.wp-cancel-pw>.dashicons,.wp-hide-pw>.dashicons{position:relative;top:3px;width:1.25rem;height:1.25rem;top:.25rem;font-size:20px}.wp-cancel-pw .dashicons-no{display:none}#your-profile label+a,label{vertical-align:middle}#your-profile label+a,fieldset label{vertical-align:middle}.options-media-php [for*="_size_"]{min-width:10em;vertical-align:baseline}.options-media-php .small-text[name*="_size_"]{margin:0 0 1em}.wp-generate-pw{margin-top:1em}.wp-pwd{margin-top:1em}#misc-publishing-actions label{vertical-align:baseline}#pass-strength-result{background-color:#f0f0f1;border:1px solid #dcdcde;color:#1d2327;margin:-1px 1px 5px;padding:3px 5px;text-align:center;width:25em;box-sizing:border-box;opacity:0}#pass-strength-result.short{background-color:#ffabaf;border-color:#e65054;opacity:1}#pass-strength-result.bad{background-color:#facfd2;border-color:#f86368;opacity:1}#pass-strength-result.good{background-color:#f5e6ab;border-color:#f0c33c;opacity:1}#pass-strength-result.strong{background-color:#b8e6bf;border-color:#68de7c;opacity:1}.password-input-wrapper input{font-family:Consolas,Monaco,monospace}#pass1-text.short,#pass1.short{border-color:#e65054}#pass1-text.bad,#pass1.bad{border-color:#f86368}#pass1-text.good,#pass1.good{border-color:#f0c33c}#pass1-text.strong,#pass1.strong{border-color:#68de7c}.pw-weak{display:none}.indicator-hint{padding-top:8px}.wp-pwd [type=password],.wp-pwd [type=text]{margin-bottom:0;min-height:30px}.wp-pwd input::-ms-reveal{display:none}#pass1-text,.show-password #pass1{display:none}#pass1-text::-ms-clear{display:none}.show-password #pass1-text{display:inline-block}p.search-box{float:right;margin:0}.network-admin.themes-php p.search-box{clear:left}.search-box input[name="s"],.tablenav .search-plugins input[name="s"],.tagsdiv .newtag{float:left;margin:0 4px 0 0}.js.plugins-php .search-box .wp-filter-search{margin:0;width:280px}input[type=email].ui-autocomplete-loading,input[type=text].ui-autocomplete-loading{background-image:url(../images/loading.gif);background-repeat:no-repeat;background-position:right center;visibility:visible}input.ui-autocomplete-input.open{border-bottom-color:transparent}ul#add-to-blog-users{margin:0 0 0 14px}.ui-autocomplete{padding:0;margin:0;list-style:none;position:absolute;z-index:10000;border:1px solid #4f94d4;box-shadow:0 1px 2px rgba(79,148,212,.8);background-color:#fff}.ui-autocomplete li{margin-bottom:0;padding:4px 10px;white-space:nowrap;text-align:left;cursor:pointer}.ui-autocomplete .ui-state-focus{background-color:#dcdcde}.wp-tags-autocomplete .ui-state-focus,.wp-tags-autocomplete [aria-selected=true]{background-color:#2271b1;color:#fff;outline:2px solid transparent}.form-table{border-collapse:collapse;margin-top:.5em;width:100%;clear:both}.form-table,.form-table td,.form-table td p,.form-table th{font-size:14px}.form-table td{margin-bottom:9px;padding:15px 10px;line-height:1.3;vertical-align:middle}.form-table th,.form-wrap label{color:#1d2327;font-weight:400;text-shadow:none;vertical-align:baseline}.form-table th{vertical-align:top;text-align:left;padding:20px 10px 20px 0;width:200px;line-height:1.3;font-weight:600}.form-table .td-full,.form-table th.th-full{width:auto;padding:20px 10px 20px 0;font-weight:400}.form-table td p{margin-top:4px;margin-bottom:0}.form-table .date-time-doc{margin-top:1em}.form-table p.timezone-info{margin:1em 0}.form-table td fieldset label{margin:.35em 0 .5em!important;display:inline-block}.form-table td fieldset p label{margin-top:0!important}.form-table td fieldset label,.form-table td fieldset li,.form-table td fieldset p{line-height:1.4}.form-table input.tog,.form-table input[type=radio]{margin-top:-4px;margin-right:4px;float:none}.form-table .pre{padding:8px;margin:0}table.form-table td .updated{font-size:13px}table.form-table td .updated p{font-size:13px;margin:.3em 0}#profile-page .form-table textarea{width:500px;margin-bottom:6px}#profile-page .form-table #rich_editing{margin-right:5px}#your-profile legend{font-size:22px}#display_name{width:15em}#adduser .form-field input,#createuser .form-field input{width:25em}.color-option{display:inline-block;width:24%;padding:5px 15px 15px;box-sizing:border-box;margin-bottom:3px}.color-option.selected,.color-option:hover{background:#dcdcde}.color-palette{width:100%;border-spacing:0;border-collapse:collapse}.color-palette td{height:20px;padding:0;border:none}.color-option{cursor:pointer}.create-application-password .form-field{max-width:25em}.create-application-password label{font-weight:600}.create-application-password p.submit{margin-bottom:0;padding-bottom:0;display:block}#application-passwords-section .notice{margin-top:20px;margin-bottom:0}.application-password-display input.code{width:19em}.auth-app-card.card{max-width:768px}.authorize-application-php .form-wrap p{display:block}.tool-box .title{margin:8px 0;font-size:18px;font-weight:400;line-height:24px}.label-responsive{vertical-align:middle}#export-filters p{margin:0 0 1em}#export-filters p.submit{margin:7px 0 5px}.card{position:relative;margin-top:20px;padding:.7em 2em 1em;min-width:255px;max-width:520px;border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;box-sizing:border-box}.pressthis h4{margin:2em 0 1em}.pressthis textarea{width:100%;font-size:1em}#pressthis-code-wrap{overflow:auto}.pressthis-bookmarklet-wrapper{margin:20px 0 8px;vertical-align:top;position:relative;z-index:1}.pressthis-bookmarklet,.pressthis-bookmarklet:active,.pressthis-bookmarklet:focus,.pressthis-bookmarklet:hover{display:inline-block;position:relative;cursor:move;color:#2c3338;background:#dcdcde;border-radius:5px;border:1px solid #c3c4c7;font-style:normal;line-height:16px;font-size:14px;text-decoration:none}.pressthis-bookmarklet:active{outline:0}.pressthis-bookmarklet:after{content:"";width:70%;height:55%;z-index:-1;position:absolute;right:10px;bottom:9px;background:0 0;transform:skew(20deg) rotate(6deg);box-shadow:0 10px 8px rgba(0,0,0,.6)}.pressthis-bookmarklet:hover:after{transform:skew(20deg) rotate(9deg);box-shadow:0 10px 8px rgba(0,0,0,.7)}.pressthis-bookmarklet span{display:inline-block;margin:0;padding:0 12px 8px 9px}.pressthis-bookmarklet span:before{color:#787c82;font:normal 20px/1 dashicons;content:"\f157";position:relative;display:inline-block;top:4px;margin-right:4px}.pressthis-js-toggle{margin-left:10px;padding:0;height:auto;vertical-align:top}.pressthis-js-toggle.button.button{margin-left:10px;padding:0;height:auto;vertical-align:top}.pressthis-js-toggle .dashicons{margin:5px 8px 6px 7px;color:#50575e}.timezone-info code{white-space:nowrap}.defaultavatarpicker .avatar{margin:2px 0;vertical-align:middle}.options-general-php .date-time-text{display:inline-block;min-width:10em}.options-general-php input.small-text{width:56px;margin:-2px 0}.options-general-php .spinner{float:none;margin:-3px 3px 0}.options-general-php .language-install-spinner,.settings-php .language-install-spinner{display:inline-block;float:none;margin:-3px 5px 0;vertical-align:middle}.form-table.permalink-structure .available-structure-tags li{float:left;margin-right:5px}.setup-php textarea{max-width:100%}.form-field #site-address{max-width:25em}.form-field #domain{max-width:22em}.form-field #admin-email,.form-field #blog_last_updated,.form-field #blog_registered,.form-field #path,.form-field #site-title{max-width:25em}.form-field #path{margin-bottom:5px}#search-sites,#search-users{max-width:60%}.request-filesystem-credentials-dialog{display:none;visibility:visible}.request-filesystem-credentials-dialog .notification-dialog{top:10%;max-height:85%}.request-filesystem-credentials-dialog-content{margin:25px}#request-filesystem-credentials-title{font-size:1.3em;margin:1em 0}.request-filesystem-credentials-form legend{font-size:1em;padding:1.33em 0;font-weight:600}.request-filesystem-credentials-form input[type=password],.request-filesystem-credentials-form input[type=text]{display:block}.request-filesystem-credentials-dialog input[type=password],.request-filesystem-credentials-dialog input[type=text]{width:100%}.request-filesystem-credentials-form .field-title{font-weight:600}.request-filesystem-credentials-dialog label[for=hostname],.request-filesystem-credentials-dialog label[for=private_key],.request-filesystem-credentials-dialog label[for=public_key]{display:block;margin-bottom:1em}.request-filesystem-credentials-dialog .ftp-password,.request-filesystem-credentials-dialog .ftp-username{float:left;width:48%}.request-filesystem-credentials-dialog .ftp-password{margin-left:4%}.request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons{text-align:right}.request-filesystem-credentials-dialog label[for=ftp]{margin-right:10px}.request-filesystem-credentials-dialog #auth-keys-desc{margin-bottom:0}#request-filesystem-credentials-dialog .button:not(:last-child){margin-right:10px}#request-filesystem-credentials-form .cancel-button{display:none}#request-filesystem-credentials-dialog .cancel-button{display:inline}.request-filesystem-credentials-dialog .ftp-password,.request-filesystem-credentials-dialog .ftp-username{float:none;width:auto}.request-filesystem-credentials-dialog .ftp-username{margin-bottom:1em}.request-filesystem-credentials-dialog .ftp-password{margin:0}.request-filesystem-credentials-dialog .ftp-password em{color:#8c8f94}.request-filesystem-credentials-dialog label{display:block;line-height:1.5;margin-bottom:1em}.request-filesystem-credentials-form legend{padding-bottom:0}.request-filesystem-credentials-form #ssh-keys legend{font-size:1.3em}.request-filesystem-credentials-form .notice{margin:0 0 20px;clear:both}.tools-privacy-policy-page form{margin-bottom:1.3em}.tools-privacy-policy-page input.button{margin:0 1px 0 6px}.tools-privacy-policy-page select{margin:0 1px .5em 6px}.tools-privacy-edit{margin:1.5em 0}.tools-privacy-policy-page span{line-height:2}.privacy_requests .column-email{width:40%}.privacy_requests .column-type{text-align:center}.privacy_requests tfoot td:first-child,.privacy_requests thead td:first-child{border-left:4px solid #fff}.privacy_requests tbody th{border-left:4px solid #fff;background:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.privacy_requests .row-actions{color:#787c82}.privacy_requests .row-actions.processing{position:static}.privacy_requests tbody .has-request-results th{box-shadow:none}.privacy_requests tbody .request-results th .notice{margin:0 0 5px}.privacy_requests tbody td{background:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.privacy_requests tbody .has-request-results td{box-shadow:none}.privacy_requests .next_steps .button{word-wrap:break-word;white-space:normal}.privacy_requests .status-request-confirmed td,.privacy_requests .status-request-confirmed th{background-color:#fff;border-left-color:#72aee6}.privacy_requests .status-request-failed td,.privacy_requests .status-request-failed th{background-color:#f6f7f7;border-left-color:#d63638}.privacy_requests .export_personal_data_failed a{vertical-align:baseline}.status-label{font-weight:600}.status-label.status-request-pending{font-weight:400;font-style:italic;color:#646970}.status-label.status-request-failed{color:#d63638;font-weight:600}.wp-privacy-request-form{clear:both}.wp-privacy-request-form-field{margin:1.5em 0}.wp-privacy-request-form input{margin:0}.email-personal-data::before{display:inline-block;font:normal 20px/1 dashicons;margin:3px 5px 0 -2px;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.email-personal-data--sending::before{color:#d63638;content:"\f463";animation:rotation 2s infinite linear}.email-personal-data--sent::before{color:#68de7c;content:"\f147"}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{-webkit-appearance:none;padding:3px 10px;min-height:40px}::-webkit-datetime-edit{line-height:1.875}.widefat tfoot td input[type=checkbox],.widefat th input[type=checkbox],.widefat thead td input[type=checkbox],input[type=checkbox]{-webkit-appearance:none}.widefat tfoot td input[type=checkbox],.widefat th input[type=checkbox],.widefat thead td input[type=checkbox]{margin-bottom:8px}.widefat tfoot td input[type=checkbox]:before,.widefat th input[type=checkbox]:before,.widefat thead td input[type=checkbox]:before,input[type=checkbox]:checked:before{width:1.875rem;height:1.875rem;margin:-.1875rem -.3125rem}input[type=checkbox],input[type=radio]{height:1.5625rem;width:1.5625rem}.wp-admin p input[type=checkbox],.wp-admin p input[type=radio]{margin-top:-.1875rem}input[type=radio]:checked:before{vertical-align:middle;width:.5625rem;height:.5625rem;margin:.4375rem;line-height:.76190476}.wp-upload-form input[type=submit]{margin-top:10px}.wp-admin .form-table select,.wp-core-ui select{min-height:40px;font-size:16px;line-height:1.625;padding:5px 24px 5px 8px}.wp-admin .button-cancel{margin-bottom:0;padding:2px 0;font-size:14px;vertical-align:middle}#adduser .form-field input,#createuser .form-field input{width:100%}.form-table{box-sizing:border-box}.form-table td,.form-table th,.label-responsive{display:block;width:auto;vertical-align:middle}.label-responsive{margin:.5em 0}.export-filters li{margin-bottom:0}.form-table .color-palette td{display:table-cell;width:15px}.form-table table.color-palette{margin-right:10px}input,textarea{font-size:16px}#profile-page .form-table textarea,.form-table span.description,.form-table td input[type=email],.form-table td input[type=password],.form-table td input[type=text],.form-table td select,.form-table td textarea{width:100%;display:block;max-width:none;box-sizing:border-box}.form-table .form-required.form-invalid td:after{float:right;margin:-30px 3px 0 0}.form-table input[type=text].small-text,input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:4.375em;display:inline;padding:3px 6px;margin:0 3px}.form-table .regular-text~input[type=text].small-text{margin-top:5px}#pass-strength-result{width:100%;box-sizing:border-box;padding:8px}p.search-box{float:none;position:absolute;bottom:0;width:98%;height:90px;margin-bottom:20px}p.search-box input[name="s"]{float:none;width:100%;margin-bottom:10px;vertical-align:middle}p.search-box input[type=submit]{margin-bottom:10px}.form-table span.description{display:inline;padding:4px 0 0;line-height:1.4;font-size:14px}.form-table th{padding:10px 0 0;border-bottom:0}.form-table td{margin-bottom:0;padding:4px 0 6px}.form-table.permalink-structure td code{margin-left:32px;display:inline-block}.form-table.permalink-structure td input[type=text]{margin-left:32px;margin-top:4px;width:96%}.form-table input.regular-text{width:100%}.form-table label{font-size:14px}.background-position-control .button-group>label{font-size:0}.form-table fieldset label{display:block}#local-time,#utc-time{display:block;float:none;margin-top:.5em}.form-field #domain{max-width:none}.wp-pwd{position:relative}#profile-page .form-table #pass1{padding-right:90px}.wp-pwd button.button{background:0 0;border:1px solid transparent;box-shadow:none;line-height:2;margin:0;padding:5px 9px;position:absolute;right:0;top:0;width:2.375rem;height:2.375rem;min-width:40px;min-height:40px}.wp-pwd button.wp-hide-pw{right:2.5rem}.wp-pwd button.button:focus,.wp-pwd button.button:hover{background:0 0}.wp-pwd button.button:active{background:0 0;box-shadow:none;transform:none}.wp-pwd .button .text{display:none}.wp-pwd [type=password],.wp-pwd [type=text]{line-height:2;padding-right:5rem}.wp-cancel-pw .dashicons-no{display:inline-block}.options-general-php input[type=text].small-text{max-width:6.25em;margin:0}.tools-privacy-policy-page form.wp-create-privacy-page{margin-bottom:1em}.tools-privacy-policy-page input#set-page,.tools-privacy-policy-page select{margin:10px 0 0}.tools-privacy-policy-page .wp-create-privacy-page span{display:block;margin-bottom:1em}.tools-privacy-policy-page .wp-create-privacy-page .button{margin-left:0}.wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column){display:table-cell}.wp-list-table.privacy_requests.widefat th input,.wp-list-table.privacy_requests.widefat thead td input{margin-left:5px}.wp-privacy-request-form-field input[type=text]{width:100%;margin-bottom:10px;vertical-align:middle}.regular-text{max-width:100%}}@media only screen and (max-width:768px){.form-field input[type=email],.form-field input[type=password],.form-field input[type=text],.form-field select,.form-field textarea{width:99%}.form-wrap .form-field{padding:0}}@media only screen and (max-height:480px),screen and (max-width:450px){.file-editor-warning .notification-dialog,.request-filesystem-credentials-dialog .notification-dialog{width:100%;height:100%;max-height:100%;position:fixed;top:0;margin:0;left:0}}@media screen and (max-width:600px){.color-option{width:49%}}@media only screen and (max-width:320px){.options-general-php .date-time-text.date-time-custom-text{min-width:0;margin-right:.5em}}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(359deg)}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/install-rtl.css b/tools/storybook/wordpress/css/install-rtl.css new file mode 100644 index 00000000000..e7b9466da81 --- /dev/null +++ b/tools/storybook/wordpress/css/install-rtl.css @@ -0,0 +1,380 @@ +/*! This file is auto-generated */ +html { + background: #f0f0f1; + margin: 0 20px; +} + +body { + background: #fff; + border: 1px solid #c3c4c7; + color: #3c434a; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin: 140px auto 25px; + padding: 20px 20px 10px; + max-width: 700px; + -webkit-font-smoothing: subpixel-antialiased; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +a { + color: #2271b1; +} + +a:hover, +a:active { + color: #135e96; +} + +a:focus { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +h1, h2 { + border-bottom: 1px solid #dcdcde; + clear: both; + color: #646970; + font-size: 24px; + padding: 0 0 7px; + font-weight: 400; +} + +h3 { + font-size: 16px; +} + +p, li, dd, dt { + padding-bottom: 2px; + font-size: 14px; + line-height: 1.5; +} + +code, .code { + font-family: Consolas, Monaco, monospace; +} + +ul, ol, dl { + padding: 5px 22px 5px 5px; +} + +a img { + border: 0 +} +abbr { + border: 0; + font-variant: normal; +} + +fieldset { + border: 0; + padding: 0; + margin: 0; +} + +label { + cursor: pointer; +} + +#logo { + margin: -130px auto 25px; + padding: 0 0 25px; + width: 84px; + height: 84px; + overflow: hidden; + background-image: url(../images/w-logo-blue.png?ver=20131202); + background-image: none, url(../images/wordpress-logo.svg?ver=20131107); + background-size: 84px; + background-position: center top; + background-repeat: no-repeat; + color: #3c434a; /* same as login.css */ + font-size: 20px; + font-weight: 400; + line-height: 1.3em; + text-decoration: none; + text-align: center; + text-indent: -9999px; + outline: none; +} + +.step { + margin: 20px 0 15px; +} +.step, th { + text-align: right; + padding: 0; +} +.language-chooser.wp-core-ui .step .button.button-large { + font-size: 14px; +} +textarea { + border: 1px solid #dcdcde; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + width: 100%; + box-sizing: border-box; +} + +.form-table { + border-collapse: collapse; + margin-top: 1em; + width: 100%; +} + +.form-table td { + margin-bottom: 9px; + padding: 10px 0 10px 20px; + font-size: 14px; + vertical-align: top +} + +.form-table th { + font-size: 14px; + text-align: right; + padding: 10px 0 10px 20px; + width: 140px; + vertical-align: top; +} + +.form-table code { + line-height: 1.28571428; + font-size: 14px; +} + +.form-table p { + margin: 4px 0 0; + font-size: 11px; +} + +.form-table input { + line-height: 1.33333333; + font-size: 15px; + padding: 3px 5px; +} + +input, +submit { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +.form-table input[type=text], +.form-table input[type=email], +.form-table input[type=url], +.form-table input[type=password], +#pass-strength-result { + width: 218px; +} + +.form-table th p { + font-weight: 400; +} + +.form-table.install-success th, +.form-table.install-success td { + vertical-align: middle; + padding: 16px 0 16px 20px; +} + +.form-table.install-success td p { + margin: 0; + font-size: 14px; +} + +.form-table.install-success td code { + margin: 0; + font-size: 18px; +} + +#error-page { + margin-top: 50px; +} + +#error-page p { + font-size: 14px; + line-height: 1.28571428; + margin: 25px 0 20px; +} + +#error-page code, .code { + font-family: Consolas, Monaco, monospace; +} + +.message { + border-right: 4px solid #d63638; + padding: .7em .6em; + background-color: #fcf0f1; +} + +/* rtl:ignore */ +#dbname, +#uname, +#pwd, +#dbhost, +#prefix, +#user_login, +#admin_email, +#pass1, +#pass2 { + direction: ltr; +} + + +/* localization */ +body.rtl, +.rtl textarea, +.rtl input, +.rtl submit { + font-family: Tahoma, sans-serif; +} + +:lang(he-il) body.rtl, +:lang(he-il) .rtl textarea, +:lang(he-il) .rtl input, +:lang(he-il) .rtl submit { + font-family: Arial, sans-serif; +} + +@media only screen and (max-width: 799px) { + body { + margin-top: 115px; + } + #logo a { + margin: -125px auto 30px; + } +} + +@media screen and (max-width: 782px) { + + .form-table { + margin-top: 0; + } + + .form-table th, + .form-table td { + display: block; + width: auto; + vertical-align: middle; + } + + .form-table th { + padding: 20px 0 0; + } + + .form-table td { + padding: 5px 0; + border: 0; + margin: 0; + } + + textarea, + input { + font-size: 16px; + } + + .form-table td input[type="text"], + .form-table td input[type="email"], + .form-table td input[type="url"], + .form-table td input[type="password"], + .form-table td select, + .form-table td textarea, + .form-table span.description { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + box-sizing: border-box; + } + + .wp-pwd #pass1 { + padding-left: 50px; + } + + .wp-pwd .button.wp-hide-pw { + left: 0; + } + + #pass-strength-result { + width: 100%; + } +} + +body.language-chooser { + max-width: 300px; +} + +.language-chooser select { + padding: 8px; + width: 100%; + display: block; + border: 1px solid #dcdcde; + background: #fff; + color: #2c3338; + font-size: 16px; + font-family: Arial, sans-serif; + font-weight: 400; +} + +.language-chooser select:focus { + color: #2c3338; +} + +.language-chooser select option:hover, +.language-chooser select option:focus { + color: #0a4b78; +} + +.language-chooser .step { + text-align: left; +} + +.screen-reader-input, +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; +} + +.spinner { + background: url(../images/spinner.gif) no-repeat; + background-size: 20px 20px; + visibility: hidden; + opacity: 0.7; + filter: alpha(opacity=70); + width: 20px; + height: 20px; + margin: 2px 5px 0; +} + +.step .spinner { + display: inline-block; + vertical-align: middle; + margin-left: 15px; +} + +.button.hide-if-no-js, +.hide-if-no-js { + display: none; +} + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + + .spinner { + background-image: url(../images/spinner-2x.gif); + } + +} diff --git a/tools/storybook/wordpress/css/install-rtl.min.css b/tools/storybook/wordpress/css/install-rtl.min.css new file mode 100644 index 00000000000..37ec3a1fb7d --- /dev/null +++ b/tools/storybook/wordpress/css/install-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +html{background:#f0f0f1;margin:0 20px}body{background:#fff;border:1px solid #c3c4c7;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:140px auto 25px;padding:20px 20px 10px;max-width:700px;-webkit-font-smoothing:subpixel-antialiased;box-shadow:0 1px 1px rgba(0,0,0,.04)}a{color:#2271b1}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}h1,h2{border-bottom:1px solid #dcdcde;clear:both;color:#646970;font-size:24px;padding:0 0 7px;font-weight:400}h3{font-size:16px}dd,dt,li,p{padding-bottom:2px;font-size:14px;line-height:1.5}.code,code{font-family:Consolas,Monaco,monospace}dl,ol,ul{padding:5px 22px 5px 5px}a img{border:0}abbr{border:0;font-variant:normal}fieldset{border:0;padding:0;margin:0}label{cursor:pointer}#logo{margin:-130px auto 25px;padding:0 0 25px;width:84px;height:84px;overflow:hidden;background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;font-size:20px;font-weight:400;line-height:1.3em;text-decoration:none;text-align:center;text-indent:-9999px;outline:0}.step{margin:20px 0 15px}.step,th{text-align:right;padding:0}.language-chooser.wp-core-ui .step .button.button-large{font-size:14px}textarea{border:1px solid #dcdcde;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;width:100%;box-sizing:border-box}.form-table{border-collapse:collapse;margin-top:1em;width:100%}.form-table td{margin-bottom:9px;padding:10px 0 10px 20px;font-size:14px;vertical-align:top}.form-table th{font-size:14px;text-align:right;padding:10px 0 10px 20px;width:140px;vertical-align:top}.form-table code{line-height:1.28571428;font-size:14px}.form-table p{margin:4px 0 0;font-size:11px}.form-table input{line-height:1.33333333;font-size:15px;padding:3px 5px}input,submit{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}#pass-strength-result,.form-table input[type=email],.form-table input[type=password],.form-table input[type=text],.form-table input[type=url]{width:218px}.form-table th p{font-weight:400}.form-table.install-success td,.form-table.install-success th{vertical-align:middle;padding:16px 0 16px 20px}.form-table.install-success td p{margin:0;font-size:14px}.form-table.install-success td code{margin:0;font-size:18px}#error-page{margin-top:50px}#error-page p{font-size:14px;line-height:1.28571428;margin:25px 0 20px}#error-page code,.code{font-family:Consolas,Monaco,monospace}.message{border-right:4px solid #d63638;padding:.7em .6em;background-color:#fcf0f1}#admin_email,#dbhost,#dbname,#pass1,#pass2,#prefix,#pwd,#uname,#user_login{direction:ltr}.rtl input,.rtl submit,.rtl textarea,body.rtl{font-family:Tahoma,sans-serif}:lang(he-il) .rtl input,:lang(he-il) .rtl submit,:lang(he-il) .rtl textarea,:lang(he-il) body.rtl{font-family:Arial,sans-serif}@media only screen and (max-width:799px){body{margin-top:115px}#logo a{margin:-125px auto 30px}}@media screen and (max-width:782px){.form-table{margin-top:0}.form-table td,.form-table th{display:block;width:auto;vertical-align:middle}.form-table th{padding:20px 0 0}.form-table td{padding:5px 0;border:0;margin:0}input,textarea{font-size:16px}.form-table span.description,.form-table td input[type=email],.form-table td input[type=password],.form-table td input[type=text],.form-table td input[type=url],.form-table td select,.form-table td textarea{width:100%;font-size:16px;line-height:1.5;padding:7px 10px;display:block;max-width:none;box-sizing:border-box}.wp-pwd #pass1{padding-left:50px}.wp-pwd .button.wp-hide-pw{left:0}#pass-strength-result{width:100%}}body.language-chooser{max-width:300px}.language-chooser select{padding:8px;width:100%;display:block;border:1px solid #dcdcde;background:#fff;color:#2c3338;font-size:16px;font-family:Arial,sans-serif;font-weight:400}.language-chooser select:focus{color:#2c3338}.language-chooser select option:focus,.language-chooser select option:hover{color:#0a4b78}.language-chooser .step{text-align:left}.screen-reader-input,.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.spinner{background:url(../images/spinner.gif) no-repeat;background-size:20px 20px;visibility:hidden;opacity:.7;width:20px;height:20px;margin:2px 5px 0}.step .spinner{display:inline-block;vertical-align:middle;margin-left:15px}.button.hide-if-no-js,.hide-if-no-js{display:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.spinner{background-image:url(../images/spinner-2x.gif)}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/install.css b/tools/storybook/wordpress/css/install.css new file mode 100644 index 00000000000..62a596f0fe1 --- /dev/null +++ b/tools/storybook/wordpress/css/install.css @@ -0,0 +1,379 @@ +html { + background: #f0f0f1; + margin: 0 20px; +} + +body { + background: #fff; + border: 1px solid #c3c4c7; + color: #3c434a; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin: 140px auto 25px; + padding: 20px 20px 10px; + max-width: 700px; + -webkit-font-smoothing: subpixel-antialiased; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +a { + color: #2271b1; +} + +a:hover, +a:active { + color: #135e96; +} + +a:focus { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +h1, h2 { + border-bottom: 1px solid #dcdcde; + clear: both; + color: #646970; + font-size: 24px; + padding: 0 0 7px; + font-weight: 400; +} + +h3 { + font-size: 16px; +} + +p, li, dd, dt { + padding-bottom: 2px; + font-size: 14px; + line-height: 1.5; +} + +code, .code { + font-family: Consolas, Monaco, monospace; +} + +ul, ol, dl { + padding: 5px 5px 5px 22px; +} + +a img { + border: 0 +} +abbr { + border: 0; + font-variant: normal; +} + +fieldset { + border: 0; + padding: 0; + margin: 0; +} + +label { + cursor: pointer; +} + +#logo { + margin: -130px auto 25px; + padding: 0 0 25px; + width: 84px; + height: 84px; + overflow: hidden; + background-image: url(../images/w-logo-blue.png?ver=20131202); + background-image: none, url(../images/wordpress-logo.svg?ver=20131107); + background-size: 84px; + background-position: center top; + background-repeat: no-repeat; + color: #3c434a; /* same as login.css */ + font-size: 20px; + font-weight: 400; + line-height: 1.3em; + text-decoration: none; + text-align: center; + text-indent: -9999px; + outline: none; +} + +.step { + margin: 20px 0 15px; +} +.step, th { + text-align: left; + padding: 0; +} +.language-chooser.wp-core-ui .step .button.button-large { + font-size: 14px; +} +textarea { + border: 1px solid #dcdcde; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + width: 100%; + box-sizing: border-box; +} + +.form-table { + border-collapse: collapse; + margin-top: 1em; + width: 100%; +} + +.form-table td { + margin-bottom: 9px; + padding: 10px 20px 10px 0; + font-size: 14px; + vertical-align: top +} + +.form-table th { + font-size: 14px; + text-align: left; + padding: 10px 20px 10px 0; + width: 140px; + vertical-align: top; +} + +.form-table code { + line-height: 1.28571428; + font-size: 14px; +} + +.form-table p { + margin: 4px 0 0; + font-size: 11px; +} + +.form-table input { + line-height: 1.33333333; + font-size: 15px; + padding: 3px 5px; +} + +input, +submit { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +.form-table input[type=text], +.form-table input[type=email], +.form-table input[type=url], +.form-table input[type=password], +#pass-strength-result { + width: 218px; +} + +.form-table th p { + font-weight: 400; +} + +.form-table.install-success th, +.form-table.install-success td { + vertical-align: middle; + padding: 16px 20px 16px 0; +} + +.form-table.install-success td p { + margin: 0; + font-size: 14px; +} + +.form-table.install-success td code { + margin: 0; + font-size: 18px; +} + +#error-page { + margin-top: 50px; +} + +#error-page p { + font-size: 14px; + line-height: 1.28571428; + margin: 25px 0 20px; +} + +#error-page code, .code { + font-family: Consolas, Monaco, monospace; +} + +.message { + border-left: 4px solid #d63638; + padding: .7em .6em; + background-color: #fcf0f1; +} + +/* rtl:ignore */ +#dbname, +#uname, +#pwd, +#dbhost, +#prefix, +#user_login, +#admin_email, +#pass1, +#pass2 { + direction: ltr; +} + + +/* localization */ +body.rtl, +.rtl textarea, +.rtl input, +.rtl submit { + font-family: Tahoma, sans-serif; +} + +:lang(he-il) body.rtl, +:lang(he-il) .rtl textarea, +:lang(he-il) .rtl input, +:lang(he-il) .rtl submit { + font-family: Arial, sans-serif; +} + +@media only screen and (max-width: 799px) { + body { + margin-top: 115px; + } + #logo a { + margin: -125px auto 30px; + } +} + +@media screen and (max-width: 782px) { + + .form-table { + margin-top: 0; + } + + .form-table th, + .form-table td { + display: block; + width: auto; + vertical-align: middle; + } + + .form-table th { + padding: 20px 0 0; + } + + .form-table td { + padding: 5px 0; + border: 0; + margin: 0; + } + + textarea, + input { + font-size: 16px; + } + + .form-table td input[type="text"], + .form-table td input[type="email"], + .form-table td input[type="url"], + .form-table td input[type="password"], + .form-table td select, + .form-table td textarea, + .form-table span.description { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + box-sizing: border-box; + } + + .wp-pwd #pass1 { + padding-right: 50px; + } + + .wp-pwd .button.wp-hide-pw { + right: 0; + } + + #pass-strength-result { + width: 100%; + } +} + +body.language-chooser { + max-width: 300px; +} + +.language-chooser select { + padding: 8px; + width: 100%; + display: block; + border: 1px solid #dcdcde; + background: #fff; + color: #2c3338; + font-size: 16px; + font-family: Arial, sans-serif; + font-weight: 400; +} + +.language-chooser select:focus { + color: #2c3338; +} + +.language-chooser select option:hover, +.language-chooser select option:focus { + color: #0a4b78; +} + +.language-chooser .step { + text-align: right; +} + +.screen-reader-input, +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; +} + +.spinner { + background: url(../images/spinner.gif) no-repeat; + background-size: 20px 20px; + visibility: hidden; + opacity: 0.7; + filter: alpha(opacity=70); + width: 20px; + height: 20px; + margin: 2px 5px 0; +} + +.step .spinner { + display: inline-block; + vertical-align: middle; + margin-right: 15px; +} + +.button.hide-if-no-js, +.hide-if-no-js { + display: none; +} + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + + .spinner { + background-image: url(../images/spinner-2x.gif); + } + +} diff --git a/tools/storybook/wordpress/css/install.min.css b/tools/storybook/wordpress/css/install.min.css new file mode 100644 index 00000000000..6cbb6dcb747 --- /dev/null +++ b/tools/storybook/wordpress/css/install.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +html{background:#f0f0f1;margin:0 20px}body{background:#fff;border:1px solid #c3c4c7;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:140px auto 25px;padding:20px 20px 10px;max-width:700px;-webkit-font-smoothing:subpixel-antialiased;box-shadow:0 1px 1px rgba(0,0,0,.04)}a{color:#2271b1}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}h1,h2{border-bottom:1px solid #dcdcde;clear:both;color:#646970;font-size:24px;padding:0 0 7px;font-weight:400}h3{font-size:16px}dd,dt,li,p{padding-bottom:2px;font-size:14px;line-height:1.5}.code,code{font-family:Consolas,Monaco,monospace}dl,ol,ul{padding:5px 5px 5px 22px}a img{border:0}abbr{border:0;font-variant:normal}fieldset{border:0;padding:0;margin:0}label{cursor:pointer}#logo{margin:-130px auto 25px;padding:0 0 25px;width:84px;height:84px;overflow:hidden;background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;font-size:20px;font-weight:400;line-height:1.3em;text-decoration:none;text-align:center;text-indent:-9999px;outline:0}.step{margin:20px 0 15px}.step,th{text-align:left;padding:0}.language-chooser.wp-core-ui .step .button.button-large{font-size:14px}textarea{border:1px solid #dcdcde;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;width:100%;box-sizing:border-box}.form-table{border-collapse:collapse;margin-top:1em;width:100%}.form-table td{margin-bottom:9px;padding:10px 20px 10px 0;font-size:14px;vertical-align:top}.form-table th{font-size:14px;text-align:left;padding:10px 20px 10px 0;width:140px;vertical-align:top}.form-table code{line-height:1.28571428;font-size:14px}.form-table p{margin:4px 0 0;font-size:11px}.form-table input{line-height:1.33333333;font-size:15px;padding:3px 5px}input,submit{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}#pass-strength-result,.form-table input[type=email],.form-table input[type=password],.form-table input[type=text],.form-table input[type=url]{width:218px}.form-table th p{font-weight:400}.form-table.install-success td,.form-table.install-success th{vertical-align:middle;padding:16px 20px 16px 0}.form-table.install-success td p{margin:0;font-size:14px}.form-table.install-success td code{margin:0;font-size:18px}#error-page{margin-top:50px}#error-page p{font-size:14px;line-height:1.28571428;margin:25px 0 20px}#error-page code,.code{font-family:Consolas,Monaco,monospace}.message{border-left:4px solid #d63638;padding:.7em .6em;background-color:#fcf0f1}#admin_email,#dbhost,#dbname,#pass1,#pass2,#prefix,#pwd,#uname,#user_login{direction:ltr}.rtl input,.rtl submit,.rtl textarea,body.rtl{font-family:Tahoma,sans-serif}:lang(he-il) .rtl input,:lang(he-il) .rtl submit,:lang(he-il) .rtl textarea,:lang(he-il) body.rtl{font-family:Arial,sans-serif}@media only screen and (max-width:799px){body{margin-top:115px}#logo a{margin:-125px auto 30px}}@media screen and (max-width:782px){.form-table{margin-top:0}.form-table td,.form-table th{display:block;width:auto;vertical-align:middle}.form-table th{padding:20px 0 0}.form-table td{padding:5px 0;border:0;margin:0}input,textarea{font-size:16px}.form-table span.description,.form-table td input[type=email],.form-table td input[type=password],.form-table td input[type=text],.form-table td input[type=url],.form-table td select,.form-table td textarea{width:100%;font-size:16px;line-height:1.5;padding:7px 10px;display:block;max-width:none;box-sizing:border-box}.wp-pwd #pass1{padding-right:50px}.wp-pwd .button.wp-hide-pw{right:0}#pass-strength-result{width:100%}}body.language-chooser{max-width:300px}.language-chooser select{padding:8px;width:100%;display:block;border:1px solid #dcdcde;background:#fff;color:#2c3338;font-size:16px;font-family:Arial,sans-serif;font-weight:400}.language-chooser select:focus{color:#2c3338}.language-chooser select option:focus,.language-chooser select option:hover{color:#0a4b78}.language-chooser .step{text-align:right}.screen-reader-input,.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.spinner{background:url(../images/spinner.gif) no-repeat;background-size:20px 20px;visibility:hidden;opacity:.7;width:20px;height:20px;margin:2px 5px 0}.step .spinner{display:inline-block;vertical-align:middle;margin-right:15px}.button.hide-if-no-js,.hide-if-no-js{display:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.spinner{background-image:url(../images/spinner-2x.gif)}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/l10n-rtl.css b/tools/storybook/wordpress/css/l10n-rtl.css new file mode 100644 index 00000000000..eaefa4eddc2 --- /dev/null +++ b/tools/storybook/wordpress/css/l10n-rtl.css @@ -0,0 +1,121 @@ +/*! This file is auto-generated */ +/*------------------------------------------------------------------------------ + 27.0 - Localization +------------------------------------------------------------------------------*/ + +/* RTL except Hebrew (see below): Tahoma as the first font; */ +body.rtl, +body.rtl .press-this a.wp-switch-editor { + font-family: Tahoma, Arial, sans-serif; +} + +/* Arial is best for RTL headings. */ +.rtl h1, +.rtl h2, +.rtl h3, +.rtl h4, +.rtl h5, +.rtl h6 { + font-family: Arial, sans-serif; + font-weight: 600; +} + +/* he_IL: Remove Tahoma from the font stack. Arial is best for Hebrew. */ +body.locale-he-il, +body.locale-he-il .press-this a.wp-switch-editor { + font-family: Arial, sans-serif; +} + +/* he_IL: Have be bold rather than italic. */ +.locale-he-il em { + font-style: normal; + font-weight: 600; +} + +/* zh_CN: Remove italic properties. */ +.locale-zh-cn .howto, +.locale-zh-cn .tablenav .displaying-num, +.locale-zh-cn .js .input-with-default-title, +.locale-zh-cn .link-to-original, +.locale-zh-cn .inline-edit-row fieldset span.title, +.locale-zh-cn .inline-edit-row fieldset span.checkbox-title, +.locale-zh-cn #utc-time, +.locale-zh-cn #local-time, +.locale-zh-cn p.install-help, +.locale-zh-cn p.help, +.locale-zh-cn p.description, +.locale-zh-cn span.description, +.locale-zh-cn .form-wrap p { + font-style: normal; +} + +/* zh_CN: Enlarge dashboard widget 'Configure' link */ +.locale-zh-cn .hdnle a { font-size: 12px; } + +/* zn_CH: Enlarge font size, set font-size: normal */ +.locale-zh-cn form.upgrade .hint { font-style: normal; font-size: 100%; } + +/* zh_CN: Enlarge font-size. */ +.locale-zh-cn #sort-buttons { font-size: 1em !important; } + +/* de_DE: Text needs more space for translation */ +.locale-de-de #customize-header-actions .button, +.locale-de-de-formal #customize-header-actions .button { + padding: 0 5px 1px; /* default 0 10px 1px */ +} +.locale-de-de #customize-header-actions .spinner, +.locale-de-de-formal #customize-header-actions .spinner { + margin: 16px 3px 0; /* default 16px 4px 0 5px */ +} + +/* ru_RU: Text needs more room to breathe. */ +.locale-ru-ru #adminmenu { + width: inherit; /* back-compat for pre-3.2 */ +} +.locale-ru-ru #adminmenu, +.locale-ru-ru #wpbody { + margin-right: 0; /* back-compat for pre-3.2 */ +} +.locale-ru-ru .inline-edit-row fieldset label span.title, +.locale-ru-ru .inline-edit-row fieldset.inline-edit-date legend { + width: 8em; /* default 6em */ +} +.locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap, +.locale-ru-ru .inline-edit-row fieldset .timestamp-wrap { + margin-right: 8em; /* default 6em */ +} +.locale-ru-ru.post-php .tagsdiv .newtag, +.locale-ru-ru.post-new-php .tagsdiv .newtag { + width: 165px; /* default 180px - 15px */ +} +.locale-ru-ru.press-this .posting { + margin-left: 277px; /* default 252px + 25px */ +} +.locale-ru-ru .press-this-sidebar { + width: 265px; /* default 240px + 25px */ +} +.locale-ru-ru #customize-header-actions .button { + padding: 0 5px 1px; /* default 0 10px 1px */ +} +.locale-ru-ru #customize-header-actions .spinner { + margin: 16px 3px 0; /* default 16px 4px 0 5px */ +} + +/* lt_LT: QuickEdit */ +.locale-lt-lt .inline-edit-row fieldset label span.title, +.locale-lt-lt .inline-edit-row fieldset.inline-edit-date legend { + width: 8em; /* default 6em */ +} +.locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap, +.locale-lt-lt .inline-edit-row fieldset .timestamp-wrap { + margin-right: 8em; /* default 6em */ +} + +@media screen and (max-width: 782px) { + .locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap, + .locale-ru-ru .inline-edit-row fieldset .timestamp-wrap, + .locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap, + .locale-lt-lt .inline-edit-row fieldset .timestamp-wrap { + margin-right: 0; + } +} diff --git a/tools/storybook/wordpress/css/l10n-rtl.min.css b/tools/storybook/wordpress/css/l10n-rtl.min.css new file mode 100644 index 00000000000..3ac11f8e2d3 --- /dev/null +++ b/tools/storybook/wordpress/css/l10n-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body.rtl,body.rtl .press-this a.wp-switch-editor{font-family:Tahoma,Arial,sans-serif}.rtl h1,.rtl h2,.rtl h3,.rtl h4,.rtl h5,.rtl h6{font-family:Arial,sans-serif;font-weight:600}body.locale-he-il,body.locale-he-il .press-this a.wp-switch-editor{font-family:Arial,sans-serif}.locale-he-il em{font-style:normal;font-weight:600}.locale-zh-cn #local-time,.locale-zh-cn #utc-time,.locale-zh-cn .form-wrap p,.locale-zh-cn .howto,.locale-zh-cn .inline-edit-row fieldset span.checkbox-title,.locale-zh-cn .inline-edit-row fieldset span.title,.locale-zh-cn .js .input-with-default-title,.locale-zh-cn .link-to-original,.locale-zh-cn .tablenav .displaying-num,.locale-zh-cn p.description,.locale-zh-cn p.help,.locale-zh-cn p.install-help,.locale-zh-cn span.description{font-style:normal}.locale-zh-cn .hdnle a{font-size:12px}.locale-zh-cn form.upgrade .hint{font-style:normal;font-size:100%}.locale-zh-cn #sort-buttons{font-size:1em!important}.locale-de-de #customize-header-actions .button,.locale-de-de-formal #customize-header-actions .button{padding:0 5px 1px}.locale-de-de #customize-header-actions .spinner,.locale-de-de-formal #customize-header-actions .spinner{margin:16px 3px 0}.locale-ru-ru #adminmenu{width:inherit}.locale-ru-ru #adminmenu,.locale-ru-ru #wpbody{margin-right:0}.locale-ru-ru .inline-edit-row fieldset label span.title,.locale-ru-ru .inline-edit-row fieldset.inline-edit-date legend{width:8em}.locale-ru-ru .inline-edit-row fieldset .timestamp-wrap,.locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap{margin-right:8em}.locale-ru-ru.post-new-php .tagsdiv .newtag,.locale-ru-ru.post-php .tagsdiv .newtag{width:165px}.locale-ru-ru.press-this .posting{margin-left:277px}.locale-ru-ru .press-this-sidebar{width:265px}.locale-ru-ru #customize-header-actions .button{padding:0 5px 1px}.locale-ru-ru #customize-header-actions .spinner{margin:16px 3px 0}.locale-lt-lt .inline-edit-row fieldset label span.title,.locale-lt-lt .inline-edit-row fieldset.inline-edit-date legend{width:8em}.locale-lt-lt .inline-edit-row fieldset .timestamp-wrap,.locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap{margin-right:8em}@media screen and (max-width:782px){.locale-lt-lt .inline-edit-row fieldset .timestamp-wrap,.locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap,.locale-ru-ru .inline-edit-row fieldset .timestamp-wrap,.locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap{margin-right:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/l10n.css b/tools/storybook/wordpress/css/l10n.css new file mode 100644 index 00000000000..967fb4c6c65 --- /dev/null +++ b/tools/storybook/wordpress/css/l10n.css @@ -0,0 +1,120 @@ +/*------------------------------------------------------------------------------ + 27.0 - Localization +------------------------------------------------------------------------------*/ + +/* RTL except Hebrew (see below): Tahoma as the first font; */ +body.rtl, +body.rtl .press-this a.wp-switch-editor { + font-family: Tahoma, Arial, sans-serif; +} + +/* Arial is best for RTL headings. */ +.rtl h1, +.rtl h2, +.rtl h3, +.rtl h4, +.rtl h5, +.rtl h6 { + font-family: Arial, sans-serif; + font-weight: 600; +} + +/* he_IL: Remove Tahoma from the font stack. Arial is best for Hebrew. */ +body.locale-he-il, +body.locale-he-il .press-this a.wp-switch-editor { + font-family: Arial, sans-serif; +} + +/* he_IL: Have be bold rather than italic. */ +.locale-he-il em { + font-style: normal; + font-weight: 600; +} + +/* zh_CN: Remove italic properties. */ +.locale-zh-cn .howto, +.locale-zh-cn .tablenav .displaying-num, +.locale-zh-cn .js .input-with-default-title, +.locale-zh-cn .link-to-original, +.locale-zh-cn .inline-edit-row fieldset span.title, +.locale-zh-cn .inline-edit-row fieldset span.checkbox-title, +.locale-zh-cn #utc-time, +.locale-zh-cn #local-time, +.locale-zh-cn p.install-help, +.locale-zh-cn p.help, +.locale-zh-cn p.description, +.locale-zh-cn span.description, +.locale-zh-cn .form-wrap p { + font-style: normal; +} + +/* zh_CN: Enlarge dashboard widget 'Configure' link */ +.locale-zh-cn .hdnle a { font-size: 12px; } + +/* zn_CH: Enlarge font size, set font-size: normal */ +.locale-zh-cn form.upgrade .hint { font-style: normal; font-size: 100%; } + +/* zh_CN: Enlarge font-size. */ +.locale-zh-cn #sort-buttons { font-size: 1em !important; } + +/* de_DE: Text needs more space for translation */ +.locale-de-de #customize-header-actions .button, +.locale-de-de-formal #customize-header-actions .button { + padding: 0 5px 1px; /* default 0 10px 1px */ +} +.locale-de-de #customize-header-actions .spinner, +.locale-de-de-formal #customize-header-actions .spinner { + margin: 16px 3px 0; /* default 16px 4px 0 5px */ +} + +/* ru_RU: Text needs more room to breathe. */ +.locale-ru-ru #adminmenu { + width: inherit; /* back-compat for pre-3.2 */ +} +.locale-ru-ru #adminmenu, +.locale-ru-ru #wpbody { + margin-left: 0; /* back-compat for pre-3.2 */ +} +.locale-ru-ru .inline-edit-row fieldset label span.title, +.locale-ru-ru .inline-edit-row fieldset.inline-edit-date legend { + width: 8em; /* default 6em */ +} +.locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap, +.locale-ru-ru .inline-edit-row fieldset .timestamp-wrap { + margin-left: 8em; /* default 6em */ +} +.locale-ru-ru.post-php .tagsdiv .newtag, +.locale-ru-ru.post-new-php .tagsdiv .newtag { + width: 165px; /* default 180px - 15px */ +} +.locale-ru-ru.press-this .posting { + margin-right: 277px; /* default 252px + 25px */ +} +.locale-ru-ru .press-this-sidebar { + width: 265px; /* default 240px + 25px */ +} +.locale-ru-ru #customize-header-actions .button { + padding: 0 5px 1px; /* default 0 10px 1px */ +} +.locale-ru-ru #customize-header-actions .spinner { + margin: 16px 3px 0; /* default 16px 4px 0 5px */ +} + +/* lt_LT: QuickEdit */ +.locale-lt-lt .inline-edit-row fieldset label span.title, +.locale-lt-lt .inline-edit-row fieldset.inline-edit-date legend { + width: 8em; /* default 6em */ +} +.locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap, +.locale-lt-lt .inline-edit-row fieldset .timestamp-wrap { + margin-left: 8em; /* default 6em */ +} + +@media screen and (max-width: 782px) { + .locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap, + .locale-ru-ru .inline-edit-row fieldset .timestamp-wrap, + .locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap, + .locale-lt-lt .inline-edit-row fieldset .timestamp-wrap { + margin-left: 0; + } +} diff --git a/tools/storybook/wordpress/css/l10n.min.css b/tools/storybook/wordpress/css/l10n.min.css new file mode 100644 index 00000000000..6a427f4c331 --- /dev/null +++ b/tools/storybook/wordpress/css/l10n.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body.rtl,body.rtl .press-this a.wp-switch-editor{font-family:Tahoma,Arial,sans-serif}.rtl h1,.rtl h2,.rtl h3,.rtl h4,.rtl h5,.rtl h6{font-family:Arial,sans-serif;font-weight:600}body.locale-he-il,body.locale-he-il .press-this a.wp-switch-editor{font-family:Arial,sans-serif}.locale-he-il em{font-style:normal;font-weight:600}.locale-zh-cn #local-time,.locale-zh-cn #utc-time,.locale-zh-cn .form-wrap p,.locale-zh-cn .howto,.locale-zh-cn .inline-edit-row fieldset span.checkbox-title,.locale-zh-cn .inline-edit-row fieldset span.title,.locale-zh-cn .js .input-with-default-title,.locale-zh-cn .link-to-original,.locale-zh-cn .tablenav .displaying-num,.locale-zh-cn p.description,.locale-zh-cn p.help,.locale-zh-cn p.install-help,.locale-zh-cn span.description{font-style:normal}.locale-zh-cn .hdnle a{font-size:12px}.locale-zh-cn form.upgrade .hint{font-style:normal;font-size:100%}.locale-zh-cn #sort-buttons{font-size:1em!important}.locale-de-de #customize-header-actions .button,.locale-de-de-formal #customize-header-actions .button{padding:0 5px 1px}.locale-de-de #customize-header-actions .spinner,.locale-de-de-formal #customize-header-actions .spinner{margin:16px 3px 0}.locale-ru-ru #adminmenu{width:inherit}.locale-ru-ru #adminmenu,.locale-ru-ru #wpbody{margin-left:0}.locale-ru-ru .inline-edit-row fieldset label span.title,.locale-ru-ru .inline-edit-row fieldset.inline-edit-date legend{width:8em}.locale-ru-ru .inline-edit-row fieldset .timestamp-wrap,.locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap{margin-left:8em}.locale-ru-ru.post-new-php .tagsdiv .newtag,.locale-ru-ru.post-php .tagsdiv .newtag{width:165px}.locale-ru-ru.press-this .posting{margin-right:277px}.locale-ru-ru .press-this-sidebar{width:265px}.locale-ru-ru #customize-header-actions .button{padding:0 5px 1px}.locale-ru-ru #customize-header-actions .spinner{margin:16px 3px 0}.locale-lt-lt .inline-edit-row fieldset label span.title,.locale-lt-lt .inline-edit-row fieldset.inline-edit-date legend{width:8em}.locale-lt-lt .inline-edit-row fieldset .timestamp-wrap,.locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap{margin-left:8em}@media screen and (max-width:782px){.locale-lt-lt .inline-edit-row fieldset .timestamp-wrap,.locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap,.locale-ru-ru .inline-edit-row fieldset .timestamp-wrap,.locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap{margin-left:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/list-tables-rtl.css b/tools/storybook/wordpress/css/list-tables-rtl.css new file mode 100644 index 00000000000..47375209462 --- /dev/null +++ b/tools/storybook/wordpress/css/list-tables-rtl.css @@ -0,0 +1,2247 @@ +/*! This file is auto-generated */ +.response-links { + display: block; + margin-bottom: 1em; +} + +.response-links a { + display: block; +} + +.response-links a.comments-edit-item-link { + font-weight: 600; +} + +.response-links a.comments-view-item-link { + font-size: 12px; +} + +.post-com-count-wrapper strong { + font-weight: 400; +} + +.comments-view-item-link { + display: inline-block; + clear: both; +} + +.column-response .post-com-count-wrapper, +.column-comments .post-com-count-wrapper { + white-space: nowrap; + word-wrap: normal; +} + +/* comments bubble common */ +.column-response .post-com-count, +.column-comments .post-com-count { + display: inline-block; + vertical-align: top; +} + +/* comments bubble approved */ +.column-response .post-com-count-no-comments, +.column-response .post-com-count-approved, +.column-comments .post-com-count-no-comments, +.column-comments .post-com-count-approved { + margin-top: 5px; +} + +.column-response .comment-count-no-comments, +.column-response .comment-count-approved, +.column-comments .comment-count-no-comments, +.column-comments .comment-count-approved { + box-sizing: border-box; + display: block; + padding: 0 8px; + min-width: 24px; + height: 2em; + border-radius: 5px; + background-color: #646970; + color: #fff; + font-size: 11px; + line-height: 1.90909090; + text-align: center; +} + +.column-response .post-com-count-no-comments:after, +.column-response .post-com-count-approved:after, +.column-comments .post-com-count-no-comments:after, +.column-comments .post-com-count-approved:after { + content: ""; + display: block; + margin-right: 8px; + width: 0; + height: 0; + border-top: 5px solid #646970; + border-left: 5px solid transparent; +} + +.column-response a.post-com-count-approved:hover .comment-count-approved, +.column-response a.post-com-count-approved:focus .comment-count-approved, +.column-comments a.post-com-count-approved:hover .comment-count-approved, +.column-comments a.post-com-count-approved:focus .comment-count-approved { + background: #2271b1; +} + +.column-response a.post-com-count-approved:hover:after, +.column-response a.post-com-count-approved:focus:after, +.column-comments a.post-com-count-approved:hover:after, +.column-comments a.post-com-count-approved:focus:after { + border-top-color: #2271b1; +} + +/* @todo: consider to use a single rule for these counters and the admin menu counters. */ +.column-response .post-com-count-pending, +.column-comments .post-com-count-pending { + position: relative; + right: -3px; + padding: 0 5px; + min-width: 7px; + height: 17px; + border: 2px solid #fff; + border-radius: 11px; + background: #d63638; + color: #fff; + font-size: 9px; + line-height: 1.88888888; + text-align: center; +} + +.column-response .post-com-count-no-pending, +.column-comments .post-com-count-no-pending { + display: none; +} + +/* comments */ + +.commentlist li { + padding: 1em 1em .2em; + margin: 0; + border-bottom: 1px solid #c3c4c7; +} + +.commentlist li li { + border-bottom: 0; + padding: 0; +} + +.commentlist p { + padding: 0; + margin: 0 0 .8em; +} + +#submitted-on, +.submitted-on { + color: #50575e; +} + +/* reply to comments */ +#replyrow td { + padding: 2px; +} + +#replysubmit { + margin: 0; + padding: 5px 7px 10px; + overflow: hidden; +} + +#replysubmit .reply-submit-buttons { + margin-bottom: 0; +} + +#replysubmit .button { + margin-left: 5px; +} + +#replysubmit .spinner { + float: none; + margin: -4px 0 0; +} + +#replyrow.inline-edit-row fieldset.comment-reply { + font-size: inherit; + line-height: inherit; +} + +#replyrow legend { + margin: 0; + padding: .2em 5px 0; + font-size: 13px; + line-height: 1.4; + font-weight: 600; +} + +#replyrow.inline-edit-row label { + display: inline; + vertical-align: baseline; + line-height: inherit; +} + +#edithead .inside, +#commentsdiv #edithead .inside { + float: right; + padding: 3px 5px 2px 0; + margin: 0; + text-align: center; +} + +#edithead .inside input { + width: 180px; +} + +#edithead label { + padding: 2px 0; +} + +#replycontainer { + padding: 5px; +} + +#replycontent { + height: 120px; + box-shadow: none; +} + +#replyerror { + border-color: #dcdcde; + background-color: #f6f7f7; +} + +/* @todo: is this used? */ +.commentlist .avatar { + vertical-align: text-top; +} + +#the-comment-list tr.undo, +#the-comment-list div.undo { + background-color: #f6f7f7; +} + +#the-comment-list .unapproved th, +#the-comment-list .unapproved td { + background-color: #fcf9e8; +} + +#the-comment-list .unapproved th.check-column { + border-right: 4px solid #d63638; +} + +#the-comment-list .unapproved th.check-column input { + margin-right: 4px; +} + +#the-comment-list .approve a { + color: #007017; +} + +#the-comment-list .unapprove a { + color: #996800; +} + +#the-comment-list th, +#the-comment-list td { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +#the-comment-list tr:last-child th, +#the-comment-list tr:last-child td { + box-shadow: none; +} + +#the-comment-list tr.unapproved + tr.approved th, +#the-comment-list tr.unapproved + tr.approved td { + border-top: 1px solid rgba(0, 0, 0, 0.03); +} + +/* table vim shortcuts */ +.vim-current, +.vim-current th, +.vim-current td { + background-color: #f0f6fc !important; +} + +th .comment-grey-bubble { + height: 16px; + width: 16px; +} + +th .comment-grey-bubble:before { + content: "\f101"; + font: normal 20px/.5 dashicons; + speak: never; + display: inline-block; + padding: 0; + top: 4px; + right: -4px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #3c434a; +} + +/*------------------------------------------------------------------------------ + 10.0 - List Posts (/Pages/etc) +------------------------------------------------------------------------------*/ + +table.fixed { + table-layout: fixed; +} + +.fixed .column-rating, +.fixed .column-visible { + width: 8%; +} + +.fixed .column-posts, +.fixed .column-parent, +.fixed .column-links, +.fixed .column-author, +.fixed .column-format { + width: 10%; +} + +.fixed .column-date { + width: 14%; +} + +.column-date span[title] { + -webkit-text-decoration: dotted underline; + text-decoration: dotted underline; +} + +.fixed .column-posts { + width: 74px; +} + +.fixed .column-role, +.fixed .column-posts { + -webkit-hyphens: auto; + hyphens: auto; +} + +.fixed .column-comment .comment-author { + display: none; +} + +.fixed .column-response, +.fixed .column-categories, +.fixed .column-tags, +.fixed .column-rel, +.fixed .column-role { + width: 15%; +} + +.fixed .column-slug { + width: 25%; +} + +.fixed .column-locations { + width: 35%; +} + +.fixed .column-comments { + width: 5.5em; + padding: 8px 0; + text-align: right; +} + +.fixed .column-comments .vers { + padding-right: 3px; +} + +td.column-title strong, +td.plugin-title strong { + display: block; + margin-bottom: .2em; + font-size: 14px; +} + +td.column-title p, +td.plugin-title p { + margin: 6px 0; +} + +/* Media file column */ +table.media .column-title .media-icon { + float: right; + min-height: 60px; + margin: 0 0 0 9px; +} + +table.media .column-title .media-icon img { + max-width: 60px; + height: auto; + vertical-align: top; /* Remove descender white-space. */ +} + +table.media .column-title .has-media-icon ~ .row-actions { + margin-right: 70px; /* 60px image + margin */ +} + +table.media .column-title .filename { + margin-bottom: 0.2em; +} + +/* Media Copy to clipboard row action */ +.media .row-actions .copy-to-clipboard-container { + display: inline; + position: relative; +} + +.media .row-actions .copy-to-clipboard-container .success { + position: absolute; + right: 50%; + transform: translate(50%, -100%); + background: #000; + color: #fff; + border-radius: 5px; + margin: 0; + padding: 2px 5px; +} + +/* @todo: pick a consistent list table selector */ +.wp-list-table a { + transition: none; +} + +#the-list tr:last-child td, +#the-list tr:last-child th { + border-bottom: none !important; + box-shadow: none; +} + +#comments-form .fixed .column-author { + width: 20%; +} + +#commentsdiv.postbox .inside { + margin: 0; + padding: 0; +} + +#commentsdiv .inside .row-actions { + line-height: 1.38461538; +} + +#commentsdiv .inside .column-author { + width: 25%; +} + +#commentsdiv .column-comment p { + margin: 0.6em 0; + padding: 0; +} + +#commentsdiv #replyrow td { + padding: 0; +} + +#commentsdiv p { + padding: 8px 10px; + margin: 0; +} + +#commentsdiv .comments-box { + border: 0 none; +} + +#commentsdiv .comments-box thead th, +#commentsdiv .comments-box thead td { + background: transparent; + padding: 0 7px 4px; +} + +#commentsdiv .comments-box tr:last-child td { + border-bottom: 0 none; +} + +#commentsdiv #edithead .inside input { + width: 160px; +} + +.sorting-indicator { + display: block; + visibility: hidden; + width: 10px; + height: 4px; + margin-top: 8px; + margin-right: 7px; +} + +.sorting-indicator:before { + content: "\f142"; + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + padding: 0; + top: -4px; + right: -8px; + color: #3c434a; + line-height: 0.5; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #3c434a; +} + +.column-comments .sorting-indicator:before { + top: 0; + right: -10px; +} + +th.sorted.asc .sorting-indicator:before, +th.desc:hover span.sorting-indicator:before, +th.desc a:focus span.sorting-indicator:before { + content: "\f142"; +} + +th.sorted.desc .sorting-indicator:before, +th.asc:hover span.sorting-indicator:before, +th.asc a:focus span.sorting-indicator:before { + content: "\f140"; +} + +.wp-list-table .toggle-row { + position: absolute; + left: 8px; + top: 10px; + display: none; + padding: 0; + width: 40px; + height: 40px; + border: none; + outline: none; + background: transparent; +} + +.wp-list-table .toggle-row:hover { + cursor: pointer; +} + +.wp-list-table .toggle-row:focus:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.wp-list-table .toggle-row:active { + box-shadow: none; +} + +.wp-list-table .toggle-row:before { + position: absolute; + top: -5px; + right: 10px; + border-radius: 50%; + display: block; + padding: 1px 0 1px 2px; + color: #3c434a; /* same as table headers sort arrows */ + content: "\f140"; + font: normal 20px/1 dashicons; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + speak: never; +} + +.wp-list-table .is-expanded .toggle-row:before { + content: "\f142"; +} + +.locked-indicator { + display: none; + margin-right: 6px; + height: 20px; + width: 16px; +} + +.locked-indicator-icon:before { + color: #8c8f94; + content: "\f160"; + display: inline-block; + font: normal 20px/1 dashicons; + speak: never; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.locked-info { + display: none; + margin-top: 4px; +} + +.locked-text { + vertical-align: top; +} + +.wp-locked .locked-indicator, +.wp-locked .locked-info { + display: block; +} + +tr.wp-locked .check-column label, +tr.wp-locked .check-column input[type="checkbox"], +tr.wp-locked .row-actions .inline, +tr.wp-locked .row-actions .trash { + display: none; +} + +.fixed .column-comments .sorting-indicator { + margin-top: 3px; +} + +#menu-locations-wrap .widefat { + width: 60%; +} + +.widefat th.sortable, +.widefat th.sorted { + padding: 0; +} + +th.sortable a, +th.sorted a { + display: block; + overflow: hidden; + padding: 8px; +} + +.fixed .column-comments.sortable a, +.fixed .column-comments.sorted a { + padding: 8px 0; +} + +th.sortable a span, +th.sorted a span { + float: right; + cursor: pointer; +} + +th.sorted .sorting-indicator, +th.desc:hover span.sorting-indicator, +th.desc a:focus span.sorting-indicator, +th.asc:hover span.sorting-indicator, +th.asc a:focus span.sorting-indicator { + visibility: visible; +} + +.tablenav-pages .current-page { + margin: 0 0 0 2px; + font-size: 13px; + text-align: center; +} + +.tablenav .total-pages { + margin-left: 2px; +} + +.tablenav #table-paging { + margin-right: 2px; +} + +.tablenav { + clear: both; + height: 30px; + margin: 6px 0 4px; + padding-top: 5px; + vertical-align: middle; +} + +.tablenav.themes { + max-width: 98%; +} + +.tablenav .tablenav-pages { + float: left; + margin: 0 0 9px; +} + +.tablenav .no-pages, +.tablenav .one-page .pagination-links { + display: none; +} + +.tablenav .tablenav-pages .button, +.tablenav .tablenav-pages .tablenav-pages-navspan { + display: inline-block; + vertical-align: baseline; + min-width: 30px; + min-height: 30px; + margin: 0; + padding: 0 4px; + font-size: 16px; + line-height: 1.625; /* 26px */ + text-align: center; +} + +.tablenav .displaying-num { + margin-left: 7px; +} + +.tablenav .one-page .displaying-num { + display: inline-block; + margin: 5px 0; +} + +.tablenav .actions { + padding: 0 0 0 8px; +} + +.wp-filter .actions { + display: inline-block; + vertical-align: middle; +} + +.tablenav .delete { + margin-left: 20px; +} + +/* This view-switcher is still used on multisite. */ +.tablenav .view-switch { + float: left; + margin: 0 5px; + padding-top: 3px; +} + +.wp-filter .view-switch { + display: inline-block; + vertical-align: middle; + padding: 12px 0; + margin: 0 2px 0 8px; +} + +.media-toolbar.wp-filter .view-switch { + margin: 0 2px 0 12px; +} + +.view-switch a { + float: right; + width: 28px; + height: 28px; + text-align: center; + line-height: 1.84615384; + text-decoration: none; +} + +.view-switch a:before { + color: #c3c4c7; + display: inline-block; + font: normal 20px/1 dashicons; + speak: never; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.view-switch a:hover:before, +.view-switch a:focus:before { + color: #787c82; +} + +.view-switch a.current:before { + color: #2271b1; +} + +.view-switch .view-list:before { + content: "\f163"; +} + +.view-switch .view-excerpt:before { + content: "\f164"; +} + +.view-switch .view-grid:before { + content: "\f509"; +} + +.filter { + float: right; + margin: -5px 10px 0 0; +} + +.filter .subsubsub { + margin-right: -10px; + margin-top: 13px; +} +.screen-per-page { + width: 4em; +} + +#posts-filter .wp-filter { + margin-bottom: 0; +} + +#posts-filter fieldset { + float: right; + margin: 0 0 1em 1.5ex; + padding: 0; +} + +#posts-filter fieldset legend { + padding: 0 1px .2em 0; +} + +p.pagenav { + margin: 0; + display: inline; +} + +.pagenav span { + font-weight: 600; + margin: 0 6px; +} + +.row-title { + font-size: 14px !important; + font-weight: 600; +} + +.column-comment .comment-author { + margin-bottom: 0.6em; +} + +.column-author img, +.column-username img, +.column-comment .comment-author img { + float: right; + margin-left: 10px; + margin-top: 1px; +} + +.row-actions { + color: #a7aaad; + font-size: 13px; + padding: 2px 0 0; + position: relative; + right: -9999em; +} + +/* ticket #34150 */ +.rtl .row-actions a { + display: inline-block; +} + +.row-actions .network_only, +.row-actions .network_active { + color: #000; +} + +.no-js .row-actions, +tr:hover .row-actions, +.mobile .row-actions, +.row-actions.visible, +.comment-item:hover .row-actions { + position: static; +} + +/* deprecated */ +.row-actions-visible { + padding: 2px 0 0; +} + + +/*------------------------------------------------------------------------------ + 10.1 - Inline Editing +------------------------------------------------------------------------------*/ + +/* +.quick-edit* is for Quick Edit +.bulk-edit* is for Bulk Edit +.inline-edit* is for everything +*/ + +/* Layout */ + +#wpbody-content .inline-edit-row fieldset { + float: right; + margin: 0; + padding: 0 0 0 12px; + width: 100%; + box-sizing: border-box; +} + +#wpbody-content .inline-edit-row td fieldset:last-of-type { + padding-left: 0; +} + +tr.inline-edit-row td { + padding: 0; + /* Prevents the focus style on .inline-edit-wrapper from being cutted-off */ + position: relative; +} + +.inline-edit-wrapper { + display: flow-root; + padding: 0 12px; + border: 1px solid transparent; + border-radius: 4px; +} + +.inline-edit-wrapper:focus { + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +#wpbody-content .quick-edit-row-post .inline-edit-col-left { + width: 40%; +} + +#wpbody-content .quick-edit-row-post .inline-edit-col-right { + width: 39%; +} + +#wpbody-content .inline-edit-row-post .inline-edit-col-center { + width: 20%; +} + +#wpbody-content .quick-edit-row-page .inline-edit-col-left { + width: 50%; +} + +#wpbody-content .quick-edit-row-page .inline-edit-col-right, +#wpbody-content .bulk-edit-row-post .inline-edit-col-right { + width: 50%; +} + +#wpbody-content .bulk-edit-row .inline-edit-col-left { + width: 30%; +} + +#wpbody-content .bulk-edit-row-page .inline-edit-col-right { + width: 69%; +} + +#wpbody-content .bulk-edit-row .inline-edit-col-bottom { + float: left; + width: 69%; +} + +#wpbody-content .inline-edit-row-page .inline-edit-col-right { + margin-top: 27px; +} + +.inline-edit-row fieldset .inline-edit-group { + clear: both; + line-height: 2.5; +} + +.inline-edit-row .submit { + display: flex; + flex-wrap: wrap; + align-items: center; + clear: both; + margin: 0; + padding: 0.5em 0 1em; +} + +.inline-edit-save.submit .button { + margin-left: 8px; +} + +.inline-edit-save .spinner { + float: none; + margin: 0; +} + +.inline-edit-row .notice-error { + box-sizing: border-box; + min-width: 100%; + margin-top: 1em; +} + +.inline-edit-row .notice-error .error { + margin: 0.5em 0; + padding: 2px; +} + +/* Positioning */ + +/* Needs higher specificity for the padding */ +#the-list .inline-edit-row .inline-edit-legend { + margin: 0; + padding: 0.2em 0; + line-height: 2.5; + font-weight: 600; +} + +.inline-edit-row fieldset span.title, +.inline-edit-row fieldset span.checkbox-title { + margin: 0; + padding: 0; +} + +.inline-edit-row fieldset label, +.inline-edit-row fieldset span.inline-edit-categories-label { + display: block; + margin: .2em 0; + line-height: 2.5; +} + +.inline-edit-row fieldset.inline-edit-date label { + display: inline-block; + margin: 0; + vertical-align: baseline; + line-height: 2; +} + +.inline-edit-row fieldset label.inline-edit-tags { + margin-top: 0; +} + +.inline-edit-row fieldset label.inline-edit-tags span.title { + margin: .2em 0; + width: auto; +} + +.inline-edit-row fieldset label span.title, +.inline-edit-row fieldset.inline-edit-date legend { + display: block; + float: right; + width: 6em; + line-height: 2.5; +} + +#posts-filter fieldset.inline-edit-date legend { + padding: 0; +} + +.inline-edit-row fieldset label span.input-text-wrap, +.inline-edit-row fieldset .timestamp-wrap { + display: block; + margin-right: 6em; +} + +.quick-edit-row-post fieldset.inline-edit-col-right label span.title { + width: auto; + padding-left: 0.5em; +} + +.inline-edit-row .inline-edit-or { + margin: .2em 0 .2em 6px; + line-height: 2.5; +} + +.inline-edit-row .input-text-wrap input[type=text] { + width: 100%; +} + +.inline-edit-row fieldset label input[type=checkbox] { + vertical-align: middle; +} + +.inline-edit-row fieldset label textarea { + width: 100%; + height: 4em; + vertical-align: top; +} + +#wpbody-content .bulk-edit-row fieldset .inline-edit-group label { + max-width: 50%; +} + +#wpbody-content .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child { + margin-left: 0.5em +} + +.inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input { + width: 6em; +} + +/* Styling */ +.inline-edit-row .inline-edit-legend { + text-transform: uppercase; +} + +/* Specific Elements */ +.inline-edit-row fieldset .inline-edit-date { + float: right; +} + +.inline-edit-row fieldset input[name=jj], +.inline-edit-row fieldset input[name=hh], +.inline-edit-row fieldset input[name=mn], +.inline-edit-row fieldset input[name=aa] { + vertical-align: middle; + text-align: center; + padding: 0 4px; +} + +.inline-edit-row fieldset label input.inline-edit-password-input { + width: 8em; +} + +#bulk-titles-list, +#bulk-titles-list li, +.inline-edit-row fieldset ul.cat-checklist li, +.inline-edit-row fieldset ul.cat-checklist input { + margin: 0; + position: relative; /* RTL fix, #WP27629 */ +} + +.inline-edit-row fieldset ul.cat-checklist input { + margin-top: -1px; + margin-right: 3px; +} + +.inline-edit-row fieldset label input.inline-edit-menu-order-input { + width: 3em; +} + +.inline-edit-row fieldset label input.inline-edit-slug-input { + width: 75%; +} + +.inline-edit-row #post_parent, +.inline-edit-row select[name="page_template"] { + max-width: 80%; +} + +.quick-edit-row-post fieldset label.inline-edit-status { + float: right; +} + +#bulk-titles, +ul.cat-checklist { + height: 14em; + border: 1px solid #ddd; + margin: 0 0 5px; + padding: 0.2em 5px; + overflow-y: scroll; +} + +#bulk-titles .ntdelbutton, +#bulk-titles .ntdeltitle, +.inline-edit-row fieldset ul.cat-checklist label { + display: inline-block; + margin: 0; + padding: 3px 0; + line-height: 20px; + vertical-align: top; +} + +#bulk-titles .ntdelitem { + padding-right: 23px; +} + +#bulk-titles .ntdelbutton { + width: 26px; + height: 26px; + margin: 0 -26px 0 0; + text-align: center; + border-radius: 3px; +} + +#bulk-titles .ntdelbutton:before { + display: inline-block; + vertical-align: top; +} + +#bulk-titles .ntdelbutton:focus { + box-shadow: 0 0 0 2px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + /* Reset inherited offset from Gutenberg */ + outline-offset: 0; +} + +/*------------------------------------------------------------------------------ + 17.0 - Plugins +------------------------------------------------------------------------------*/ + +.plugins tbody th.check-column, +.plugins tbody { + padding: 8px 2px 0 0; +} + +.plugins tbody th.check-column input[type=checkbox] { + margin-top: 4px; +} + +.updates-table .plugin-title p { + margin-top: 0; +} + +.plugins thead td.check-column, +.plugins tfoot td.check-column, +.plugins .inactive th.check-column { + padding-right: 6px; +} + +.plugins, +.plugins th, +.plugins td { + color: #000; +} + +.plugins tr { + background: #fff; +} + +.plugins p { + margin: 0 4px; + padding: 0; +} + +.plugins .desc p { + margin: 0 0 8px; +} + +.plugins td.desc { + line-height: 1.5; +} + +.plugins .desc ul, +.plugins .desc ol { + margin: 0 2em 0 0; +} + +.plugins .desc ul { + list-style-type: disc; +} + +.plugins .row-actions { + font-size: 13px; + padding: 0; +} + +.plugins .inactive td, +.plugins .inactive th, +.plugins .active td, +.plugins .active th { + padding: 10px 9px; +} + +.plugins .active td, +.plugins .active th { + background-color: #f0f6fc; +} + +.plugins .update th, +.plugins .update td { + border-bottom: 0; +} + +.plugins .inactive td, +.plugins .inactive th, +.plugins .active td, +.plugins .active th, +.plugin-install #the-list td, +.upgrade .plugins td, +.upgrade .plugins th { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.plugins tr.active.plugin-update-tr + tr.inactive th, +.plugins tr.active.plugin-update-tr + tr.inactive td, +.plugins tr.active + tr.inactive th, +.plugins tr.active + tr.inactive td { + border-top: 1px solid rgba(0, 0, 0, 0.03); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #dcdcde; +} + +.plugins .update td, +.plugins .update th, +.upgrade .plugins tr:last-of-type td, +.upgrade .plugins tr:last-of-type th, +.plugins tr.active + tr.inactive.update th, +.plugins tr.active + tr.inactive.update td, +.plugins .updated td, +.plugins .updated th, +.plugins tr.active + tr.inactive.updated th, +.plugins tr.active + tr.inactive.updated td { + box-shadow: none; +} + +.plugins .active th.check-column, +.plugin-update-tr.active td { + border-right: 4px solid #72aee6; +} + +.wp-list-table.plugins .plugin-title, +.wp-list-table.plugins .theme-title { + padding-left: 12px; + white-space: nowrap; +} + +.plugins .plugin-title img, +.plugins .plugin-title .dashicons { + float: right; + padding: 0 0 0 10px; + width: 64px; + height: 64px; +} + +.plugins .plugin-title .dashicons:before { + padding: 2px; + background-color: #f0f0f1; + box-shadow: inset 0 0 10px rgba(167, 170, 173, 0.15); + font-size: 60px; + color: #c3c4c7; +} + +#update-themes-table .plugin-title img, +#update-themes-table .plugin-title .dashicons { + width: 85px; +} + +.plugins .column-auto-updates { + width: 14.2em; +} + +.plugins .inactive .plugin-title strong { + font-weight: 400; +} + +.plugins .second, +.plugins .row-actions { + padding: 0 0 5px; +} + +.plugins .row-actions { + white-space: normal; + min-width: 12em; +} + +.plugins .update .second, +.plugins .update .row-actions, +.plugins .updated .second, +.plugins .updated .row-actions { + padding-bottom: 0; +} + +.plugins-php .widefat tfoot th, +.plugins-php .widefat tfoot td { + border-top-style: solid; + border-top-width: 1px; +} + +.plugins .plugin-update-tr .plugin-update { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + overflow: hidden; /* clearfix */ + padding: 0; +} + +.plugins .plugin-update-tr .notice, +.plugins .plugin-update-tr div[class="update-message"] { /* back-compat for pre-4.6 */ + margin: 5px 40px 15px 20px; +} + +.plugins .notice p { + margin: 0.5em 0; +} + +.plugins .plugin-description a, +.plugins .plugin-update a, +.updates-table .plugin-title a { + text-decoration: underline; +} + +.plugins tr.paused th.check-column { + border-right: 4px solid #d63638; +} + +.plugins tr.paused th, +.plugins tr.paused td { + background-color: #f6f7f7; +} + +.plugins tr.paused .plugin-title, +.plugins .paused .dashicons-warning { + color: #d63638; +} + +.plugins .paused .error-display p, +.plugins .paused .error-display code { + font-size: 90%; + color: rgba(0, 0, 0, 0.7); +} + +.plugins .resume-link { + color: #d63638; +} + +.plugin-card .update-now:before { + color: #d63638; + content: "\f463"; + display: inline-block; + font: normal 20px/1 dashicons; + margin: 3px -2px 0 5px; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.plugin-card .updating-message:before { + content: "\f463"; + animation: rotation 2s infinite linear; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-359deg); + } +} + +.plugin-card .updated-message:before { + color: #68de7c; + content: "\f147"; +} + +.plugin-install-php h2 { + clear: both; +} + +.plugin-install-php h3 { + margin: 2.5em 0 8px; +} + +.plugin-install-php .wp-filter { + margin-bottom: 0; +} + +/* Plugin card table view */ +.plugin-group { + overflow: hidden; /* clearfix */ + margin-top: 1.5em; +} + +.plugin-group h3 { + margin-top: 0; +} + +.plugin-card { + float: right; + margin: 0 8px 16px; + width: 48.5%; + width: calc( 50% - 8px ); + background-color: #fff; + border: 1px solid #dcdcde; + box-sizing: border-box; +} + +.plugin-card:nth-child(odd) { + clear: both; + margin-right: 0; +} + +.plugin-card:nth-child(even) { + margin-left: 0; +} + +@media screen and (min-width: 1600px) and ( max-width: 2299px ) { + .plugin-card { + width: 30%; + width: calc( 33.1% - 8px ); + } + + .plugin-card:nth-child(odd) { + clear: none; + margin-right: 8px; + } + + .plugin-card:nth-child(even) { + margin-left: 8px; + } + + .plugin-card:nth-child(3n+1) { + clear: both; + margin-right: 0; + } + + .plugin-card:nth-child(3n) { + margin-left: 0; + } +} + +@media screen and (min-width: 2300px) { + .plugin-card { + width: 25%; + width: calc( 25% - 12px ); + } + + .plugin-card:nth-child(odd) { + clear: none; + margin-right: 8px; + } + + .plugin-card:nth-child(even) { + margin-left: 8px; + } + + .plugin-card:nth-child(4n+1) { + clear: both; + margin-right: 0; + } + + .plugin-card:nth-child(4n) { + margin-left: 0; + } +} + +.plugin-card-top { + position: relative; + padding: 20px 20px 10px; + min-height: 135px; +} + +div.action-links, +.plugin-action-buttons { + margin: 0; /* Override existing margins */ +} + +.plugin-card h3 { + margin: 0 0 12px 12px; + font-size: 18px; + line-height: 1.3; +} + +.plugin-card .name, +.plugin-card .desc { + margin-right: 148px; /* icon + margin */ + margin-left: 128px; /* action links + margin */ +} + +.plugin-card .action-links { + position: absolute; + top: 20px; + left: 20px; + width: 120px; +} + +.plugin-action-buttons { + clear: left; + float: left; + margin-bottom: 1em; + text-align: left; +} + +.plugin-action-buttons li { + margin-bottom: 10px; +} + +.plugin-card-bottom { + clear: both; + padding: 12px 20px; + background-color: #f6f7f7; + border-top: 1px solid #dcdcde; + overflow: hidden; +} + +.plugin-card-bottom .star-rating { + display: inline; +} + +.plugin-card-update-failed .update-now { + font-weight: 600; +} + +.plugin-card-update-failed .notice-error { + margin: 0; + padding-right: 16px; + box-shadow: 0 -1px 0 #dcdcde; +} + +.plugin-card-update-failed .plugin-card-bottom { + display: none; +} + +.plugin-card .column-rating { + line-height: 1.76923076; +} + +.plugin-card .column-rating, +.plugin-card .column-updated { + margin-bottom: 4px; +} + +.plugin-card .column-rating, +.plugin-card .column-downloaded { + float: right; + clear: right; + max-width: 180px; +} + +.plugin-card .column-updated, +.plugin-card .column-compatibility { + text-align: left; + float: left; + clear: left; + width: 65%; + width: calc( 100% - 180px ); +} + +.plugin-card .column-compatibility span:before { + font: normal 20px/.5 dashicons; + speak: never; + display: inline-block; + padding: 0; + top: 4px; + right: -2px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #3c434a; +} + +.plugin-card .column-compatibility .compatibility-incompatible:before { + content: "\f158"; + color: #d63638; +} + +.plugin-card .column-compatibility .compatibility-compatible:before { + content: "\f147"; + color: #007017; +} + +.plugin-card .notice { + margin: 20px 20px 0; +} + +.plugin-icon { + position: absolute; + top: 20px; + right: 20px; + width: 128px; + height: 128px; + margin: 0 0 20px 20px; +} + +.no-plugin-results { + color: #646970; /* same as no themes and no media */ + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0 0; + text-align: center; +} + +/* ms */ +/* Background Color for Site Status */ +.wp-list-table .site-deleted, +.wp-list-table tr.site-deleted, +.wp-list-table .site-archived, +.wp-list-table tr.site-archived { + background: #fcf0f1; +} +.wp-list-table .site-spammed, +.wp-list-table tr.site-spammed, +.wp-list-table .site-mature, +.wp-list-table tr.site-mature { + background: #fcf9e8; +} + +.sites.fixed .column-lastupdated, +.sites.fixed .column-registered { + width: 20%; +} + +.sites.fixed .column-users { + width: 80px; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) { + .plugin-card .action-links { + position: static; + margin-right: 148px; + width: auto; + } + + .plugin-action-buttons { + float: none; + margin: 1em 0 0; + text-align: right; + } + + .plugin-action-buttons li { + display: inline-block; + vertical-align: middle; + } + + .plugin-action-buttons li .button { + margin-left: 20px; + } + + .plugin-card h3 { + margin-left: 24px; + } + + .plugin-card .name, + .plugin-card .desc { + margin-left: 0; + } + + .plugin-card .desc p:first-of-type { + margin-top: 0; + } +} + +@media screen and (max-width: 782px) { + /* WP List Table Options & Filters */ + .tablenav { + height: auto; + } + + .tablenav.top { + margin: 20px 0 5px; + } + + .tablenav.bottom { + position: relative; + margin-top: 15px; + } + + .tablenav br { + display: none; + } + + .tablenav br.clear { + display: block; + } + + .tablenav.top .actions, + .tablenav .view-switch { + display: none; + } + + .view-switch a { + width: 36px; + height: 36px; + line-height: 2.53846153; + } + + /* Pagination */ + .tablenav.top .displaying-num { + display: none; + } + + .tablenav.bottom .displaying-num { + position: absolute; + left: 0; + top: 11px; + margin: 0; + font-size: 14px; + } + + .tablenav .tablenav-pages { + width: 100%; + text-align: center; + margin: 0 0 25px; + } + + .tablenav.bottom .tablenav-pages { + margin-top: 25px; + } + + .tablenav.top .tablenav-pages.one-page { + display: none; + } + + .tablenav.bottom .tablenav-pages.one-page { + margin-top: 15px; + height: 0; + } + + .tablenav-pages .pagination-links { + font-size: 16px; + } + + .tablenav .tablenav-pages .button, + .tablenav .tablenav-pages .tablenav-pages-navspan { + min-width: 44px; + padding: 12px 8px; + font-size: 18px; + line-height: 1; + } + + .tablenav-pages .pagination-links .current-page { + min-width: 44px; + padding: 12px 6px; + font-size: 16px; + line-height: 1.125; + } + + /* WP List Table Adjustments: General */ + .form-wrap > p { + display: none; + } + + .wp-list-table th.column-primary ~ th, + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { + display: none; + } + + .wp-list-table thead th.column-primary { + width: 100%; + } + + /* Checkboxes need to show */ + .wp-list-table tr th.check-column { + display: table-cell; + } + + .wp-list-table .check-column { + width: 2.5em; + } + + .wp-list-table .column-primary .toggle-row { + display: block; + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { + position: relative; + clear: both; + width: auto !important; /* needs to override some columns that are more specifically targeted */ + } + + .wp-list-table td.column-primary { + padding-left: 50px; /* space for toggle button */ + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { + padding: 3px 35% 3px 8px; + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before { + position: absolute; + right: 10px; /* match padding of regular table cell */ + display: block; + overflow: hidden; + width: 32%; /* leave a little space for a gutter */ + content: attr(data-colname); + white-space: nowrap; + text-overflow: ellipsis; + } + + .wp-list-table .is-expanded td:not(.hidden) { + display: block !important; + overflow: hidden; /* clearfix */ + } + + /* Special cases */ + .widefat .num, + .column-posts { + text-align: right; + } + + #comments-form .fixed .column-author, + #commentsdiv .fixed .column-author { + display: none !important; + } + + .fixed .column-comment .comment-author { + display: block; + } + + /* Comment author hidden via Screen Options */ + .fixed .column-author.hidden ~ .column-comment .comment-author { + display: none; + } + + #the-comment-list .is-expanded td { + box-shadow: none; + } + + #the-comment-list .is-expanded td:last-child { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + /* Show comment bubble as text instead */ + .post-com-count .screen-reader-text { + position: static; + -webkit-clip-path: none; + clip-path: none; + width: auto; + height: auto; + margin: 0; + } + + .column-response .post-com-count-no-comments:after, + .column-response .post-com-count-approved:after, + .column-comments .post-com-count-no-comments:after, + .column-comments .post-com-count-approved:after { + content: none; + } + + .column-response .post-com-count [aria-hidden="true"], + .column-comments .post-com-count [aria-hidden="true"] { + display: none; + } + + .column-response .post-com-count-wrapper, + .column-comments .post-com-count-wrapper { + white-space: normal; + } + + .column-response .post-com-count-wrapper > a, + .column-comments .post-com-count-wrapper > a { + display: block; + } + + .column-response .post-com-count-no-comments, + .column-response .post-com-count-approved, + .column-comments .post-com-count-no-comments, + .column-comments .post-com-count-approved { + margin-top: 0; + margin-left: 0.5em; + } + + .column-response .post-com-count-pending, + .column-comments .post-com-count-pending { + position: static; + height: auto; + min-width: 0; + padding: 0; + border: none; + border-radius: 0; + background: none; + color: #b32d2e; + font-size: inherit; + line-height: inherit; + text-align: right; + } + + .column-response .post-com-count-pending:hover, + .column-comments .post-com-count-pending:hover { + color: #d63638; + } + + .widefat thead td.check-column, + .widefat tfoot td.check-column { + padding-top: 10px; + } + + .row-actions { + margin-right: -8px; + margin-left: -8px; + padding-top: 4px; + } + + /* Make row actions more easy to select on mobile */ + body:not(.plugins-php) .row-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + color: transparent; + } + + .row-actions span a, + .row-actions span .button-link { + display: inline-block; + padding: 4px 8px; + line-height: 1.5; + } + + .row-actions span.approve:before, + .row-actions span.unapprove:before { + content: "| "; + } + + /* Quick Edit and Bulk Edit */ + #wpbody-content .quick-edit-row-post .inline-edit-col-left, + #wpbody-content .quick-edit-row-post .inline-edit-col-right, + #wpbody-content .inline-edit-row-post .inline-edit-col-center, + #wpbody-content .quick-edit-row-page .inline-edit-col-left, + #wpbody-content .quick-edit-row-page .inline-edit-col-right, + #wpbody-content .bulk-edit-row-post .inline-edit-col-right, + #wpbody-content .bulk-edit-row .inline-edit-col-left, + #wpbody-content .bulk-edit-row-page .inline-edit-col-right, + #wpbody-content .bulk-edit-row .inline-edit-col-bottom { + float: none; + width: 100%; + padding: 0; + } + + #the-list .inline-edit-row .inline-edit-legend, + .inline-edit-row span.title { + font-size: 16px; + } + + .inline-edit-row p.howto { + font-size: 14px; + } + + #wpbody-content .inline-edit-row-page .inline-edit-col-right { + margin-top: 0; + } + + #wpbody-content .quick-edit-row fieldset .inline-edit-col label, + #wpbody-content .quick-edit-row fieldset .inline-edit-group label, + #wpbody-content .bulk-edit-row fieldset .inline-edit-col label, + #wpbody-content .bulk-edit-row fieldset .inline-edit-group label { + max-width: none; + float: none; + margin-bottom: 5px; + } + + #wpbody .bulk-edit-row fieldset select { + display: block; + width: 100%; + max-width: none; + box-sizing: border-box; + } + + .inline-edit-row fieldset input[name=jj], + .inline-edit-row fieldset input[name=hh], + .inline-edit-row fieldset input[name=mn], + .inline-edit-row fieldset input[name=aa] { + font-size: 16px; + line-height: 2; + padding: 3px 4px; + } + + #bulk-titles .ntdelbutton, + #bulk-titles .ntdeltitle, + .inline-edit-row fieldset ul.cat-checklist label { + padding: 6px 0; + font-size: 16px; + line-height: 28px; + } + + #bulk-titles .ntdelitem { + padding-right: 37px; + } + + #bulk-titles .ntdelbutton { + width: 40px; + height: 40px; + margin: 0 -40px 0 0; + overflow: hidden; + } + + #bulk-titles .ntdelbutton:before { + font-size: 20px; + line-height: 28px; + } + + .inline-edit-row fieldset label span.title, + .inline-edit-row fieldset.inline-edit-date legend { + float: none; + } + + .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags { + padding: 0; + } + + .inline-edit-row fieldset label span.input-text-wrap, + .inline-edit-row fieldset .timestamp-wrap { + margin-right: 0; + } + + .inline-edit-row .inline-edit-or { + margin: 0 0 0 6px; + } + + #edithead .inside, + #commentsdiv #edithead .inside { + float: none; + text-align: right; + padding: 3px 5px; + } + + #commentsdiv #edithead .inside input, + #edithead .inside input { + width: 100%; + } + + #edithead label { + display: block; + } + + /* Updates */ + #wpbody-content .updates-table .plugin-title { + width: auto; + white-space: normal; + } + + /* Links */ + .link-manager-php #posts-filter { + margin-top: 25px; + } + + .link-manager-php .tablenav.bottom { + overflow: hidden; + } + + /* List tables that don't toggle rows */ + .comments-box .toggle-row, + .wp-list-table.plugins .toggle-row { + display: none; + } + + /* Plugin/Theme Management */ + #wpbody-content .wp-list-table.plugins td { + display: block; + width: auto; + padding: 10px 9px; /* reset from other list tables that have a label at this width */ + } + + /* Plugin description hidden via Screen Options */ + #wpbody-content .wp-list-table.plugins .desc.hidden { + display: none; + } + + #wpbody-content .wp-list-table.plugins .column-description { + padding-top: 2px; + } + + #wpbody-content .wp-list-table.plugins .plugin-title, + #wpbody-content .wp-list-table.plugins .theme-title { + padding-left: 12px; + white-space: normal; + } + + .wp-list-table.plugins .plugin-title, + .wp-list-table.plugins .theme-title { + padding-top: 13px; + padding-bottom: 4px; + } + + .plugins #the-list tr > td:not(:last-child), + .plugins #the-list .update th, + .plugins #the-list .update td, + .wp-list-table.plugins #the-list .theme-title { + box-shadow: none; + border-top: none; + } + + .plugins #the-list tr td { + border-top: none; + } + + .plugins tbody { + padding: 1px 0 0; + } + + .plugins tr.active + tr.inactive th.check-column, + .plugins tr.active + tr.inactive td.column-description, + .plugins .plugin-update-tr:before { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + .plugins tr.active + tr.inactive th.check-column, + .plugins tr.active + tr.inactive td { + border-top: none; + } + + /* mimic the checkbox th */ + .plugins .plugin-update-tr:before { + content: ""; + display: table-cell; + } + + .plugins #the-list .plugin-update-tr .plugin-update { + border-right: none; + } + + .plugin-update-tr .update-message { + margin-right: 0; + } + + .plugins .active.update + .plugin-update-tr:before, + .plugins .active.updated + .plugin-update-tr:before { + background-color: #f0f6fc; + border-right: 4px solid #72aee6; + } + + .plugins .plugin-update-tr .update-message { + margin-right: 0; + } + + .wp-list-table.plugins .plugin-title strong, + .wp-list-table.plugins .theme-title strong { + font-size: 1.4em; + line-height: 1.5; + } + + .plugins tbody th.check-column { + padding: 8px 5px 0 0; + } + + .plugins thead td.check-column, + .plugins tfoot td.check-column, + .plugins .inactive th.check-column { + padding-right: 9px; + } + + /* Add New plugins page */ + table.plugin-install .column-name, + table.plugin-install .column-version, + table.plugin-install .column-rating, + table.plugin-install .column-description { + display: block; + width: auto; + } + + table.plugin-install th.column-name, + table.plugin-install th.column-version, + table.plugin-install th.column-rating, + table.plugin-install th.column-description { + display: none; + } + + table.plugin-install td.column-name strong { + font-size: 1.4em; + line-height: 1.6em; + } + + table.plugin-install #the-list td { + box-shadow: none; + } + + table.plugin-install #the-list tr { + display: block; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + .plugin-card { + margin-right: 0; + margin-left: 0; + width: 100%; + } + + table.media .column-title .has-media-icon ~ .row-actions { + margin-right: 0; + clear: both; + } +} + +@media screen and (max-width: 480px) { + .tablenav-pages .current-page { + margin: 0; + } + + .tablenav.bottom .displaying-num { + position: relative; + top: 0; + display: block; + text-align: left; + padding-bottom: 0.5em; + } + + .tablenav.bottom .tablenav-pages.one-page { + height: auto; + } + + .tablenav-pages .tablenav-paging-text { + float: right; + width: 100%; + padding-top: 0.5em; + } +} diff --git a/tools/storybook/wordpress/css/list-tables-rtl.min.css b/tools/storybook/wordpress/css/list-tables-rtl.min.css new file mode 100644 index 00000000000..f81d176c945 --- /dev/null +++ b/tools/storybook/wordpress/css/list-tables-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.response-links{display:block;margin-bottom:1em}.response-links a{display:block}.response-links a.comments-edit-item-link{font-weight:600}.response-links a.comments-view-item-link{font-size:12px}.post-com-count-wrapper strong{font-weight:400}.comments-view-item-link{display:inline-block;clear:both}.column-comments .post-com-count-wrapper,.column-response .post-com-count-wrapper{white-space:nowrap;word-wrap:normal}.column-comments .post-com-count,.column-response .post-com-count{display:inline-block;vertical-align:top}.column-comments .post-com-count-approved,.column-comments .post-com-count-no-comments,.column-response .post-com-count-approved,.column-response .post-com-count-no-comments{margin-top:5px}.column-comments .comment-count-approved,.column-comments .comment-count-no-comments,.column-response .comment-count-approved,.column-response .comment-count-no-comments{box-sizing:border-box;display:block;padding:0 8px;min-width:24px;height:2em;border-radius:5px;background-color:#646970;color:#fff;font-size:11px;line-height:1.90909090;text-align:center}.column-comments .post-com-count-approved:after,.column-comments .post-com-count-no-comments:after,.column-response .post-com-count-approved:after,.column-response .post-com-count-no-comments:after{content:"";display:block;margin-right:8px;width:0;height:0;border-top:5px solid #646970;border-left:5px solid transparent}.column-comments a.post-com-count-approved:focus .comment-count-approved,.column-comments a.post-com-count-approved:hover .comment-count-approved,.column-response a.post-com-count-approved:focus .comment-count-approved,.column-response a.post-com-count-approved:hover .comment-count-approved{background:#2271b1}.column-comments a.post-com-count-approved:focus:after,.column-comments a.post-com-count-approved:hover:after,.column-response a.post-com-count-approved:focus:after,.column-response a.post-com-count-approved:hover:after{border-top-color:#2271b1}.column-comments .post-com-count-pending,.column-response .post-com-count-pending{position:relative;right:-3px;padding:0 5px;min-width:7px;height:17px;border:2px solid #fff;border-radius:11px;background:#d63638;color:#fff;font-size:9px;line-height:1.88888888;text-align:center}.column-comments .post-com-count-no-pending,.column-response .post-com-count-no-pending{display:none}.commentlist li{padding:1em 1em .2em;margin:0;border-bottom:1px solid #c3c4c7}.commentlist li li{border-bottom:0;padding:0}.commentlist p{padding:0;margin:0 0 .8em}#submitted-on,.submitted-on{color:#50575e}#replyrow td{padding:2px}#replysubmit{margin:0;padding:5px 7px 10px;overflow:hidden}#replysubmit .reply-submit-buttons{margin-bottom:0}#replysubmit .button{margin-left:5px}#replysubmit .spinner{float:none;margin:-4px 0 0}#replyrow.inline-edit-row fieldset.comment-reply{font-size:inherit;line-height:inherit}#replyrow legend{margin:0;padding:.2em 5px 0;font-size:13px;line-height:1.4;font-weight:600}#replyrow.inline-edit-row label{display:inline;vertical-align:baseline;line-height:inherit}#commentsdiv #edithead .inside,#edithead .inside{float:right;padding:3px 5px 2px 0;margin:0;text-align:center}#edithead .inside input{width:180px}#edithead label{padding:2px 0}#replycontainer{padding:5px}#replycontent{height:120px;box-shadow:none}#replyerror{border-color:#dcdcde;background-color:#f6f7f7}.commentlist .avatar{vertical-align:text-top}#the-comment-list div.undo,#the-comment-list tr.undo{background-color:#f6f7f7}#the-comment-list .unapproved td,#the-comment-list .unapproved th{background-color:#fcf9e8}#the-comment-list .unapproved th.check-column{border-right:4px solid #d63638}#the-comment-list .unapproved th.check-column input{margin-right:4px}#the-comment-list .approve a{color:#007017}#the-comment-list .unapprove a{color:#996800}#the-comment-list td,#the-comment-list th{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}#the-comment-list tr:last-child td,#the-comment-list tr:last-child th{box-shadow:none}#the-comment-list tr.unapproved+tr.approved td,#the-comment-list tr.unapproved+tr.approved th{border-top:1px solid rgba(0,0,0,.03)}.vim-current,.vim-current td,.vim-current th{background-color:#f0f6fc!important}th .comment-grey-bubble{height:16px;width:16px}th .comment-grey-bubble:before{content:"\f101";font:normal 20px/.5 dashicons;speak:never;display:inline-block;padding:0;top:4px;right:-4px;position:relative;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#3c434a}table.fixed{table-layout:fixed}.fixed .column-rating,.fixed .column-visible{width:8%}.fixed .column-author,.fixed .column-format,.fixed .column-links,.fixed .column-parent,.fixed .column-posts{width:10%}.fixed .column-date{width:14%}.column-date span[title]{-webkit-text-decoration:dotted underline;text-decoration:dotted underline}.fixed .column-posts{width:74px}.fixed .column-posts,.fixed .column-role{-webkit-hyphens:auto;hyphens:auto}.fixed .column-comment .comment-author{display:none}.fixed .column-categories,.fixed .column-rel,.fixed .column-response,.fixed .column-role,.fixed .column-tags{width:15%}.fixed .column-slug{width:25%}.fixed .column-locations{width:35%}.fixed .column-comments{width:5.5em;padding:8px 0;text-align:right}.fixed .column-comments .vers{padding-right:3px}td.column-title strong,td.plugin-title strong{display:block;margin-bottom:.2em;font-size:14px}td.column-title p,td.plugin-title p{margin:6px 0}table.media .column-title .media-icon{float:right;min-height:60px;margin:0 0 0 9px}table.media .column-title .media-icon img{max-width:60px;height:auto;vertical-align:top}table.media .column-title .has-media-icon~.row-actions{margin-right:70px}table.media .column-title .filename{margin-bottom:.2em}.media .row-actions .copy-to-clipboard-container{display:inline;position:relative}.media .row-actions .copy-to-clipboard-container .success{position:absolute;right:50%;transform:translate(50%,-100%);background:#000;color:#fff;border-radius:5px;margin:0;padding:2px 5px}.wp-list-table a{transition:none}#the-list tr:last-child td,#the-list tr:last-child th{border-bottom:none!important;box-shadow:none}#comments-form .fixed .column-author{width:20%}#commentsdiv.postbox .inside{margin:0;padding:0}#commentsdiv .inside .row-actions{line-height:1.38461538}#commentsdiv .inside .column-author{width:25%}#commentsdiv .column-comment p{margin:.6em 0;padding:0}#commentsdiv #replyrow td{padding:0}#commentsdiv p{padding:8px 10px;margin:0}#commentsdiv .comments-box{border:0 none}#commentsdiv .comments-box thead td,#commentsdiv .comments-box thead th{background:0 0;padding:0 7px 4px}#commentsdiv .comments-box tr:last-child td{border-bottom:0 none}#commentsdiv #edithead .inside input{width:160px}.sorting-indicator{display:block;visibility:hidden;width:10px;height:4px;margin-top:8px;margin-right:7px}.sorting-indicator:before{content:"\f142";font:normal 20px/1 dashicons;speak:never;display:inline-block;padding:0;top:-4px;right:-8px;color:#3c434a;line-height:.5;position:relative;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#3c434a}.column-comments .sorting-indicator:before{top:0;right:-10px}th.desc a:focus span.sorting-indicator:before,th.desc:hover span.sorting-indicator:before,th.sorted.asc .sorting-indicator:before{content:"\f142"}th.asc a:focus span.sorting-indicator:before,th.asc:hover span.sorting-indicator:before,th.sorted.desc .sorting-indicator:before{content:"\f140"}.wp-list-table .toggle-row{position:absolute;left:8px;top:10px;display:none;padding:0;width:40px;height:40px;border:none;outline:0;background:0 0}.wp-list-table .toggle-row:hover{cursor:pointer}.wp-list-table .toggle-row:focus:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.wp-list-table .toggle-row:active{box-shadow:none}.wp-list-table .toggle-row:before{position:absolute;top:-5px;right:10px;border-radius:50%;display:block;padding:1px 0 1px 2px;color:#3c434a;content:"\f140";font:normal 20px/1 dashicons;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;speak:never}.wp-list-table .is-expanded .toggle-row:before{content:"\f142"}.locked-indicator{display:none;margin-right:6px;height:20px;width:16px}.locked-indicator-icon:before{color:#8c8f94;content:"\f160";display:inline-block;font:normal 20px/1 dashicons;speak:never;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.locked-info{display:none;margin-top:4px}.locked-text{vertical-align:top}.wp-locked .locked-indicator,.wp-locked .locked-info{display:block}tr.wp-locked .check-column input[type=checkbox],tr.wp-locked .check-column label,tr.wp-locked .row-actions .inline,tr.wp-locked .row-actions .trash{display:none}.fixed .column-comments .sorting-indicator{margin-top:3px}#menu-locations-wrap .widefat{width:60%}.widefat th.sortable,.widefat th.sorted{padding:0}th.sortable a,th.sorted a{display:block;overflow:hidden;padding:8px}.fixed .column-comments.sortable a,.fixed .column-comments.sorted a{padding:8px 0}th.sortable a span,th.sorted a span{float:right;cursor:pointer}th.asc a:focus span.sorting-indicator,th.asc:hover span.sorting-indicator,th.desc a:focus span.sorting-indicator,th.desc:hover span.sorting-indicator,th.sorted .sorting-indicator{visibility:visible}.tablenav-pages .current-page{margin:0 0 0 2px;font-size:13px;text-align:center}.tablenav .total-pages{margin-left:2px}.tablenav #table-paging{margin-right:2px}.tablenav{clear:both;height:30px;margin:6px 0 4px;padding-top:5px;vertical-align:middle}.tablenav.themes{max-width:98%}.tablenav .tablenav-pages{float:left;margin:0 0 9px}.tablenav .no-pages,.tablenav .one-page .pagination-links{display:none}.tablenav .tablenav-pages .button,.tablenav .tablenav-pages .tablenav-pages-navspan{display:inline-block;vertical-align:baseline;min-width:30px;min-height:30px;margin:0;padding:0 4px;font-size:16px;line-height:1.625;text-align:center}.tablenav .displaying-num{margin-left:7px}.tablenav .one-page .displaying-num{display:inline-block;margin:5px 0}.tablenav .actions{padding:0 0 0 8px}.wp-filter .actions{display:inline-block;vertical-align:middle}.tablenav .delete{margin-left:20px}.tablenav .view-switch{float:left;margin:0 5px;padding-top:3px}.wp-filter .view-switch{display:inline-block;vertical-align:middle;padding:12px 0;margin:0 2px 0 8px}.media-toolbar.wp-filter .view-switch{margin:0 2px 0 12px}.view-switch a{float:right;width:28px;height:28px;text-align:center;line-height:1.84615384;text-decoration:none}.view-switch a:before{color:#c3c4c7;display:inline-block;font:normal 20px/1 dashicons;speak:never;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.view-switch a:focus:before,.view-switch a:hover:before{color:#787c82}.view-switch a.current:before{color:#2271b1}.view-switch .view-list:before{content:"\f163"}.view-switch .view-excerpt:before{content:"\f164"}.view-switch .view-grid:before{content:"\f509"}.filter{float:right;margin:-5px 10px 0 0}.filter .subsubsub{margin-right:-10px;margin-top:13px}.screen-per-page{width:4em}#posts-filter .wp-filter{margin-bottom:0}#posts-filter fieldset{float:right;margin:0 0 1em 1.5ex;padding:0}#posts-filter fieldset legend{padding:0 1px .2em 0}p.pagenav{margin:0;display:inline}.pagenav span{font-weight:600;margin:0 6px}.row-title{font-size:14px!important;font-weight:600}.column-comment .comment-author{margin-bottom:.6em}.column-author img,.column-comment .comment-author img,.column-username img{float:right;margin-left:10px;margin-top:1px}.row-actions{color:#a7aaad;font-size:13px;padding:2px 0 0;position:relative;right:-9999em}.rtl .row-actions a{display:inline-block}.row-actions .network_active,.row-actions .network_only{color:#000}.comment-item:hover .row-actions,.mobile .row-actions,.no-js .row-actions,.row-actions.visible,tr:hover .row-actions{position:static}.row-actions-visible{padding:2px 0 0}#wpbody-content .inline-edit-row fieldset{float:right;margin:0;padding:0 0 0 12px;width:100%;box-sizing:border-box}#wpbody-content .inline-edit-row td fieldset:last-of-type{padding-left:0}tr.inline-edit-row td{padding:0;position:relative}.inline-edit-wrapper{display:flow-root;padding:0 12px;border:1px solid transparent;border-radius:4px}.inline-edit-wrapper:focus{border-color:#2271b1;box-shadow:0 0 0 1px #2271b1;outline:2px solid transparent}#wpbody-content .quick-edit-row-post .inline-edit-col-left{width:40%}#wpbody-content .quick-edit-row-post .inline-edit-col-right{width:39%}#wpbody-content .inline-edit-row-post .inline-edit-col-center{width:20%}#wpbody-content .quick-edit-row-page .inline-edit-col-left{width:50%}#wpbody-content .bulk-edit-row-post .inline-edit-col-right,#wpbody-content .quick-edit-row-page .inline-edit-col-right{width:50%}#wpbody-content .bulk-edit-row .inline-edit-col-left{width:30%}#wpbody-content .bulk-edit-row-page .inline-edit-col-right{width:69%}#wpbody-content .bulk-edit-row .inline-edit-col-bottom{float:left;width:69%}#wpbody-content .inline-edit-row-page .inline-edit-col-right{margin-top:27px}.inline-edit-row fieldset .inline-edit-group{clear:both;line-height:2.5}.inline-edit-row .submit{display:flex;flex-wrap:wrap;align-items:center;clear:both;margin:0;padding:.5em 0 1em}.inline-edit-save.submit .button{margin-left:8px}.inline-edit-save .spinner{float:none;margin:0}.inline-edit-row .notice-error{box-sizing:border-box;min-width:100%;margin-top:1em}.inline-edit-row .notice-error .error{margin:.5em 0;padding:2px}#the-list .inline-edit-row .inline-edit-legend{margin:0;padding:.2em 0;line-height:2.5;font-weight:600}.inline-edit-row fieldset span.checkbox-title,.inline-edit-row fieldset span.title{margin:0;padding:0}.inline-edit-row fieldset label,.inline-edit-row fieldset span.inline-edit-categories-label{display:block;margin:.2em 0;line-height:2.5}.inline-edit-row fieldset.inline-edit-date label{display:inline-block;margin:0;vertical-align:baseline;line-height:2}.inline-edit-row fieldset label.inline-edit-tags{margin-top:0}.inline-edit-row fieldset label.inline-edit-tags span.title{margin:.2em 0;width:auto}.inline-edit-row fieldset label span.title,.inline-edit-row fieldset.inline-edit-date legend{display:block;float:right;width:6em;line-height:2.5}#posts-filter fieldset.inline-edit-date legend{padding:0}.inline-edit-row fieldset .timestamp-wrap,.inline-edit-row fieldset label span.input-text-wrap{display:block;margin-right:6em}.quick-edit-row-post fieldset.inline-edit-col-right label span.title{width:auto;padding-left:.5em}.inline-edit-row .inline-edit-or{margin:.2em 0 .2em 6px;line-height:2.5}.inline-edit-row .input-text-wrap input[type=text]{width:100%}.inline-edit-row fieldset label input[type=checkbox]{vertical-align:middle}.inline-edit-row fieldset label textarea{width:100%;height:4em;vertical-align:top}#wpbody-content .bulk-edit-row fieldset .inline-edit-group label{max-width:50%}#wpbody-content .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child{margin-left:.5em}.inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input{width:6em}.inline-edit-row .inline-edit-legend{text-transform:uppercase}.inline-edit-row fieldset .inline-edit-date{float:right}.inline-edit-row fieldset input[name=aa],.inline-edit-row fieldset input[name=hh],.inline-edit-row fieldset input[name=jj],.inline-edit-row fieldset input[name=mn]{vertical-align:middle;text-align:center;padding:0 4px}.inline-edit-row fieldset label input.inline-edit-password-input{width:8em}#bulk-titles-list,#bulk-titles-list li,.inline-edit-row fieldset ul.cat-checklist input,.inline-edit-row fieldset ul.cat-checklist li{margin:0;position:relative}.inline-edit-row fieldset ul.cat-checklist input{margin-top:-1px;margin-right:3px}.inline-edit-row fieldset label input.inline-edit-menu-order-input{width:3em}.inline-edit-row fieldset label input.inline-edit-slug-input{width:75%}.inline-edit-row #post_parent,.inline-edit-row select[name=page_template]{max-width:80%}.quick-edit-row-post fieldset label.inline-edit-status{float:right}#bulk-titles,ul.cat-checklist{height:14em;border:1px solid #ddd;margin:0 0 5px;padding:.2em 5px;overflow-y:scroll}#bulk-titles .ntdelbutton,#bulk-titles .ntdeltitle,.inline-edit-row fieldset ul.cat-checklist label{display:inline-block;margin:0;padding:3px 0;line-height:20px;vertical-align:top}#bulk-titles .ntdelitem{padding-right:23px}#bulk-titles .ntdelbutton{width:26px;height:26px;margin:0 -26px 0 0;text-align:center;border-radius:3px}#bulk-titles .ntdelbutton:before{display:inline-block;vertical-align:top}#bulk-titles .ntdelbutton:focus{box-shadow:0 0 0 2px #3582c4;outline:2px solid transparent;outline-offset:0}.plugins tbody,.plugins tbody th.check-column{padding:8px 2px 0 0}.plugins tbody th.check-column input[type=checkbox]{margin-top:4px}.updates-table .plugin-title p{margin-top:0}.plugins .inactive th.check-column,.plugins tfoot td.check-column,.plugins thead td.check-column{padding-right:6px}.plugins,.plugins td,.plugins th{color:#000}.plugins tr{background:#fff}.plugins p{margin:0 4px;padding:0}.plugins .desc p{margin:0 0 8px}.plugins td.desc{line-height:1.5}.plugins .desc ol,.plugins .desc ul{margin:0 2em 0 0}.plugins .desc ul{list-style-type:disc}.plugins .row-actions{font-size:13px;padding:0}.plugins .active td,.plugins .active th,.plugins .inactive td,.plugins .inactive th{padding:10px 9px}.plugins .active td,.plugins .active th{background-color:#f0f6fc}.plugins .update td,.plugins .update th{border-bottom:0}.plugin-install #the-list td,.plugins .active td,.plugins .active th,.plugins .inactive td,.plugins .inactive th,.upgrade .plugins td,.upgrade .plugins th{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.plugins tr.active+tr.inactive td,.plugins tr.active+tr.inactive th,.plugins tr.active.plugin-update-tr+tr.inactive td,.plugins tr.active.plugin-update-tr+tr.inactive th{border-top:1px solid rgba(0,0,0,.03);box-shadow:inset 0 1px 0 rgba(0,0,0,.02),inset 0 -1px 0 #dcdcde}.plugins .update td,.plugins .update th,.plugins .updated td,.plugins .updated th,.plugins tr.active+tr.inactive.update td,.plugins tr.active+tr.inactive.update th,.plugins tr.active+tr.inactive.updated td,.plugins tr.active+tr.inactive.updated th,.upgrade .plugins tr:last-of-type td,.upgrade .plugins tr:last-of-type th{box-shadow:none}.plugin-update-tr.active td,.plugins .active th.check-column{border-right:4px solid #72aee6}.wp-list-table.plugins .plugin-title,.wp-list-table.plugins .theme-title{padding-left:12px;white-space:nowrap}.plugins .plugin-title .dashicons,.plugins .plugin-title img{float:right;padding:0 0 0 10px;width:64px;height:64px}.plugins .plugin-title .dashicons:before{padding:2px;background-color:#f0f0f1;box-shadow:inset 0 0 10px rgba(167,170,173,.15);font-size:60px;color:#c3c4c7}#update-themes-table .plugin-title .dashicons,#update-themes-table .plugin-title img{width:85px}.plugins .column-auto-updates{width:14.2em}.plugins .inactive .plugin-title strong{font-weight:400}.plugins .row-actions,.plugins .second{padding:0 0 5px}.plugins .row-actions{white-space:normal;min-width:12em}.plugins .update .row-actions,.plugins .update .second,.plugins .updated .row-actions,.plugins .updated .second{padding-bottom:0}.plugins-php .widefat tfoot td,.plugins-php .widefat tfoot th{border-top-style:solid;border-top-width:1px}.plugins .plugin-update-tr .plugin-update{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1);overflow:hidden;padding:0}.plugins .plugin-update-tr .notice,.plugins .plugin-update-tr div[class=update-message]{margin:5px 40px 15px 20px}.plugins .notice p{margin:.5em 0}.plugins .plugin-description a,.plugins .plugin-update a,.updates-table .plugin-title a{text-decoration:underline}.plugins tr.paused th.check-column{border-right:4px solid #d63638}.plugins tr.paused td,.plugins tr.paused th{background-color:#f6f7f7}.plugins .paused .dashicons-warning,.plugins tr.paused .plugin-title{color:#d63638}.plugins .paused .error-display code,.plugins .paused .error-display p{font-size:90%;color:rgba(0,0,0,.7)}.plugins .resume-link{color:#d63638}.plugin-card .update-now:before{color:#d63638;content:"\f463";display:inline-block;font:normal 20px/1 dashicons;margin:3px -2px 0 5px;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.plugin-card .updating-message:before{content:"\f463";animation:rotation 2s infinite linear}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(-359deg)}}.plugin-card .updated-message:before{color:#68de7c;content:"\f147"}.plugin-install-php h2{clear:both}.plugin-install-php h3{margin:2.5em 0 8px}.plugin-install-php .wp-filter{margin-bottom:0}.plugin-group{overflow:hidden;margin-top:1.5em}.plugin-group h3{margin-top:0}.plugin-card{float:right;margin:0 8px 16px;width:48.5%;width:calc(50% - 8px);background-color:#fff;border:1px solid #dcdcde;box-sizing:border-box}.plugin-card:nth-child(odd){clear:both;margin-right:0}.plugin-card:nth-child(even){margin-left:0}@media screen and (min-width:1600px) and (max-width:2299px){.plugin-card{width:30%;width:calc(33.1% - 8px)}.plugin-card:nth-child(odd){clear:none;margin-right:8px}.plugin-card:nth-child(even){margin-left:8px}.plugin-card:nth-child(3n+1){clear:both;margin-right:0}.plugin-card:nth-child(3n){margin-left:0}}@media screen and (min-width:2300px){.plugin-card{width:25%;width:calc(25% - 12px)}.plugin-card:nth-child(odd){clear:none;margin-right:8px}.plugin-card:nth-child(even){margin-left:8px}.plugin-card:nth-child(4n+1){clear:both;margin-right:0}.plugin-card:nth-child(4n){margin-left:0}}.plugin-card-top{position:relative;padding:20px 20px 10px;min-height:135px}.plugin-action-buttons,div.action-links{margin:0}.plugin-card h3{margin:0 0 12px 12px;font-size:18px;line-height:1.3}.plugin-card .desc,.plugin-card .name{margin-right:148px;margin-left:128px}.plugin-card .action-links{position:absolute;top:20px;left:20px;width:120px}.plugin-action-buttons{clear:left;float:left;margin-bottom:1em;text-align:left}.plugin-action-buttons li{margin-bottom:10px}.plugin-card-bottom{clear:both;padding:12px 20px;background-color:#f6f7f7;border-top:1px solid #dcdcde;overflow:hidden}.plugin-card-bottom .star-rating{display:inline}.plugin-card-update-failed .update-now{font-weight:600}.plugin-card-update-failed .notice-error{margin:0;padding-right:16px;box-shadow:0 -1px 0 #dcdcde}.plugin-card-update-failed .plugin-card-bottom{display:none}.plugin-card .column-rating{line-height:1.76923076}.plugin-card .column-rating,.plugin-card .column-updated{margin-bottom:4px}.plugin-card .column-downloaded,.plugin-card .column-rating{float:right;clear:right;max-width:180px}.plugin-card .column-compatibility,.plugin-card .column-updated{text-align:left;float:left;clear:left;width:65%;width:calc(100% - 180px)}.plugin-card .column-compatibility span:before{font:normal 20px/.5 dashicons;speak:never;display:inline-block;padding:0;top:4px;right:-2px;position:relative;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#3c434a}.plugin-card .column-compatibility .compatibility-incompatible:before{content:"\f158";color:#d63638}.plugin-card .column-compatibility .compatibility-compatible:before{content:"\f147";color:#007017}.plugin-card .notice{margin:20px 20px 0}.plugin-icon{position:absolute;top:20px;right:20px;width:128px;height:128px;margin:0 0 20px 20px}.no-plugin-results{color:#646970;font-size:18px;font-style:normal;margin:0;padding:100px 0 0;text-align:center}.wp-list-table .site-archived,.wp-list-table .site-deleted,.wp-list-table tr.site-archived,.wp-list-table tr.site-deleted{background:#fcf0f1}.wp-list-table .site-mature,.wp-list-table .site-spammed,.wp-list-table tr.site-mature,.wp-list-table tr.site-spammed{background:#fcf9e8}.sites.fixed .column-lastupdated,.sites.fixed .column-registered{width:20%}.sites.fixed .column-users{width:80px}@media screen and (max-width:1100px) and (min-width:782px),(max-width:480px){.plugin-card .action-links{position:static;margin-right:148px;width:auto}.plugin-action-buttons{float:none;margin:1em 0 0;text-align:right}.plugin-action-buttons li{display:inline-block;vertical-align:middle}.plugin-action-buttons li .button{margin-left:20px}.plugin-card h3{margin-left:24px}.plugin-card .desc,.plugin-card .name{margin-left:0}.plugin-card .desc p:first-of-type{margin-top:0}}@media screen and (max-width:782px){.tablenav{height:auto}.tablenav.top{margin:20px 0 5px}.tablenav.bottom{position:relative;margin-top:15px}.tablenav br{display:none}.tablenav br.clear{display:block}.tablenav .view-switch,.tablenav.top .actions{display:none}.view-switch a{width:36px;height:36px;line-height:2.53846153}.tablenav.top .displaying-num{display:none}.tablenav.bottom .displaying-num{position:absolute;left:0;top:11px;margin:0;font-size:14px}.tablenav .tablenav-pages{width:100%;text-align:center;margin:0 0 25px}.tablenav.bottom .tablenav-pages{margin-top:25px}.tablenav.top .tablenav-pages.one-page{display:none}.tablenav.bottom .tablenav-pages.one-page{margin-top:15px;height:0}.tablenav-pages .pagination-links{font-size:16px}.tablenav .tablenav-pages .button,.tablenav .tablenav-pages .tablenav-pages-navspan{min-width:44px;padding:12px 8px;font-size:18px;line-height:1}.tablenav-pages .pagination-links .current-page{min-width:44px;padding:12px 6px;font-size:16px;line-height:1.125}.form-wrap>p{display:none}.wp-list-table th.column-primary~th,.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary~td:not(.check-column){display:none}.wp-list-table thead th.column-primary{width:100%}.wp-list-table tr th.check-column{display:table-cell}.wp-list-table .check-column{width:2.5em}.wp-list-table .column-primary .toggle-row{display:block}.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column){position:relative;clear:both;width:auto!important}.wp-list-table td.column-primary{padding-left:50px}.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary~td:not(.check-column){padding:3px 35% 3px 8px}.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before{position:absolute;right:10px;display:block;overflow:hidden;width:32%;content:attr(data-colname);white-space:nowrap;text-overflow:ellipsis}.wp-list-table .is-expanded td:not(.hidden){display:block!important;overflow:hidden}.column-posts,.widefat .num{text-align:right}#comments-form .fixed .column-author,#commentsdiv .fixed .column-author{display:none!important}.fixed .column-comment .comment-author{display:block}.fixed .column-author.hidden~.column-comment .comment-author{display:none}#the-comment-list .is-expanded td{box-shadow:none}#the-comment-list .is-expanded td:last-child{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.post-com-count .screen-reader-text{position:static;-webkit-clip-path:none;clip-path:none;width:auto;height:auto;margin:0}.column-comments .post-com-count-approved:after,.column-comments .post-com-count-no-comments:after,.column-response .post-com-count-approved:after,.column-response .post-com-count-no-comments:after{content:none}.column-comments .post-com-count [aria-hidden=true],.column-response .post-com-count [aria-hidden=true]{display:none}.column-comments .post-com-count-wrapper,.column-response .post-com-count-wrapper{white-space:normal}.column-comments .post-com-count-wrapper>a,.column-response .post-com-count-wrapper>a{display:block}.column-comments .post-com-count-approved,.column-comments .post-com-count-no-comments,.column-response .post-com-count-approved,.column-response .post-com-count-no-comments{margin-top:0;margin-left:.5em}.column-comments .post-com-count-pending,.column-response .post-com-count-pending{position:static;height:auto;min-width:0;padding:0;border:none;border-radius:0;background:0 0;color:#b32d2e;font-size:inherit;line-height:inherit;text-align:right}.column-comments .post-com-count-pending:hover,.column-response .post-com-count-pending:hover{color:#d63638}.widefat tfoot td.check-column,.widefat thead td.check-column{padding-top:10px}.row-actions{margin-right:-8px;margin-left:-8px;padding-top:4px}body:not(.plugins-php) .row-actions{display:flex;flex-wrap:wrap;gap:8px;color:transparent}.row-actions span .button-link,.row-actions span a{display:inline-block;padding:4px 8px;line-height:1.5}.row-actions span.approve:before,.row-actions span.unapprove:before{content:"| "}#wpbody-content .bulk-edit-row .inline-edit-col-bottom,#wpbody-content .bulk-edit-row .inline-edit-col-left,#wpbody-content .bulk-edit-row-page .inline-edit-col-right,#wpbody-content .bulk-edit-row-post .inline-edit-col-right,#wpbody-content .inline-edit-row-post .inline-edit-col-center,#wpbody-content .quick-edit-row-page .inline-edit-col-left,#wpbody-content .quick-edit-row-page .inline-edit-col-right,#wpbody-content .quick-edit-row-post .inline-edit-col-left,#wpbody-content .quick-edit-row-post .inline-edit-col-right{float:none;width:100%;padding:0}#the-list .inline-edit-row .inline-edit-legend,.inline-edit-row span.title{font-size:16px}.inline-edit-row p.howto{font-size:14px}#wpbody-content .inline-edit-row-page .inline-edit-col-right{margin-top:0}#wpbody-content .bulk-edit-row fieldset .inline-edit-col label,#wpbody-content .bulk-edit-row fieldset .inline-edit-group label,#wpbody-content .quick-edit-row fieldset .inline-edit-col label,#wpbody-content .quick-edit-row fieldset .inline-edit-group label{max-width:none;float:none;margin-bottom:5px}#wpbody .bulk-edit-row fieldset select{display:block;width:100%;max-width:none;box-sizing:border-box}.inline-edit-row fieldset input[name=aa],.inline-edit-row fieldset input[name=hh],.inline-edit-row fieldset input[name=jj],.inline-edit-row fieldset input[name=mn]{font-size:16px;line-height:2;padding:3px 4px}#bulk-titles .ntdelbutton,#bulk-titles .ntdeltitle,.inline-edit-row fieldset ul.cat-checklist label{padding:6px 0;font-size:16px;line-height:28px}#bulk-titles .ntdelitem{padding-right:37px}#bulk-titles .ntdelbutton{width:40px;height:40px;margin:0 -40px 0 0;overflow:hidden}#bulk-titles .ntdelbutton:before{font-size:20px;line-height:28px}.inline-edit-row fieldset label span.title,.inline-edit-row fieldset.inline-edit-date legend{float:none}.inline-edit-row fieldset .inline-edit-col label.inline-edit-tags{padding:0}.inline-edit-row fieldset .timestamp-wrap,.inline-edit-row fieldset label span.input-text-wrap{margin-right:0}.inline-edit-row .inline-edit-or{margin:0 0 0 6px}#commentsdiv #edithead .inside,#edithead .inside{float:none;text-align:right;padding:3px 5px}#commentsdiv #edithead .inside input,#edithead .inside input{width:100%}#edithead label{display:block}#wpbody-content .updates-table .plugin-title{width:auto;white-space:normal}.link-manager-php #posts-filter{margin-top:25px}.link-manager-php .tablenav.bottom{overflow:hidden}.comments-box .toggle-row,.wp-list-table.plugins .toggle-row{display:none}#wpbody-content .wp-list-table.plugins td{display:block;width:auto;padding:10px 9px}#wpbody-content .wp-list-table.plugins .desc.hidden{display:none}#wpbody-content .wp-list-table.plugins .column-description{padding-top:2px}#wpbody-content .wp-list-table.plugins .plugin-title,#wpbody-content .wp-list-table.plugins .theme-title{padding-left:12px;white-space:normal}.wp-list-table.plugins .plugin-title,.wp-list-table.plugins .theme-title{padding-top:13px;padding-bottom:4px}.plugins #the-list .update td,.plugins #the-list .update th,.plugins #the-list tr>td:not(:last-child),.wp-list-table.plugins #the-list .theme-title{box-shadow:none;border-top:none}.plugins #the-list tr td{border-top:none}.plugins tbody{padding:1px 0 0}.plugins .plugin-update-tr:before,.plugins tr.active+tr.inactive td.column-description,.plugins tr.active+tr.inactive th.check-column{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.plugins tr.active+tr.inactive td,.plugins tr.active+tr.inactive th.check-column{border-top:none}.plugins .plugin-update-tr:before{content:"";display:table-cell}.plugins #the-list .plugin-update-tr .plugin-update{border-right:none}.plugin-update-tr .update-message{margin-right:0}.plugins .active.update+.plugin-update-tr:before,.plugins .active.updated+.plugin-update-tr:before{background-color:#f0f6fc;border-right:4px solid #72aee6}.plugins .plugin-update-tr .update-message{margin-right:0}.wp-list-table.plugins .plugin-title strong,.wp-list-table.plugins .theme-title strong{font-size:1.4em;line-height:1.5}.plugins tbody th.check-column{padding:8px 5px 0 0}.plugins .inactive th.check-column,.plugins tfoot td.check-column,.plugins thead td.check-column{padding-right:9px}table.plugin-install .column-description,table.plugin-install .column-name,table.plugin-install .column-rating,table.plugin-install .column-version{display:block;width:auto}table.plugin-install th.column-description,table.plugin-install th.column-name,table.plugin-install th.column-rating,table.plugin-install th.column-version{display:none}table.plugin-install td.column-name strong{font-size:1.4em;line-height:1.6em}table.plugin-install #the-list td{box-shadow:none}table.plugin-install #the-list tr{display:block;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.plugin-card{margin-right:0;margin-left:0;width:100%}table.media .column-title .has-media-icon~.row-actions{margin-right:0;clear:both}}@media screen and (max-width:480px){.tablenav-pages .current-page{margin:0}.tablenav.bottom .displaying-num{position:relative;top:0;display:block;text-align:left;padding-bottom:.5em}.tablenav.bottom .tablenav-pages.one-page{height:auto}.tablenav-pages .tablenav-paging-text{float:right;width:100%;padding-top:.5em}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/list-tables.css b/tools/storybook/wordpress/css/list-tables.css new file mode 100644 index 00000000000..84e390d83eb --- /dev/null +++ b/tools/storybook/wordpress/css/list-tables.css @@ -0,0 +1,2246 @@ +.response-links { + display: block; + margin-bottom: 1em; +} + +.response-links a { + display: block; +} + +.response-links a.comments-edit-item-link { + font-weight: 600; +} + +.response-links a.comments-view-item-link { + font-size: 12px; +} + +.post-com-count-wrapper strong { + font-weight: 400; +} + +.comments-view-item-link { + display: inline-block; + clear: both; +} + +.column-response .post-com-count-wrapper, +.column-comments .post-com-count-wrapper { + white-space: nowrap; + word-wrap: normal; +} + +/* comments bubble common */ +.column-response .post-com-count, +.column-comments .post-com-count { + display: inline-block; + vertical-align: top; +} + +/* comments bubble approved */ +.column-response .post-com-count-no-comments, +.column-response .post-com-count-approved, +.column-comments .post-com-count-no-comments, +.column-comments .post-com-count-approved { + margin-top: 5px; +} + +.column-response .comment-count-no-comments, +.column-response .comment-count-approved, +.column-comments .comment-count-no-comments, +.column-comments .comment-count-approved { + box-sizing: border-box; + display: block; + padding: 0 8px; + min-width: 24px; + height: 2em; + border-radius: 5px; + background-color: #646970; + color: #fff; + font-size: 11px; + line-height: 1.90909090; + text-align: center; +} + +.column-response .post-com-count-no-comments:after, +.column-response .post-com-count-approved:after, +.column-comments .post-com-count-no-comments:after, +.column-comments .post-com-count-approved:after { + content: ""; + display: block; + margin-left: 8px; + width: 0; + height: 0; + border-top: 5px solid #646970; + border-right: 5px solid transparent; +} + +.column-response a.post-com-count-approved:hover .comment-count-approved, +.column-response a.post-com-count-approved:focus .comment-count-approved, +.column-comments a.post-com-count-approved:hover .comment-count-approved, +.column-comments a.post-com-count-approved:focus .comment-count-approved { + background: #2271b1; +} + +.column-response a.post-com-count-approved:hover:after, +.column-response a.post-com-count-approved:focus:after, +.column-comments a.post-com-count-approved:hover:after, +.column-comments a.post-com-count-approved:focus:after { + border-top-color: #2271b1; +} + +/* @todo: consider to use a single rule for these counters and the admin menu counters. */ +.column-response .post-com-count-pending, +.column-comments .post-com-count-pending { + position: relative; + left: -3px; + padding: 0 5px; + min-width: 7px; + height: 17px; + border: 2px solid #fff; + border-radius: 11px; + background: #d63638; + color: #fff; + font-size: 9px; + line-height: 1.88888888; + text-align: center; +} + +.column-response .post-com-count-no-pending, +.column-comments .post-com-count-no-pending { + display: none; +} + +/* comments */ + +.commentlist li { + padding: 1em 1em .2em; + margin: 0; + border-bottom: 1px solid #c3c4c7; +} + +.commentlist li li { + border-bottom: 0; + padding: 0; +} + +.commentlist p { + padding: 0; + margin: 0 0 .8em; +} + +#submitted-on, +.submitted-on { + color: #50575e; +} + +/* reply to comments */ +#replyrow td { + padding: 2px; +} + +#replysubmit { + margin: 0; + padding: 5px 7px 10px; + overflow: hidden; +} + +#replysubmit .reply-submit-buttons { + margin-bottom: 0; +} + +#replysubmit .button { + margin-right: 5px; +} + +#replysubmit .spinner { + float: none; + margin: -4px 0 0; +} + +#replyrow.inline-edit-row fieldset.comment-reply { + font-size: inherit; + line-height: inherit; +} + +#replyrow legend { + margin: 0; + padding: .2em 5px 0; + font-size: 13px; + line-height: 1.4; + font-weight: 600; +} + +#replyrow.inline-edit-row label { + display: inline; + vertical-align: baseline; + line-height: inherit; +} + +#edithead .inside, +#commentsdiv #edithead .inside { + float: left; + padding: 3px 0 2px 5px; + margin: 0; + text-align: center; +} + +#edithead .inside input { + width: 180px; +} + +#edithead label { + padding: 2px 0; +} + +#replycontainer { + padding: 5px; +} + +#replycontent { + height: 120px; + box-shadow: none; +} + +#replyerror { + border-color: #dcdcde; + background-color: #f6f7f7; +} + +/* @todo: is this used? */ +.commentlist .avatar { + vertical-align: text-top; +} + +#the-comment-list tr.undo, +#the-comment-list div.undo { + background-color: #f6f7f7; +} + +#the-comment-list .unapproved th, +#the-comment-list .unapproved td { + background-color: #fcf9e8; +} + +#the-comment-list .unapproved th.check-column { + border-left: 4px solid #d63638; +} + +#the-comment-list .unapproved th.check-column input { + margin-left: 4px; +} + +#the-comment-list .approve a { + color: #007017; +} + +#the-comment-list .unapprove a { + color: #996800; +} + +#the-comment-list th, +#the-comment-list td { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +#the-comment-list tr:last-child th, +#the-comment-list tr:last-child td { + box-shadow: none; +} + +#the-comment-list tr.unapproved + tr.approved th, +#the-comment-list tr.unapproved + tr.approved td { + border-top: 1px solid rgba(0, 0, 0, 0.03); +} + +/* table vim shortcuts */ +.vim-current, +.vim-current th, +.vim-current td { + background-color: #f0f6fc !important; +} + +th .comment-grey-bubble { + height: 16px; + width: 16px; +} + +th .comment-grey-bubble:before { + content: "\f101"; + font: normal 20px/.5 dashicons; + speak: never; + display: inline-block; + padding: 0; + top: 4px; + left: -4px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #3c434a; +} + +/*------------------------------------------------------------------------------ + 10.0 - List Posts (/Pages/etc) +------------------------------------------------------------------------------*/ + +table.fixed { + table-layout: fixed; +} + +.fixed .column-rating, +.fixed .column-visible { + width: 8%; +} + +.fixed .column-posts, +.fixed .column-parent, +.fixed .column-links, +.fixed .column-author, +.fixed .column-format { + width: 10%; +} + +.fixed .column-date { + width: 14%; +} + +.column-date span[title] { + -webkit-text-decoration: dotted underline; + text-decoration: dotted underline; +} + +.fixed .column-posts { + width: 74px; +} + +.fixed .column-role, +.fixed .column-posts { + -webkit-hyphens: auto; + hyphens: auto; +} + +.fixed .column-comment .comment-author { + display: none; +} + +.fixed .column-response, +.fixed .column-categories, +.fixed .column-tags, +.fixed .column-rel, +.fixed .column-role { + width: 15%; +} + +.fixed .column-slug { + width: 25%; +} + +.fixed .column-locations { + width: 35%; +} + +.fixed .column-comments { + width: 5.5em; + padding: 8px 0; + text-align: left; +} + +.fixed .column-comments .vers { + padding-left: 3px; +} + +td.column-title strong, +td.plugin-title strong { + display: block; + margin-bottom: .2em; + font-size: 14px; +} + +td.column-title p, +td.plugin-title p { + margin: 6px 0; +} + +/* Media file column */ +table.media .column-title .media-icon { + float: left; + min-height: 60px; + margin: 0 9px 0 0; +} + +table.media .column-title .media-icon img { + max-width: 60px; + height: auto; + vertical-align: top; /* Remove descender white-space. */ +} + +table.media .column-title .has-media-icon ~ .row-actions { + margin-left: 70px; /* 60px image + margin */ +} + +table.media .column-title .filename { + margin-bottom: 0.2em; +} + +/* Media Copy to clipboard row action */ +.media .row-actions .copy-to-clipboard-container { + display: inline; + position: relative; +} + +.media .row-actions .copy-to-clipboard-container .success { + position: absolute; + left: 50%; + transform: translate(-50%, -100%); + background: #000; + color: #fff; + border-radius: 5px; + margin: 0; + padding: 2px 5px; +} + +/* @todo: pick a consistent list table selector */ +.wp-list-table a { + transition: none; +} + +#the-list tr:last-child td, +#the-list tr:last-child th { + border-bottom: none !important; + box-shadow: none; +} + +#comments-form .fixed .column-author { + width: 20%; +} + +#commentsdiv.postbox .inside { + margin: 0; + padding: 0; +} + +#commentsdiv .inside .row-actions { + line-height: 1.38461538; +} + +#commentsdiv .inside .column-author { + width: 25%; +} + +#commentsdiv .column-comment p { + margin: 0.6em 0; + padding: 0; +} + +#commentsdiv #replyrow td { + padding: 0; +} + +#commentsdiv p { + padding: 8px 10px; + margin: 0; +} + +#commentsdiv .comments-box { + border: 0 none; +} + +#commentsdiv .comments-box thead th, +#commentsdiv .comments-box thead td { + background: transparent; + padding: 0 7px 4px; +} + +#commentsdiv .comments-box tr:last-child td { + border-bottom: 0 none; +} + +#commentsdiv #edithead .inside input { + width: 160px; +} + +.sorting-indicator { + display: block; + visibility: hidden; + width: 10px; + height: 4px; + margin-top: 8px; + margin-left: 7px; +} + +.sorting-indicator:before { + content: "\f142"; + font: normal 20px/1 dashicons; + speak: never; + display: inline-block; + padding: 0; + top: -4px; + left: -8px; + color: #3c434a; + line-height: 0.5; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #3c434a; +} + +.column-comments .sorting-indicator:before { + top: 0; + left: -10px; +} + +th.sorted.asc .sorting-indicator:before, +th.desc:hover span.sorting-indicator:before, +th.desc a:focus span.sorting-indicator:before { + content: "\f142"; +} + +th.sorted.desc .sorting-indicator:before, +th.asc:hover span.sorting-indicator:before, +th.asc a:focus span.sorting-indicator:before { + content: "\f140"; +} + +.wp-list-table .toggle-row { + position: absolute; + right: 8px; + top: 10px; + display: none; + padding: 0; + width: 40px; + height: 40px; + border: none; + outline: none; + background: transparent; +} + +.wp-list-table .toggle-row:hover { + cursor: pointer; +} + +.wp-list-table .toggle-row:focus:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.wp-list-table .toggle-row:active { + box-shadow: none; +} + +.wp-list-table .toggle-row:before { + position: absolute; + top: -5px; + left: 10px; + border-radius: 50%; + display: block; + padding: 1px 2px 1px 0; + color: #3c434a; /* same as table headers sort arrows */ + content: "\f140"; + font: normal 20px/1 dashicons; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + speak: never; +} + +.wp-list-table .is-expanded .toggle-row:before { + content: "\f142"; +} + +.locked-indicator { + display: none; + margin-left: 6px; + height: 20px; + width: 16px; +} + +.locked-indicator-icon:before { + color: #8c8f94; + content: "\f160"; + display: inline-block; + font: normal 20px/1 dashicons; + speak: never; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.locked-info { + display: none; + margin-top: 4px; +} + +.locked-text { + vertical-align: top; +} + +.wp-locked .locked-indicator, +.wp-locked .locked-info { + display: block; +} + +tr.wp-locked .check-column label, +tr.wp-locked .check-column input[type="checkbox"], +tr.wp-locked .row-actions .inline, +tr.wp-locked .row-actions .trash { + display: none; +} + +.fixed .column-comments .sorting-indicator { + margin-top: 3px; +} + +#menu-locations-wrap .widefat { + width: 60%; +} + +.widefat th.sortable, +.widefat th.sorted { + padding: 0; +} + +th.sortable a, +th.sorted a { + display: block; + overflow: hidden; + padding: 8px; +} + +.fixed .column-comments.sortable a, +.fixed .column-comments.sorted a { + padding: 8px 0; +} + +th.sortable a span, +th.sorted a span { + float: left; + cursor: pointer; +} + +th.sorted .sorting-indicator, +th.desc:hover span.sorting-indicator, +th.desc a:focus span.sorting-indicator, +th.asc:hover span.sorting-indicator, +th.asc a:focus span.sorting-indicator { + visibility: visible; +} + +.tablenav-pages .current-page { + margin: 0 2px 0 0; + font-size: 13px; + text-align: center; +} + +.tablenav .total-pages { + margin-right: 2px; +} + +.tablenav #table-paging { + margin-left: 2px; +} + +.tablenav { + clear: both; + height: 30px; + margin: 6px 0 4px; + padding-top: 5px; + vertical-align: middle; +} + +.tablenav.themes { + max-width: 98%; +} + +.tablenav .tablenav-pages { + float: right; + margin: 0 0 9px; +} + +.tablenav .no-pages, +.tablenav .one-page .pagination-links { + display: none; +} + +.tablenav .tablenav-pages .button, +.tablenav .tablenav-pages .tablenav-pages-navspan { + display: inline-block; + vertical-align: baseline; + min-width: 30px; + min-height: 30px; + margin: 0; + padding: 0 4px; + font-size: 16px; + line-height: 1.625; /* 26px */ + text-align: center; +} + +.tablenav .displaying-num { + margin-right: 7px; +} + +.tablenav .one-page .displaying-num { + display: inline-block; + margin: 5px 0; +} + +.tablenav .actions { + padding: 0 8px 0 0; +} + +.wp-filter .actions { + display: inline-block; + vertical-align: middle; +} + +.tablenav .delete { + margin-right: 20px; +} + +/* This view-switcher is still used on multisite. */ +.tablenav .view-switch { + float: right; + margin: 0 5px; + padding-top: 3px; +} + +.wp-filter .view-switch { + display: inline-block; + vertical-align: middle; + padding: 12px 0; + margin: 0 8px 0 2px; +} + +.media-toolbar.wp-filter .view-switch { + margin: 0 12px 0 2px; +} + +.view-switch a { + float: left; + width: 28px; + height: 28px; + text-align: center; + line-height: 1.84615384; + text-decoration: none; +} + +.view-switch a:before { + color: #c3c4c7; + display: inline-block; + font: normal 20px/1 dashicons; + speak: never; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.view-switch a:hover:before, +.view-switch a:focus:before { + color: #787c82; +} + +.view-switch a.current:before { + color: #2271b1; +} + +.view-switch .view-list:before { + content: "\f163"; +} + +.view-switch .view-excerpt:before { + content: "\f164"; +} + +.view-switch .view-grid:before { + content: "\f509"; +} + +.filter { + float: left; + margin: -5px 0 0 10px; +} + +.filter .subsubsub { + margin-left: -10px; + margin-top: 13px; +} +.screen-per-page { + width: 4em; +} + +#posts-filter .wp-filter { + margin-bottom: 0; +} + +#posts-filter fieldset { + float: left; + margin: 0 1.5ex 1em 0; + padding: 0; +} + +#posts-filter fieldset legend { + padding: 0 0 .2em 1px; +} + +p.pagenav { + margin: 0; + display: inline; +} + +.pagenav span { + font-weight: 600; + margin: 0 6px; +} + +.row-title { + font-size: 14px !important; + font-weight: 600; +} + +.column-comment .comment-author { + margin-bottom: 0.6em; +} + +.column-author img, +.column-username img, +.column-comment .comment-author img { + float: left; + margin-right: 10px; + margin-top: 1px; +} + +.row-actions { + color: #a7aaad; + font-size: 13px; + padding: 2px 0 0; + position: relative; + left: -9999em; +} + +/* ticket #34150 */ +.rtl .row-actions a { + display: inline-block; +} + +.row-actions .network_only, +.row-actions .network_active { + color: #000; +} + +.no-js .row-actions, +tr:hover .row-actions, +.mobile .row-actions, +.row-actions.visible, +.comment-item:hover .row-actions { + position: static; +} + +/* deprecated */ +.row-actions-visible { + padding: 2px 0 0; +} + + +/*------------------------------------------------------------------------------ + 10.1 - Inline Editing +------------------------------------------------------------------------------*/ + +/* +.quick-edit* is for Quick Edit +.bulk-edit* is for Bulk Edit +.inline-edit* is for everything +*/ + +/* Layout */ + +#wpbody-content .inline-edit-row fieldset { + float: left; + margin: 0; + padding: 0 12px 0 0; + width: 100%; + box-sizing: border-box; +} + +#wpbody-content .inline-edit-row td fieldset:last-of-type { + padding-right: 0; +} + +tr.inline-edit-row td { + padding: 0; + /* Prevents the focus style on .inline-edit-wrapper from being cutted-off */ + position: relative; +} + +.inline-edit-wrapper { + display: flow-root; + padding: 0 12px; + border: 1px solid transparent; + border-radius: 4px; +} + +.inline-edit-wrapper:focus { + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +#wpbody-content .quick-edit-row-post .inline-edit-col-left { + width: 40%; +} + +#wpbody-content .quick-edit-row-post .inline-edit-col-right { + width: 39%; +} + +#wpbody-content .inline-edit-row-post .inline-edit-col-center { + width: 20%; +} + +#wpbody-content .quick-edit-row-page .inline-edit-col-left { + width: 50%; +} + +#wpbody-content .quick-edit-row-page .inline-edit-col-right, +#wpbody-content .bulk-edit-row-post .inline-edit-col-right { + width: 50%; +} + +#wpbody-content .bulk-edit-row .inline-edit-col-left { + width: 30%; +} + +#wpbody-content .bulk-edit-row-page .inline-edit-col-right { + width: 69%; +} + +#wpbody-content .bulk-edit-row .inline-edit-col-bottom { + float: right; + width: 69%; +} + +#wpbody-content .inline-edit-row-page .inline-edit-col-right { + margin-top: 27px; +} + +.inline-edit-row fieldset .inline-edit-group { + clear: both; + line-height: 2.5; +} + +.inline-edit-row .submit { + display: flex; + flex-wrap: wrap; + align-items: center; + clear: both; + margin: 0; + padding: 0.5em 0 1em; +} + +.inline-edit-save.submit .button { + margin-right: 8px; +} + +.inline-edit-save .spinner { + float: none; + margin: 0; +} + +.inline-edit-row .notice-error { + box-sizing: border-box; + min-width: 100%; + margin-top: 1em; +} + +.inline-edit-row .notice-error .error { + margin: 0.5em 0; + padding: 2px; +} + +/* Positioning */ + +/* Needs higher specificity for the padding */ +#the-list .inline-edit-row .inline-edit-legend { + margin: 0; + padding: 0.2em 0; + line-height: 2.5; + font-weight: 600; +} + +.inline-edit-row fieldset span.title, +.inline-edit-row fieldset span.checkbox-title { + margin: 0; + padding: 0; +} + +.inline-edit-row fieldset label, +.inline-edit-row fieldset span.inline-edit-categories-label { + display: block; + margin: .2em 0; + line-height: 2.5; +} + +.inline-edit-row fieldset.inline-edit-date label { + display: inline-block; + margin: 0; + vertical-align: baseline; + line-height: 2; +} + +.inline-edit-row fieldset label.inline-edit-tags { + margin-top: 0; +} + +.inline-edit-row fieldset label.inline-edit-tags span.title { + margin: .2em 0; + width: auto; +} + +.inline-edit-row fieldset label span.title, +.inline-edit-row fieldset.inline-edit-date legend { + display: block; + float: left; + width: 6em; + line-height: 2.5; +} + +#posts-filter fieldset.inline-edit-date legend { + padding: 0; +} + +.inline-edit-row fieldset label span.input-text-wrap, +.inline-edit-row fieldset .timestamp-wrap { + display: block; + margin-left: 6em; +} + +.quick-edit-row-post fieldset.inline-edit-col-right label span.title { + width: auto; + padding-right: 0.5em; +} + +.inline-edit-row .inline-edit-or { + margin: .2em 6px .2em 0; + line-height: 2.5; +} + +.inline-edit-row .input-text-wrap input[type=text] { + width: 100%; +} + +.inline-edit-row fieldset label input[type=checkbox] { + vertical-align: middle; +} + +.inline-edit-row fieldset label textarea { + width: 100%; + height: 4em; + vertical-align: top; +} + +#wpbody-content .bulk-edit-row fieldset .inline-edit-group label { + max-width: 50%; +} + +#wpbody-content .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child { + margin-right: 0.5em +} + +.inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input { + width: 6em; +} + +/* Styling */ +.inline-edit-row .inline-edit-legend { + text-transform: uppercase; +} + +/* Specific Elements */ +.inline-edit-row fieldset .inline-edit-date { + float: left; +} + +.inline-edit-row fieldset input[name=jj], +.inline-edit-row fieldset input[name=hh], +.inline-edit-row fieldset input[name=mn], +.inline-edit-row fieldset input[name=aa] { + vertical-align: middle; + text-align: center; + padding: 0 4px; +} + +.inline-edit-row fieldset label input.inline-edit-password-input { + width: 8em; +} + +#bulk-titles-list, +#bulk-titles-list li, +.inline-edit-row fieldset ul.cat-checklist li, +.inline-edit-row fieldset ul.cat-checklist input { + margin: 0; + position: relative; /* RTL fix, #WP27629 */ +} + +.inline-edit-row fieldset ul.cat-checklist input { + margin-top: -1px; + margin-left: 3px; +} + +.inline-edit-row fieldset label input.inline-edit-menu-order-input { + width: 3em; +} + +.inline-edit-row fieldset label input.inline-edit-slug-input { + width: 75%; +} + +.inline-edit-row #post_parent, +.inline-edit-row select[name="page_template"] { + max-width: 80%; +} + +.quick-edit-row-post fieldset label.inline-edit-status { + float: left; +} + +#bulk-titles, +ul.cat-checklist { + height: 14em; + border: 1px solid #ddd; + margin: 0 0 5px; + padding: 0.2em 5px; + overflow-y: scroll; +} + +#bulk-titles .ntdelbutton, +#bulk-titles .ntdeltitle, +.inline-edit-row fieldset ul.cat-checklist label { + display: inline-block; + margin: 0; + padding: 3px 0; + line-height: 20px; + vertical-align: top; +} + +#bulk-titles .ntdelitem { + padding-left: 23px; +} + +#bulk-titles .ntdelbutton { + width: 26px; + height: 26px; + margin: 0 0 0 -26px; + text-align: center; + border-radius: 3px; +} + +#bulk-titles .ntdelbutton:before { + display: inline-block; + vertical-align: top; +} + +#bulk-titles .ntdelbutton:focus { + box-shadow: 0 0 0 2px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + /* Reset inherited offset from Gutenberg */ + outline-offset: 0; +} + +/*------------------------------------------------------------------------------ + 17.0 - Plugins +------------------------------------------------------------------------------*/ + +.plugins tbody th.check-column, +.plugins tbody { + padding: 8px 0 0 2px; +} + +.plugins tbody th.check-column input[type=checkbox] { + margin-top: 4px; +} + +.updates-table .plugin-title p { + margin-top: 0; +} + +.plugins thead td.check-column, +.plugins tfoot td.check-column, +.plugins .inactive th.check-column { + padding-left: 6px; +} + +.plugins, +.plugins th, +.plugins td { + color: #000; +} + +.plugins tr { + background: #fff; +} + +.plugins p { + margin: 0 4px; + padding: 0; +} + +.plugins .desc p { + margin: 0 0 8px; +} + +.plugins td.desc { + line-height: 1.5; +} + +.plugins .desc ul, +.plugins .desc ol { + margin: 0 0 0 2em; +} + +.plugins .desc ul { + list-style-type: disc; +} + +.plugins .row-actions { + font-size: 13px; + padding: 0; +} + +.plugins .inactive td, +.plugins .inactive th, +.plugins .active td, +.plugins .active th { + padding: 10px 9px; +} + +.plugins .active td, +.plugins .active th { + background-color: #f0f6fc; +} + +.plugins .update th, +.plugins .update td { + border-bottom: 0; +} + +.plugins .inactive td, +.plugins .inactive th, +.plugins .active td, +.plugins .active th, +.plugin-install #the-list td, +.upgrade .plugins td, +.upgrade .plugins th { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.plugins tr.active.plugin-update-tr + tr.inactive th, +.plugins tr.active.plugin-update-tr + tr.inactive td, +.plugins tr.active + tr.inactive th, +.plugins tr.active + tr.inactive td { + border-top: 1px solid rgba(0, 0, 0, 0.03); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #dcdcde; +} + +.plugins .update td, +.plugins .update th, +.upgrade .plugins tr:last-of-type td, +.upgrade .plugins tr:last-of-type th, +.plugins tr.active + tr.inactive.update th, +.plugins tr.active + tr.inactive.update td, +.plugins .updated td, +.plugins .updated th, +.plugins tr.active + tr.inactive.updated th, +.plugins tr.active + tr.inactive.updated td { + box-shadow: none; +} + +.plugins .active th.check-column, +.plugin-update-tr.active td { + border-left: 4px solid #72aee6; +} + +.wp-list-table.plugins .plugin-title, +.wp-list-table.plugins .theme-title { + padding-right: 12px; + white-space: nowrap; +} + +.plugins .plugin-title img, +.plugins .plugin-title .dashicons { + float: left; + padding: 0 10px 0 0; + width: 64px; + height: 64px; +} + +.plugins .plugin-title .dashicons:before { + padding: 2px; + background-color: #f0f0f1; + box-shadow: inset 0 0 10px rgba(167, 170, 173, 0.15); + font-size: 60px; + color: #c3c4c7; +} + +#update-themes-table .plugin-title img, +#update-themes-table .plugin-title .dashicons { + width: 85px; +} + +.plugins .column-auto-updates { + width: 14.2em; +} + +.plugins .inactive .plugin-title strong { + font-weight: 400; +} + +.plugins .second, +.plugins .row-actions { + padding: 0 0 5px; +} + +.plugins .row-actions { + white-space: normal; + min-width: 12em; +} + +.plugins .update .second, +.plugins .update .row-actions, +.plugins .updated .second, +.plugins .updated .row-actions { + padding-bottom: 0; +} + +.plugins-php .widefat tfoot th, +.plugins-php .widefat tfoot td { + border-top-style: solid; + border-top-width: 1px; +} + +.plugins .plugin-update-tr .plugin-update { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + overflow: hidden; /* clearfix */ + padding: 0; +} + +.plugins .plugin-update-tr .notice, +.plugins .plugin-update-tr div[class="update-message"] { /* back-compat for pre-4.6 */ + margin: 5px 20px 15px 40px; +} + +.plugins .notice p { + margin: 0.5em 0; +} + +.plugins .plugin-description a, +.plugins .plugin-update a, +.updates-table .plugin-title a { + text-decoration: underline; +} + +.plugins tr.paused th.check-column { + border-left: 4px solid #d63638; +} + +.plugins tr.paused th, +.plugins tr.paused td { + background-color: #f6f7f7; +} + +.plugins tr.paused .plugin-title, +.plugins .paused .dashicons-warning { + color: #d63638; +} + +.plugins .paused .error-display p, +.plugins .paused .error-display code { + font-size: 90%; + color: rgba(0, 0, 0, 0.7); +} + +.plugins .resume-link { + color: #d63638; +} + +.plugin-card .update-now:before { + color: #d63638; + content: "\f463"; + display: inline-block; + font: normal 20px/1 dashicons; + margin: 3px 5px 0 -2px; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.plugin-card .updating-message:before { + content: "\f463"; + animation: rotation 2s infinite linear; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +} + +.plugin-card .updated-message:before { + color: #68de7c; + content: "\f147"; +} + +.plugin-install-php h2 { + clear: both; +} + +.plugin-install-php h3 { + margin: 2.5em 0 8px; +} + +.plugin-install-php .wp-filter { + margin-bottom: 0; +} + +/* Plugin card table view */ +.plugin-group { + overflow: hidden; /* clearfix */ + margin-top: 1.5em; +} + +.plugin-group h3 { + margin-top: 0; +} + +.plugin-card { + float: left; + margin: 0 8px 16px; + width: 48.5%; + width: calc( 50% - 8px ); + background-color: #fff; + border: 1px solid #dcdcde; + box-sizing: border-box; +} + +.plugin-card:nth-child(odd) { + clear: both; + margin-left: 0; +} + +.plugin-card:nth-child(even) { + margin-right: 0; +} + +@media screen and (min-width: 1600px) and ( max-width: 2299px ) { + .plugin-card { + width: 30%; + width: calc( 33.1% - 8px ); + } + + .plugin-card:nth-child(odd) { + clear: none; + margin-left: 8px; + } + + .plugin-card:nth-child(even) { + margin-right: 8px; + } + + .plugin-card:nth-child(3n+1) { + clear: both; + margin-left: 0; + } + + .plugin-card:nth-child(3n) { + margin-right: 0; + } +} + +@media screen and (min-width: 2300px) { + .plugin-card { + width: 25%; + width: calc( 25% - 12px ); + } + + .plugin-card:nth-child(odd) { + clear: none; + margin-left: 8px; + } + + .plugin-card:nth-child(even) { + margin-right: 8px; + } + + .plugin-card:nth-child(4n+1) { + clear: both; + margin-left: 0; + } + + .plugin-card:nth-child(4n) { + margin-right: 0; + } +} + +.plugin-card-top { + position: relative; + padding: 20px 20px 10px; + min-height: 135px; +} + +div.action-links, +.plugin-action-buttons { + margin: 0; /* Override existing margins */ +} + +.plugin-card h3 { + margin: 0 12px 12px 0; + font-size: 18px; + line-height: 1.3; +} + +.plugin-card .name, +.plugin-card .desc { + margin-left: 148px; /* icon + margin */ + margin-right: 128px; /* action links + margin */ +} + +.plugin-card .action-links { + position: absolute; + top: 20px; + right: 20px; + width: 120px; +} + +.plugin-action-buttons { + clear: right; + float: right; + margin-bottom: 1em; + text-align: right; +} + +.plugin-action-buttons li { + margin-bottom: 10px; +} + +.plugin-card-bottom { + clear: both; + padding: 12px 20px; + background-color: #f6f7f7; + border-top: 1px solid #dcdcde; + overflow: hidden; +} + +.plugin-card-bottom .star-rating { + display: inline; +} + +.plugin-card-update-failed .update-now { + font-weight: 600; +} + +.plugin-card-update-failed .notice-error { + margin: 0; + padding-left: 16px; + box-shadow: 0 -1px 0 #dcdcde; +} + +.plugin-card-update-failed .plugin-card-bottom { + display: none; +} + +.plugin-card .column-rating { + line-height: 1.76923076; +} + +.plugin-card .column-rating, +.plugin-card .column-updated { + margin-bottom: 4px; +} + +.plugin-card .column-rating, +.plugin-card .column-downloaded { + float: left; + clear: left; + max-width: 180px; +} + +.plugin-card .column-updated, +.plugin-card .column-compatibility { + text-align: right; + float: right; + clear: right; + width: 65%; + width: calc( 100% - 180px ); +} + +.plugin-card .column-compatibility span:before { + font: normal 20px/.5 dashicons; + speak: never; + display: inline-block; + padding: 0; + top: 4px; + left: -2px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #3c434a; +} + +.plugin-card .column-compatibility .compatibility-incompatible:before { + content: "\f158"; + color: #d63638; +} + +.plugin-card .column-compatibility .compatibility-compatible:before { + content: "\f147"; + color: #007017; +} + +.plugin-card .notice { + margin: 20px 20px 0; +} + +.plugin-icon { + position: absolute; + top: 20px; + left: 20px; + width: 128px; + height: 128px; + margin: 0 20px 20px 0; +} + +.no-plugin-results { + color: #646970; /* same as no themes and no media */ + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0 0; + text-align: center; +} + +/* ms */ +/* Background Color for Site Status */ +.wp-list-table .site-deleted, +.wp-list-table tr.site-deleted, +.wp-list-table .site-archived, +.wp-list-table tr.site-archived { + background: #fcf0f1; +} +.wp-list-table .site-spammed, +.wp-list-table tr.site-spammed, +.wp-list-table .site-mature, +.wp-list-table tr.site-mature { + background: #fcf9e8; +} + +.sites.fixed .column-lastupdated, +.sites.fixed .column-registered { + width: 20%; +} + +.sites.fixed .column-users { + width: 80px; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) { + .plugin-card .action-links { + position: static; + margin-left: 148px; + width: auto; + } + + .plugin-action-buttons { + float: none; + margin: 1em 0 0; + text-align: left; + } + + .plugin-action-buttons li { + display: inline-block; + vertical-align: middle; + } + + .plugin-action-buttons li .button { + margin-right: 20px; + } + + .plugin-card h3 { + margin-right: 24px; + } + + .plugin-card .name, + .plugin-card .desc { + margin-right: 0; + } + + .plugin-card .desc p:first-of-type { + margin-top: 0; + } +} + +@media screen and (max-width: 782px) { + /* WP List Table Options & Filters */ + .tablenav { + height: auto; + } + + .tablenav.top { + margin: 20px 0 5px; + } + + .tablenav.bottom { + position: relative; + margin-top: 15px; + } + + .tablenav br { + display: none; + } + + .tablenav br.clear { + display: block; + } + + .tablenav.top .actions, + .tablenav .view-switch { + display: none; + } + + .view-switch a { + width: 36px; + height: 36px; + line-height: 2.53846153; + } + + /* Pagination */ + .tablenav.top .displaying-num { + display: none; + } + + .tablenav.bottom .displaying-num { + position: absolute; + right: 0; + top: 11px; + margin: 0; + font-size: 14px; + } + + .tablenav .tablenav-pages { + width: 100%; + text-align: center; + margin: 0 0 25px; + } + + .tablenav.bottom .tablenav-pages { + margin-top: 25px; + } + + .tablenav.top .tablenav-pages.one-page { + display: none; + } + + .tablenav.bottom .tablenav-pages.one-page { + margin-top: 15px; + height: 0; + } + + .tablenav-pages .pagination-links { + font-size: 16px; + } + + .tablenav .tablenav-pages .button, + .tablenav .tablenav-pages .tablenav-pages-navspan { + min-width: 44px; + padding: 12px 8px; + font-size: 18px; + line-height: 1; + } + + .tablenav-pages .pagination-links .current-page { + min-width: 44px; + padding: 12px 6px; + font-size: 16px; + line-height: 1.125; + } + + /* WP List Table Adjustments: General */ + .form-wrap > p { + display: none; + } + + .wp-list-table th.column-primary ~ th, + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { + display: none; + } + + .wp-list-table thead th.column-primary { + width: 100%; + } + + /* Checkboxes need to show */ + .wp-list-table tr th.check-column { + display: table-cell; + } + + .wp-list-table .check-column { + width: 2.5em; + } + + .wp-list-table .column-primary .toggle-row { + display: block; + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { + position: relative; + clear: both; + width: auto !important; /* needs to override some columns that are more specifically targeted */ + } + + .wp-list-table td.column-primary { + padding-right: 50px; /* space for toggle button */ + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { + padding: 3px 8px 3px 35%; + } + + .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before { + position: absolute; + left: 10px; /* match padding of regular table cell */ + display: block; + overflow: hidden; + width: 32%; /* leave a little space for a gutter */ + content: attr(data-colname); + white-space: nowrap; + text-overflow: ellipsis; + } + + .wp-list-table .is-expanded td:not(.hidden) { + display: block !important; + overflow: hidden; /* clearfix */ + } + + /* Special cases */ + .widefat .num, + .column-posts { + text-align: left; + } + + #comments-form .fixed .column-author, + #commentsdiv .fixed .column-author { + display: none !important; + } + + .fixed .column-comment .comment-author { + display: block; + } + + /* Comment author hidden via Screen Options */ + .fixed .column-author.hidden ~ .column-comment .comment-author { + display: none; + } + + #the-comment-list .is-expanded td { + box-shadow: none; + } + + #the-comment-list .is-expanded td:last-child { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + /* Show comment bubble as text instead */ + .post-com-count .screen-reader-text { + position: static; + -webkit-clip-path: none; + clip-path: none; + width: auto; + height: auto; + margin: 0; + } + + .column-response .post-com-count-no-comments:after, + .column-response .post-com-count-approved:after, + .column-comments .post-com-count-no-comments:after, + .column-comments .post-com-count-approved:after { + content: none; + } + + .column-response .post-com-count [aria-hidden="true"], + .column-comments .post-com-count [aria-hidden="true"] { + display: none; + } + + .column-response .post-com-count-wrapper, + .column-comments .post-com-count-wrapper { + white-space: normal; + } + + .column-response .post-com-count-wrapper > a, + .column-comments .post-com-count-wrapper > a { + display: block; + } + + .column-response .post-com-count-no-comments, + .column-response .post-com-count-approved, + .column-comments .post-com-count-no-comments, + .column-comments .post-com-count-approved { + margin-top: 0; + margin-right: 0.5em; + } + + .column-response .post-com-count-pending, + .column-comments .post-com-count-pending { + position: static; + height: auto; + min-width: 0; + padding: 0; + border: none; + border-radius: 0; + background: none; + color: #b32d2e; + font-size: inherit; + line-height: inherit; + text-align: left; + } + + .column-response .post-com-count-pending:hover, + .column-comments .post-com-count-pending:hover { + color: #d63638; + } + + .widefat thead td.check-column, + .widefat tfoot td.check-column { + padding-top: 10px; + } + + .row-actions { + margin-left: -8px; + margin-right: -8px; + padding-top: 4px; + } + + /* Make row actions more easy to select on mobile */ + body:not(.plugins-php) .row-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + color: transparent; + } + + .row-actions span a, + .row-actions span .button-link { + display: inline-block; + padding: 4px 8px; + line-height: 1.5; + } + + .row-actions span.approve:before, + .row-actions span.unapprove:before { + content: "| "; + } + + /* Quick Edit and Bulk Edit */ + #wpbody-content .quick-edit-row-post .inline-edit-col-left, + #wpbody-content .quick-edit-row-post .inline-edit-col-right, + #wpbody-content .inline-edit-row-post .inline-edit-col-center, + #wpbody-content .quick-edit-row-page .inline-edit-col-left, + #wpbody-content .quick-edit-row-page .inline-edit-col-right, + #wpbody-content .bulk-edit-row-post .inline-edit-col-right, + #wpbody-content .bulk-edit-row .inline-edit-col-left, + #wpbody-content .bulk-edit-row-page .inline-edit-col-right, + #wpbody-content .bulk-edit-row .inline-edit-col-bottom { + float: none; + width: 100%; + padding: 0; + } + + #the-list .inline-edit-row .inline-edit-legend, + .inline-edit-row span.title { + font-size: 16px; + } + + .inline-edit-row p.howto { + font-size: 14px; + } + + #wpbody-content .inline-edit-row-page .inline-edit-col-right { + margin-top: 0; + } + + #wpbody-content .quick-edit-row fieldset .inline-edit-col label, + #wpbody-content .quick-edit-row fieldset .inline-edit-group label, + #wpbody-content .bulk-edit-row fieldset .inline-edit-col label, + #wpbody-content .bulk-edit-row fieldset .inline-edit-group label { + max-width: none; + float: none; + margin-bottom: 5px; + } + + #wpbody .bulk-edit-row fieldset select { + display: block; + width: 100%; + max-width: none; + box-sizing: border-box; + } + + .inline-edit-row fieldset input[name=jj], + .inline-edit-row fieldset input[name=hh], + .inline-edit-row fieldset input[name=mn], + .inline-edit-row fieldset input[name=aa] { + font-size: 16px; + line-height: 2; + padding: 3px 4px; + } + + #bulk-titles .ntdelbutton, + #bulk-titles .ntdeltitle, + .inline-edit-row fieldset ul.cat-checklist label { + padding: 6px 0; + font-size: 16px; + line-height: 28px; + } + + #bulk-titles .ntdelitem { + padding-left: 37px; + } + + #bulk-titles .ntdelbutton { + width: 40px; + height: 40px; + margin: 0 0 0 -40px; + overflow: hidden; + } + + #bulk-titles .ntdelbutton:before { + font-size: 20px; + line-height: 28px; + } + + .inline-edit-row fieldset label span.title, + .inline-edit-row fieldset.inline-edit-date legend { + float: none; + } + + .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags { + padding: 0; + } + + .inline-edit-row fieldset label span.input-text-wrap, + .inline-edit-row fieldset .timestamp-wrap { + margin-left: 0; + } + + .inline-edit-row .inline-edit-or { + margin: 0 6px 0 0; + } + + #edithead .inside, + #commentsdiv #edithead .inside { + float: none; + text-align: left; + padding: 3px 5px; + } + + #commentsdiv #edithead .inside input, + #edithead .inside input { + width: 100%; + } + + #edithead label { + display: block; + } + + /* Updates */ + #wpbody-content .updates-table .plugin-title { + width: auto; + white-space: normal; + } + + /* Links */ + .link-manager-php #posts-filter { + margin-top: 25px; + } + + .link-manager-php .tablenav.bottom { + overflow: hidden; + } + + /* List tables that don't toggle rows */ + .comments-box .toggle-row, + .wp-list-table.plugins .toggle-row { + display: none; + } + + /* Plugin/Theme Management */ + #wpbody-content .wp-list-table.plugins td { + display: block; + width: auto; + padding: 10px 9px; /* reset from other list tables that have a label at this width */ + } + + /* Plugin description hidden via Screen Options */ + #wpbody-content .wp-list-table.plugins .desc.hidden { + display: none; + } + + #wpbody-content .wp-list-table.plugins .column-description { + padding-top: 2px; + } + + #wpbody-content .wp-list-table.plugins .plugin-title, + #wpbody-content .wp-list-table.plugins .theme-title { + padding-right: 12px; + white-space: normal; + } + + .wp-list-table.plugins .plugin-title, + .wp-list-table.plugins .theme-title { + padding-top: 13px; + padding-bottom: 4px; + } + + .plugins #the-list tr > td:not(:last-child), + .plugins #the-list .update th, + .plugins #the-list .update td, + .wp-list-table.plugins #the-list .theme-title { + box-shadow: none; + border-top: none; + } + + .plugins #the-list tr td { + border-top: none; + } + + .plugins tbody { + padding: 1px 0 0; + } + + .plugins tr.active + tr.inactive th.check-column, + .plugins tr.active + tr.inactive td.column-description, + .plugins .plugin-update-tr:before { + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + .plugins tr.active + tr.inactive th.check-column, + .plugins tr.active + tr.inactive td { + border-top: none; + } + + /* mimic the checkbox th */ + .plugins .plugin-update-tr:before { + content: ""; + display: table-cell; + } + + .plugins #the-list .plugin-update-tr .plugin-update { + border-left: none; + } + + .plugin-update-tr .update-message { + margin-left: 0; + } + + .plugins .active.update + .plugin-update-tr:before, + .plugins .active.updated + .plugin-update-tr:before { + background-color: #f0f6fc; + border-left: 4px solid #72aee6; + } + + .plugins .plugin-update-tr .update-message { + margin-left: 0; + } + + .wp-list-table.plugins .plugin-title strong, + .wp-list-table.plugins .theme-title strong { + font-size: 1.4em; + line-height: 1.5; + } + + .plugins tbody th.check-column { + padding: 8px 0 0 5px; + } + + .plugins thead td.check-column, + .plugins tfoot td.check-column, + .plugins .inactive th.check-column { + padding-left: 9px; + } + + /* Add New plugins page */ + table.plugin-install .column-name, + table.plugin-install .column-version, + table.plugin-install .column-rating, + table.plugin-install .column-description { + display: block; + width: auto; + } + + table.plugin-install th.column-name, + table.plugin-install th.column-version, + table.plugin-install th.column-rating, + table.plugin-install th.column-description { + display: none; + } + + table.plugin-install td.column-name strong { + font-size: 1.4em; + line-height: 1.6em; + } + + table.plugin-install #the-list td { + box-shadow: none; + } + + table.plugin-install #the-list tr { + display: block; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + .plugin-card { + margin-left: 0; + margin-right: 0; + width: 100%; + } + + table.media .column-title .has-media-icon ~ .row-actions { + margin-left: 0; + clear: both; + } +} + +@media screen and (max-width: 480px) { + .tablenav-pages .current-page { + margin: 0; + } + + .tablenav.bottom .displaying-num { + position: relative; + top: 0; + display: block; + text-align: right; + padding-bottom: 0.5em; + } + + .tablenav.bottom .tablenav-pages.one-page { + height: auto; + } + + .tablenav-pages .tablenav-paging-text { + float: left; + width: 100%; + padding-top: 0.5em; + } +} diff --git a/tools/storybook/wordpress/css/list-tables.min.css b/tools/storybook/wordpress/css/list-tables.min.css new file mode 100644 index 00000000000..9ebad6f5a91 --- /dev/null +++ b/tools/storybook/wordpress/css/list-tables.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.response-links{display:block;margin-bottom:1em}.response-links a{display:block}.response-links a.comments-edit-item-link{font-weight:600}.response-links a.comments-view-item-link{font-size:12px}.post-com-count-wrapper strong{font-weight:400}.comments-view-item-link{display:inline-block;clear:both}.column-comments .post-com-count-wrapper,.column-response .post-com-count-wrapper{white-space:nowrap;word-wrap:normal}.column-comments .post-com-count,.column-response .post-com-count{display:inline-block;vertical-align:top}.column-comments .post-com-count-approved,.column-comments .post-com-count-no-comments,.column-response .post-com-count-approved,.column-response .post-com-count-no-comments{margin-top:5px}.column-comments .comment-count-approved,.column-comments .comment-count-no-comments,.column-response .comment-count-approved,.column-response .comment-count-no-comments{box-sizing:border-box;display:block;padding:0 8px;min-width:24px;height:2em;border-radius:5px;background-color:#646970;color:#fff;font-size:11px;line-height:1.90909090;text-align:center}.column-comments .post-com-count-approved:after,.column-comments .post-com-count-no-comments:after,.column-response .post-com-count-approved:after,.column-response .post-com-count-no-comments:after{content:"";display:block;margin-left:8px;width:0;height:0;border-top:5px solid #646970;border-right:5px solid transparent}.column-comments a.post-com-count-approved:focus .comment-count-approved,.column-comments a.post-com-count-approved:hover .comment-count-approved,.column-response a.post-com-count-approved:focus .comment-count-approved,.column-response a.post-com-count-approved:hover .comment-count-approved{background:#2271b1}.column-comments a.post-com-count-approved:focus:after,.column-comments a.post-com-count-approved:hover:after,.column-response a.post-com-count-approved:focus:after,.column-response a.post-com-count-approved:hover:after{border-top-color:#2271b1}.column-comments .post-com-count-pending,.column-response .post-com-count-pending{position:relative;left:-3px;padding:0 5px;min-width:7px;height:17px;border:2px solid #fff;border-radius:11px;background:#d63638;color:#fff;font-size:9px;line-height:1.88888888;text-align:center}.column-comments .post-com-count-no-pending,.column-response .post-com-count-no-pending{display:none}.commentlist li{padding:1em 1em .2em;margin:0;border-bottom:1px solid #c3c4c7}.commentlist li li{border-bottom:0;padding:0}.commentlist p{padding:0;margin:0 0 .8em}#submitted-on,.submitted-on{color:#50575e}#replyrow td{padding:2px}#replysubmit{margin:0;padding:5px 7px 10px;overflow:hidden}#replysubmit .reply-submit-buttons{margin-bottom:0}#replysubmit .button{margin-right:5px}#replysubmit .spinner{float:none;margin:-4px 0 0}#replyrow.inline-edit-row fieldset.comment-reply{font-size:inherit;line-height:inherit}#replyrow legend{margin:0;padding:.2em 5px 0;font-size:13px;line-height:1.4;font-weight:600}#replyrow.inline-edit-row label{display:inline;vertical-align:baseline;line-height:inherit}#commentsdiv #edithead .inside,#edithead .inside{float:left;padding:3px 0 2px 5px;margin:0;text-align:center}#edithead .inside input{width:180px}#edithead label{padding:2px 0}#replycontainer{padding:5px}#replycontent{height:120px;box-shadow:none}#replyerror{border-color:#dcdcde;background-color:#f6f7f7}.commentlist .avatar{vertical-align:text-top}#the-comment-list div.undo,#the-comment-list tr.undo{background-color:#f6f7f7}#the-comment-list .unapproved td,#the-comment-list .unapproved th{background-color:#fcf9e8}#the-comment-list .unapproved th.check-column{border-left:4px solid #d63638}#the-comment-list .unapproved th.check-column input{margin-left:4px}#the-comment-list .approve a{color:#007017}#the-comment-list .unapprove a{color:#996800}#the-comment-list td,#the-comment-list th{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}#the-comment-list tr:last-child td,#the-comment-list tr:last-child th{box-shadow:none}#the-comment-list tr.unapproved+tr.approved td,#the-comment-list tr.unapproved+tr.approved th{border-top:1px solid rgba(0,0,0,.03)}.vim-current,.vim-current td,.vim-current th{background-color:#f0f6fc!important}th .comment-grey-bubble{height:16px;width:16px}th .comment-grey-bubble:before{content:"\f101";font:normal 20px/.5 dashicons;speak:never;display:inline-block;padding:0;top:4px;left:-4px;position:relative;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#3c434a}table.fixed{table-layout:fixed}.fixed .column-rating,.fixed .column-visible{width:8%}.fixed .column-author,.fixed .column-format,.fixed .column-links,.fixed .column-parent,.fixed .column-posts{width:10%}.fixed .column-date{width:14%}.column-date span[title]{-webkit-text-decoration:dotted underline;text-decoration:dotted underline}.fixed .column-posts{width:74px}.fixed .column-posts,.fixed .column-role{-webkit-hyphens:auto;hyphens:auto}.fixed .column-comment .comment-author{display:none}.fixed .column-categories,.fixed .column-rel,.fixed .column-response,.fixed .column-role,.fixed .column-tags{width:15%}.fixed .column-slug{width:25%}.fixed .column-locations{width:35%}.fixed .column-comments{width:5.5em;padding:8px 0;text-align:left}.fixed .column-comments .vers{padding-left:3px}td.column-title strong,td.plugin-title strong{display:block;margin-bottom:.2em;font-size:14px}td.column-title p,td.plugin-title p{margin:6px 0}table.media .column-title .media-icon{float:left;min-height:60px;margin:0 9px 0 0}table.media .column-title .media-icon img{max-width:60px;height:auto;vertical-align:top}table.media .column-title .has-media-icon~.row-actions{margin-left:70px}table.media .column-title .filename{margin-bottom:.2em}.media .row-actions .copy-to-clipboard-container{display:inline;position:relative}.media .row-actions .copy-to-clipboard-container .success{position:absolute;left:50%;transform:translate(-50%,-100%);background:#000;color:#fff;border-radius:5px;margin:0;padding:2px 5px}.wp-list-table a{transition:none}#the-list tr:last-child td,#the-list tr:last-child th{border-bottom:none!important;box-shadow:none}#comments-form .fixed .column-author{width:20%}#commentsdiv.postbox .inside{margin:0;padding:0}#commentsdiv .inside .row-actions{line-height:1.38461538}#commentsdiv .inside .column-author{width:25%}#commentsdiv .column-comment p{margin:.6em 0;padding:0}#commentsdiv #replyrow td{padding:0}#commentsdiv p{padding:8px 10px;margin:0}#commentsdiv .comments-box{border:0 none}#commentsdiv .comments-box thead td,#commentsdiv .comments-box thead th{background:0 0;padding:0 7px 4px}#commentsdiv .comments-box tr:last-child td{border-bottom:0 none}#commentsdiv #edithead .inside input{width:160px}.sorting-indicator{display:block;visibility:hidden;width:10px;height:4px;margin-top:8px;margin-left:7px}.sorting-indicator:before{content:"\f142";font:normal 20px/1 dashicons;speak:never;display:inline-block;padding:0;top:-4px;left:-8px;color:#3c434a;line-height:.5;position:relative;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#3c434a}.column-comments .sorting-indicator:before{top:0;left:-10px}th.desc a:focus span.sorting-indicator:before,th.desc:hover span.sorting-indicator:before,th.sorted.asc .sorting-indicator:before{content:"\f142"}th.asc a:focus span.sorting-indicator:before,th.asc:hover span.sorting-indicator:before,th.sorted.desc .sorting-indicator:before{content:"\f140"}.wp-list-table .toggle-row{position:absolute;right:8px;top:10px;display:none;padding:0;width:40px;height:40px;border:none;outline:0;background:0 0}.wp-list-table .toggle-row:hover{cursor:pointer}.wp-list-table .toggle-row:focus:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.wp-list-table .toggle-row:active{box-shadow:none}.wp-list-table .toggle-row:before{position:absolute;top:-5px;left:10px;border-radius:50%;display:block;padding:1px 2px 1px 0;color:#3c434a;content:"\f140";font:normal 20px/1 dashicons;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;speak:never}.wp-list-table .is-expanded .toggle-row:before{content:"\f142"}.locked-indicator{display:none;margin-left:6px;height:20px;width:16px}.locked-indicator-icon:before{color:#8c8f94;content:"\f160";display:inline-block;font:normal 20px/1 dashicons;speak:never;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.locked-info{display:none;margin-top:4px}.locked-text{vertical-align:top}.wp-locked .locked-indicator,.wp-locked .locked-info{display:block}tr.wp-locked .check-column input[type=checkbox],tr.wp-locked .check-column label,tr.wp-locked .row-actions .inline,tr.wp-locked .row-actions .trash{display:none}.fixed .column-comments .sorting-indicator{margin-top:3px}#menu-locations-wrap .widefat{width:60%}.widefat th.sortable,.widefat th.sorted{padding:0}th.sortable a,th.sorted a{display:block;overflow:hidden;padding:8px}.fixed .column-comments.sortable a,.fixed .column-comments.sorted a{padding:8px 0}th.sortable a span,th.sorted a span{float:left;cursor:pointer}th.asc a:focus span.sorting-indicator,th.asc:hover span.sorting-indicator,th.desc a:focus span.sorting-indicator,th.desc:hover span.sorting-indicator,th.sorted .sorting-indicator{visibility:visible}.tablenav-pages .current-page{margin:0 2px 0 0;font-size:13px;text-align:center}.tablenav .total-pages{margin-right:2px}.tablenav #table-paging{margin-left:2px}.tablenav{clear:both;height:30px;margin:6px 0 4px;padding-top:5px;vertical-align:middle}.tablenav.themes{max-width:98%}.tablenav .tablenav-pages{float:right;margin:0 0 9px}.tablenav .no-pages,.tablenav .one-page .pagination-links{display:none}.tablenav .tablenav-pages .button,.tablenav .tablenav-pages .tablenav-pages-navspan{display:inline-block;vertical-align:baseline;min-width:30px;min-height:30px;margin:0;padding:0 4px;font-size:16px;line-height:1.625;text-align:center}.tablenav .displaying-num{margin-right:7px}.tablenav .one-page .displaying-num{display:inline-block;margin:5px 0}.tablenav .actions{padding:0 8px 0 0}.wp-filter .actions{display:inline-block;vertical-align:middle}.tablenav .delete{margin-right:20px}.tablenav .view-switch{float:right;margin:0 5px;padding-top:3px}.wp-filter .view-switch{display:inline-block;vertical-align:middle;padding:12px 0;margin:0 8px 0 2px}.media-toolbar.wp-filter .view-switch{margin:0 12px 0 2px}.view-switch a{float:left;width:28px;height:28px;text-align:center;line-height:1.84615384;text-decoration:none}.view-switch a:before{color:#c3c4c7;display:inline-block;font:normal 20px/1 dashicons;speak:never;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.view-switch a:focus:before,.view-switch a:hover:before{color:#787c82}.view-switch a.current:before{color:#2271b1}.view-switch .view-list:before{content:"\f163"}.view-switch .view-excerpt:before{content:"\f164"}.view-switch .view-grid:before{content:"\f509"}.filter{float:left;margin:-5px 0 0 10px}.filter .subsubsub{margin-left:-10px;margin-top:13px}.screen-per-page{width:4em}#posts-filter .wp-filter{margin-bottom:0}#posts-filter fieldset{float:left;margin:0 1.5ex 1em 0;padding:0}#posts-filter fieldset legend{padding:0 0 .2em 1px}p.pagenav{margin:0;display:inline}.pagenav span{font-weight:600;margin:0 6px}.row-title{font-size:14px!important;font-weight:600}.column-comment .comment-author{margin-bottom:.6em}.column-author img,.column-comment .comment-author img,.column-username img{float:left;margin-right:10px;margin-top:1px}.row-actions{color:#a7aaad;font-size:13px;padding:2px 0 0;position:relative;left:-9999em}.rtl .row-actions a{display:inline-block}.row-actions .network_active,.row-actions .network_only{color:#000}.comment-item:hover .row-actions,.mobile .row-actions,.no-js .row-actions,.row-actions.visible,tr:hover .row-actions{position:static}.row-actions-visible{padding:2px 0 0}#wpbody-content .inline-edit-row fieldset{float:left;margin:0;padding:0 12px 0 0;width:100%;box-sizing:border-box}#wpbody-content .inline-edit-row td fieldset:last-of-type{padding-right:0}tr.inline-edit-row td{padding:0;position:relative}.inline-edit-wrapper{display:flow-root;padding:0 12px;border:1px solid transparent;border-radius:4px}.inline-edit-wrapper:focus{border-color:#2271b1;box-shadow:0 0 0 1px #2271b1;outline:2px solid transparent}#wpbody-content .quick-edit-row-post .inline-edit-col-left{width:40%}#wpbody-content .quick-edit-row-post .inline-edit-col-right{width:39%}#wpbody-content .inline-edit-row-post .inline-edit-col-center{width:20%}#wpbody-content .quick-edit-row-page .inline-edit-col-left{width:50%}#wpbody-content .bulk-edit-row-post .inline-edit-col-right,#wpbody-content .quick-edit-row-page .inline-edit-col-right{width:50%}#wpbody-content .bulk-edit-row .inline-edit-col-left{width:30%}#wpbody-content .bulk-edit-row-page .inline-edit-col-right{width:69%}#wpbody-content .bulk-edit-row .inline-edit-col-bottom{float:right;width:69%}#wpbody-content .inline-edit-row-page .inline-edit-col-right{margin-top:27px}.inline-edit-row fieldset .inline-edit-group{clear:both;line-height:2.5}.inline-edit-row .submit{display:flex;flex-wrap:wrap;align-items:center;clear:both;margin:0;padding:.5em 0 1em}.inline-edit-save.submit .button{margin-right:8px}.inline-edit-save .spinner{float:none;margin:0}.inline-edit-row .notice-error{box-sizing:border-box;min-width:100%;margin-top:1em}.inline-edit-row .notice-error .error{margin:.5em 0;padding:2px}#the-list .inline-edit-row .inline-edit-legend{margin:0;padding:.2em 0;line-height:2.5;font-weight:600}.inline-edit-row fieldset span.checkbox-title,.inline-edit-row fieldset span.title{margin:0;padding:0}.inline-edit-row fieldset label,.inline-edit-row fieldset span.inline-edit-categories-label{display:block;margin:.2em 0;line-height:2.5}.inline-edit-row fieldset.inline-edit-date label{display:inline-block;margin:0;vertical-align:baseline;line-height:2}.inline-edit-row fieldset label.inline-edit-tags{margin-top:0}.inline-edit-row fieldset label.inline-edit-tags span.title{margin:.2em 0;width:auto}.inline-edit-row fieldset label span.title,.inline-edit-row fieldset.inline-edit-date legend{display:block;float:left;width:6em;line-height:2.5}#posts-filter fieldset.inline-edit-date legend{padding:0}.inline-edit-row fieldset .timestamp-wrap,.inline-edit-row fieldset label span.input-text-wrap{display:block;margin-left:6em}.quick-edit-row-post fieldset.inline-edit-col-right label span.title{width:auto;padding-right:.5em}.inline-edit-row .inline-edit-or{margin:.2em 6px .2em 0;line-height:2.5}.inline-edit-row .input-text-wrap input[type=text]{width:100%}.inline-edit-row fieldset label input[type=checkbox]{vertical-align:middle}.inline-edit-row fieldset label textarea{width:100%;height:4em;vertical-align:top}#wpbody-content .bulk-edit-row fieldset .inline-edit-group label{max-width:50%}#wpbody-content .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child{margin-right:.5em}.inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input{width:6em}.inline-edit-row .inline-edit-legend{text-transform:uppercase}.inline-edit-row fieldset .inline-edit-date{float:left}.inline-edit-row fieldset input[name=aa],.inline-edit-row fieldset input[name=hh],.inline-edit-row fieldset input[name=jj],.inline-edit-row fieldset input[name=mn]{vertical-align:middle;text-align:center;padding:0 4px}.inline-edit-row fieldset label input.inline-edit-password-input{width:8em}#bulk-titles-list,#bulk-titles-list li,.inline-edit-row fieldset ul.cat-checklist input,.inline-edit-row fieldset ul.cat-checklist li{margin:0;position:relative}.inline-edit-row fieldset ul.cat-checklist input{margin-top:-1px;margin-left:3px}.inline-edit-row fieldset label input.inline-edit-menu-order-input{width:3em}.inline-edit-row fieldset label input.inline-edit-slug-input{width:75%}.inline-edit-row #post_parent,.inline-edit-row select[name=page_template]{max-width:80%}.quick-edit-row-post fieldset label.inline-edit-status{float:left}#bulk-titles,ul.cat-checklist{height:14em;border:1px solid #ddd;margin:0 0 5px;padding:.2em 5px;overflow-y:scroll}#bulk-titles .ntdelbutton,#bulk-titles .ntdeltitle,.inline-edit-row fieldset ul.cat-checklist label{display:inline-block;margin:0;padding:3px 0;line-height:20px;vertical-align:top}#bulk-titles .ntdelitem{padding-left:23px}#bulk-titles .ntdelbutton{width:26px;height:26px;margin:0 0 0 -26px;text-align:center;border-radius:3px}#bulk-titles .ntdelbutton:before{display:inline-block;vertical-align:top}#bulk-titles .ntdelbutton:focus{box-shadow:0 0 0 2px #3582c4;outline:2px solid transparent;outline-offset:0}.plugins tbody,.plugins tbody th.check-column{padding:8px 0 0 2px}.plugins tbody th.check-column input[type=checkbox]{margin-top:4px}.updates-table .plugin-title p{margin-top:0}.plugins .inactive th.check-column,.plugins tfoot td.check-column,.plugins thead td.check-column{padding-left:6px}.plugins,.plugins td,.plugins th{color:#000}.plugins tr{background:#fff}.plugins p{margin:0 4px;padding:0}.plugins .desc p{margin:0 0 8px}.plugins td.desc{line-height:1.5}.plugins .desc ol,.plugins .desc ul{margin:0 0 0 2em}.plugins .desc ul{list-style-type:disc}.plugins .row-actions{font-size:13px;padding:0}.plugins .active td,.plugins .active th,.plugins .inactive td,.plugins .inactive th{padding:10px 9px}.plugins .active td,.plugins .active th{background-color:#f0f6fc}.plugins .update td,.plugins .update th{border-bottom:0}.plugin-install #the-list td,.plugins .active td,.plugins .active th,.plugins .inactive td,.plugins .inactive th,.upgrade .plugins td,.upgrade .plugins th{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.plugins tr.active+tr.inactive td,.plugins tr.active+tr.inactive th,.plugins tr.active.plugin-update-tr+tr.inactive td,.plugins tr.active.plugin-update-tr+tr.inactive th{border-top:1px solid rgba(0,0,0,.03);box-shadow:inset 0 1px 0 rgba(0,0,0,.02),inset 0 -1px 0 #dcdcde}.plugins .update td,.plugins .update th,.plugins .updated td,.plugins .updated th,.plugins tr.active+tr.inactive.update td,.plugins tr.active+tr.inactive.update th,.plugins tr.active+tr.inactive.updated td,.plugins tr.active+tr.inactive.updated th,.upgrade .plugins tr:last-of-type td,.upgrade .plugins tr:last-of-type th{box-shadow:none}.plugin-update-tr.active td,.plugins .active th.check-column{border-left:4px solid #72aee6}.wp-list-table.plugins .plugin-title,.wp-list-table.plugins .theme-title{padding-right:12px;white-space:nowrap}.plugins .plugin-title .dashicons,.plugins .plugin-title img{float:left;padding:0 10px 0 0;width:64px;height:64px}.plugins .plugin-title .dashicons:before{padding:2px;background-color:#f0f0f1;box-shadow:inset 0 0 10px rgba(167,170,173,.15);font-size:60px;color:#c3c4c7}#update-themes-table .plugin-title .dashicons,#update-themes-table .plugin-title img{width:85px}.plugins .column-auto-updates{width:14.2em}.plugins .inactive .plugin-title strong{font-weight:400}.plugins .row-actions,.plugins .second{padding:0 0 5px}.plugins .row-actions{white-space:normal;min-width:12em}.plugins .update .row-actions,.plugins .update .second,.plugins .updated .row-actions,.plugins .updated .second{padding-bottom:0}.plugins-php .widefat tfoot td,.plugins-php .widefat tfoot th{border-top-style:solid;border-top-width:1px}.plugins .plugin-update-tr .plugin-update{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1);overflow:hidden;padding:0}.plugins .plugin-update-tr .notice,.plugins .plugin-update-tr div[class=update-message]{margin:5px 20px 15px 40px}.plugins .notice p{margin:.5em 0}.plugins .plugin-description a,.plugins .plugin-update a,.updates-table .plugin-title a{text-decoration:underline}.plugins tr.paused th.check-column{border-left:4px solid #d63638}.plugins tr.paused td,.plugins tr.paused th{background-color:#f6f7f7}.plugins .paused .dashicons-warning,.plugins tr.paused .plugin-title{color:#d63638}.plugins .paused .error-display code,.plugins .paused .error-display p{font-size:90%;color:rgba(0,0,0,.7)}.plugins .resume-link{color:#d63638}.plugin-card .update-now:before{color:#d63638;content:"\f463";display:inline-block;font:normal 20px/1 dashicons;margin:3px 5px 0 -2px;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.plugin-card .updating-message:before{content:"\f463";animation:rotation 2s infinite linear}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(359deg)}}.plugin-card .updated-message:before{color:#68de7c;content:"\f147"}.plugin-install-php h2{clear:both}.plugin-install-php h3{margin:2.5em 0 8px}.plugin-install-php .wp-filter{margin-bottom:0}.plugin-group{overflow:hidden;margin-top:1.5em}.plugin-group h3{margin-top:0}.plugin-card{float:left;margin:0 8px 16px;width:48.5%;width:calc(50% - 8px);background-color:#fff;border:1px solid #dcdcde;box-sizing:border-box}.plugin-card:nth-child(odd){clear:both;margin-left:0}.plugin-card:nth-child(even){margin-right:0}@media screen and (min-width:1600px) and (max-width:2299px){.plugin-card{width:30%;width:calc(33.1% - 8px)}.plugin-card:nth-child(odd){clear:none;margin-left:8px}.plugin-card:nth-child(even){margin-right:8px}.plugin-card:nth-child(3n+1){clear:both;margin-left:0}.plugin-card:nth-child(3n){margin-right:0}}@media screen and (min-width:2300px){.plugin-card{width:25%;width:calc(25% - 12px)}.plugin-card:nth-child(odd){clear:none;margin-left:8px}.plugin-card:nth-child(even){margin-right:8px}.plugin-card:nth-child(4n+1){clear:both;margin-left:0}.plugin-card:nth-child(4n){margin-right:0}}.plugin-card-top{position:relative;padding:20px 20px 10px;min-height:135px}.plugin-action-buttons,div.action-links{margin:0}.plugin-card h3{margin:0 12px 12px 0;font-size:18px;line-height:1.3}.plugin-card .desc,.plugin-card .name{margin-left:148px;margin-right:128px}.plugin-card .action-links{position:absolute;top:20px;right:20px;width:120px}.plugin-action-buttons{clear:right;float:right;margin-bottom:1em;text-align:right}.plugin-action-buttons li{margin-bottom:10px}.plugin-card-bottom{clear:both;padding:12px 20px;background-color:#f6f7f7;border-top:1px solid #dcdcde;overflow:hidden}.plugin-card-bottom .star-rating{display:inline}.plugin-card-update-failed .update-now{font-weight:600}.plugin-card-update-failed .notice-error{margin:0;padding-left:16px;box-shadow:0 -1px 0 #dcdcde}.plugin-card-update-failed .plugin-card-bottom{display:none}.plugin-card .column-rating{line-height:1.76923076}.plugin-card .column-rating,.plugin-card .column-updated{margin-bottom:4px}.plugin-card .column-downloaded,.plugin-card .column-rating{float:left;clear:left;max-width:180px}.plugin-card .column-compatibility,.plugin-card .column-updated{text-align:right;float:right;clear:right;width:65%;width:calc(100% - 180px)}.plugin-card .column-compatibility span:before{font:normal 20px/.5 dashicons;speak:never;display:inline-block;padding:0;top:4px;left:-2px;position:relative;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important;color:#3c434a}.plugin-card .column-compatibility .compatibility-incompatible:before{content:"\f158";color:#d63638}.plugin-card .column-compatibility .compatibility-compatible:before{content:"\f147";color:#007017}.plugin-card .notice{margin:20px 20px 0}.plugin-icon{position:absolute;top:20px;left:20px;width:128px;height:128px;margin:0 20px 20px 0}.no-plugin-results{color:#646970;font-size:18px;font-style:normal;margin:0;padding:100px 0 0;text-align:center}.wp-list-table .site-archived,.wp-list-table .site-deleted,.wp-list-table tr.site-archived,.wp-list-table tr.site-deleted{background:#fcf0f1}.wp-list-table .site-mature,.wp-list-table .site-spammed,.wp-list-table tr.site-mature,.wp-list-table tr.site-spammed{background:#fcf9e8}.sites.fixed .column-lastupdated,.sites.fixed .column-registered{width:20%}.sites.fixed .column-users{width:80px}@media screen and (max-width:1100px) and (min-width:782px),(max-width:480px){.plugin-card .action-links{position:static;margin-left:148px;width:auto}.plugin-action-buttons{float:none;margin:1em 0 0;text-align:left}.plugin-action-buttons li{display:inline-block;vertical-align:middle}.plugin-action-buttons li .button{margin-right:20px}.plugin-card h3{margin-right:24px}.plugin-card .desc,.plugin-card .name{margin-right:0}.plugin-card .desc p:first-of-type{margin-top:0}}@media screen and (max-width:782px){.tablenav{height:auto}.tablenav.top{margin:20px 0 5px}.tablenav.bottom{position:relative;margin-top:15px}.tablenav br{display:none}.tablenav br.clear{display:block}.tablenav .view-switch,.tablenav.top .actions{display:none}.view-switch a{width:36px;height:36px;line-height:2.53846153}.tablenav.top .displaying-num{display:none}.tablenav.bottom .displaying-num{position:absolute;right:0;top:11px;margin:0;font-size:14px}.tablenav .tablenav-pages{width:100%;text-align:center;margin:0 0 25px}.tablenav.bottom .tablenav-pages{margin-top:25px}.tablenav.top .tablenav-pages.one-page{display:none}.tablenav.bottom .tablenav-pages.one-page{margin-top:15px;height:0}.tablenav-pages .pagination-links{font-size:16px}.tablenav .tablenav-pages .button,.tablenav .tablenav-pages .tablenav-pages-navspan{min-width:44px;padding:12px 8px;font-size:18px;line-height:1}.tablenav-pages .pagination-links .current-page{min-width:44px;padding:12px 6px;font-size:16px;line-height:1.125}.form-wrap>p{display:none}.wp-list-table th.column-primary~th,.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary~td:not(.check-column){display:none}.wp-list-table thead th.column-primary{width:100%}.wp-list-table tr th.check-column{display:table-cell}.wp-list-table .check-column{width:2.5em}.wp-list-table .column-primary .toggle-row{display:block}.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column){position:relative;clear:both;width:auto!important}.wp-list-table td.column-primary{padding-right:50px}.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary~td:not(.check-column){padding:3px 8px 3px 35%}.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before{position:absolute;left:10px;display:block;overflow:hidden;width:32%;content:attr(data-colname);white-space:nowrap;text-overflow:ellipsis}.wp-list-table .is-expanded td:not(.hidden){display:block!important;overflow:hidden}.column-posts,.widefat .num{text-align:left}#comments-form .fixed .column-author,#commentsdiv .fixed .column-author{display:none!important}.fixed .column-comment .comment-author{display:block}.fixed .column-author.hidden~.column-comment .comment-author{display:none}#the-comment-list .is-expanded td{box-shadow:none}#the-comment-list .is-expanded td:last-child{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.post-com-count .screen-reader-text{position:static;-webkit-clip-path:none;clip-path:none;width:auto;height:auto;margin:0}.column-comments .post-com-count-approved:after,.column-comments .post-com-count-no-comments:after,.column-response .post-com-count-approved:after,.column-response .post-com-count-no-comments:after{content:none}.column-comments .post-com-count [aria-hidden=true],.column-response .post-com-count [aria-hidden=true]{display:none}.column-comments .post-com-count-wrapper,.column-response .post-com-count-wrapper{white-space:normal}.column-comments .post-com-count-wrapper>a,.column-response .post-com-count-wrapper>a{display:block}.column-comments .post-com-count-approved,.column-comments .post-com-count-no-comments,.column-response .post-com-count-approved,.column-response .post-com-count-no-comments{margin-top:0;margin-right:.5em}.column-comments .post-com-count-pending,.column-response .post-com-count-pending{position:static;height:auto;min-width:0;padding:0;border:none;border-radius:0;background:0 0;color:#b32d2e;font-size:inherit;line-height:inherit;text-align:left}.column-comments .post-com-count-pending:hover,.column-response .post-com-count-pending:hover{color:#d63638}.widefat tfoot td.check-column,.widefat thead td.check-column{padding-top:10px}.row-actions{margin-left:-8px;margin-right:-8px;padding-top:4px}body:not(.plugins-php) .row-actions{display:flex;flex-wrap:wrap;gap:8px;color:transparent}.row-actions span .button-link,.row-actions span a{display:inline-block;padding:4px 8px;line-height:1.5}.row-actions span.approve:before,.row-actions span.unapprove:before{content:"| "}#wpbody-content .bulk-edit-row .inline-edit-col-bottom,#wpbody-content .bulk-edit-row .inline-edit-col-left,#wpbody-content .bulk-edit-row-page .inline-edit-col-right,#wpbody-content .bulk-edit-row-post .inline-edit-col-right,#wpbody-content .inline-edit-row-post .inline-edit-col-center,#wpbody-content .quick-edit-row-page .inline-edit-col-left,#wpbody-content .quick-edit-row-page .inline-edit-col-right,#wpbody-content .quick-edit-row-post .inline-edit-col-left,#wpbody-content .quick-edit-row-post .inline-edit-col-right{float:none;width:100%;padding:0}#the-list .inline-edit-row .inline-edit-legend,.inline-edit-row span.title{font-size:16px}.inline-edit-row p.howto{font-size:14px}#wpbody-content .inline-edit-row-page .inline-edit-col-right{margin-top:0}#wpbody-content .bulk-edit-row fieldset .inline-edit-col label,#wpbody-content .bulk-edit-row fieldset .inline-edit-group label,#wpbody-content .quick-edit-row fieldset .inline-edit-col label,#wpbody-content .quick-edit-row fieldset .inline-edit-group label{max-width:none;float:none;margin-bottom:5px}#wpbody .bulk-edit-row fieldset select{display:block;width:100%;max-width:none;box-sizing:border-box}.inline-edit-row fieldset input[name=aa],.inline-edit-row fieldset input[name=hh],.inline-edit-row fieldset input[name=jj],.inline-edit-row fieldset input[name=mn]{font-size:16px;line-height:2;padding:3px 4px}#bulk-titles .ntdelbutton,#bulk-titles .ntdeltitle,.inline-edit-row fieldset ul.cat-checklist label{padding:6px 0;font-size:16px;line-height:28px}#bulk-titles .ntdelitem{padding-left:37px}#bulk-titles .ntdelbutton{width:40px;height:40px;margin:0 0 0 -40px;overflow:hidden}#bulk-titles .ntdelbutton:before{font-size:20px;line-height:28px}.inline-edit-row fieldset label span.title,.inline-edit-row fieldset.inline-edit-date legend{float:none}.inline-edit-row fieldset .inline-edit-col label.inline-edit-tags{padding:0}.inline-edit-row fieldset .timestamp-wrap,.inline-edit-row fieldset label span.input-text-wrap{margin-left:0}.inline-edit-row .inline-edit-or{margin:0 6px 0 0}#commentsdiv #edithead .inside,#edithead .inside{float:none;text-align:left;padding:3px 5px}#commentsdiv #edithead .inside input,#edithead .inside input{width:100%}#edithead label{display:block}#wpbody-content .updates-table .plugin-title{width:auto;white-space:normal}.link-manager-php #posts-filter{margin-top:25px}.link-manager-php .tablenav.bottom{overflow:hidden}.comments-box .toggle-row,.wp-list-table.plugins .toggle-row{display:none}#wpbody-content .wp-list-table.plugins td{display:block;width:auto;padding:10px 9px}#wpbody-content .wp-list-table.plugins .desc.hidden{display:none}#wpbody-content .wp-list-table.plugins .column-description{padding-top:2px}#wpbody-content .wp-list-table.plugins .plugin-title,#wpbody-content .wp-list-table.plugins .theme-title{padding-right:12px;white-space:normal}.wp-list-table.plugins .plugin-title,.wp-list-table.plugins .theme-title{padding-top:13px;padding-bottom:4px}.plugins #the-list .update td,.plugins #the-list .update th,.plugins #the-list tr>td:not(:last-child),.wp-list-table.plugins #the-list .theme-title{box-shadow:none;border-top:none}.plugins #the-list tr td{border-top:none}.plugins tbody{padding:1px 0 0}.plugins .plugin-update-tr:before,.plugins tr.active+tr.inactive td.column-description,.plugins tr.active+tr.inactive th.check-column{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.plugins tr.active+tr.inactive td,.plugins tr.active+tr.inactive th.check-column{border-top:none}.plugins .plugin-update-tr:before{content:"";display:table-cell}.plugins #the-list .plugin-update-tr .plugin-update{border-left:none}.plugin-update-tr .update-message{margin-left:0}.plugins .active.update+.plugin-update-tr:before,.plugins .active.updated+.plugin-update-tr:before{background-color:#f0f6fc;border-left:4px solid #72aee6}.plugins .plugin-update-tr .update-message{margin-left:0}.wp-list-table.plugins .plugin-title strong,.wp-list-table.plugins .theme-title strong{font-size:1.4em;line-height:1.5}.plugins tbody th.check-column{padding:8px 0 0 5px}.plugins .inactive th.check-column,.plugins tfoot td.check-column,.plugins thead td.check-column{padding-left:9px}table.plugin-install .column-description,table.plugin-install .column-name,table.plugin-install .column-rating,table.plugin-install .column-version{display:block;width:auto}table.plugin-install th.column-description,table.plugin-install th.column-name,table.plugin-install th.column-rating,table.plugin-install th.column-version{display:none}table.plugin-install td.column-name strong{font-size:1.4em;line-height:1.6em}table.plugin-install #the-list td{box-shadow:none}table.plugin-install #the-list tr{display:block;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.plugin-card{margin-left:0;margin-right:0;width:100%}table.media .column-title .has-media-icon~.row-actions{margin-left:0;clear:both}}@media screen and (max-width:480px){.tablenav-pages .current-page{margin:0}.tablenav.bottom .displaying-num{position:relative;top:0;display:block;text-align:right;padding-bottom:.5em}.tablenav.bottom .tablenav-pages.one-page{height:auto}.tablenav-pages .tablenav-paging-text{float:left;width:100%;padding-top:.5em}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/login-rtl.css b/tools/storybook/wordpress/css/login-rtl.css new file mode 100644 index 00000000000..bfef5c91c1e --- /dev/null +++ b/tools/storybook/wordpress/css/login-rtl.css @@ -0,0 +1,480 @@ +/*! This file is auto-generated */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + background: #f0f0f1; + min-width: 0; + color: #3c434a; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + line-height: 1.4; +} + +a { + color: #2271b1; + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +a { + outline: 0; +} + +a:hover, +a:active { + color: #135e96; +} + +a:focus { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +p { + line-height: 1.5; +} + +.login .message, +.login .success, +.login #login_error { + border-right: 4px solid #72aee6; + padding: 12px; + margin-right: 0; + margin-bottom: 20px; + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + word-wrap: break-word; +} + +.login .success { + border-right-color: #00a32a; +} + +.login #login_error { + border-right-color: #d63638; +} + +#loginform p.submit, +.login-action-lostpassword p.submit { + border: none; + margin: -10px 0 20px; /* May want to revisit this */ +} + +.login * { + margin: 0; + padding: 0; +} + +.login .input::-ms-clear { + display: none; +} + +.login .pw-weak { + margin-bottom: 15px; +} + +.login .button.wp-hide-pw { + background: transparent; + border: 1px solid transparent; + box-shadow: none; + font-size: 14px; + line-height: 2; + width: 2.5rem; + height: 2.5rem; + min-width: 40px; + min-height: 40px; + margin: 0; + padding: 5px 9px; + position: absolute; + left: 0; + top: 0; +} + +.login .button.wp-hide-pw:hover { + background: transparent; +} + +.login .button.wp-hide-pw:focus { + background: transparent; + border-color: #3582c4; + box-shadow: 0 0 0 1px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.login .button.wp-hide-pw:active { + background: transparent; + box-shadow: none; + transform: none; +} + +.login .button.wp-hide-pw .dashicons { + width: 1.25rem; + height: 1.25rem; + top: 0.25rem; +} + +.login .wp-pwd { + position: relative; +} + +.no-js .hide-if-no-js { + display: none; +} + +.login form { + margin-top: 20px; + margin-right: 0; + padding: 26px 24px 34px; + font-weight: 400; + overflow: hidden; + background: #fff; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); +} + +.login form.shake { + animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both; + animation-iteration-count: 3; + transform: translateX(0); +} + +@keyframes shake { + 25% { + transform: translateX(20px); + } + 75% { + transform: translateX(-20px); + } + 100% { + transform: translateX(0); + } +} + +@media (prefers-reduced-motion: reduce) { + .login form.shake { + animation: none; + transform: none; + } +} + +.login-action-confirm_admin_email #login { + width: 60vw; + max-width: 650px; + margin-top: -2vh; +} + +@media screen and (max-width: 782px) { + .login-action-confirm_admin_email #login { + box-sizing: border-box; + margin-top: 0; + padding-right: 4vw; + padding-left: 4vw; + width: 100vw; + } +} + +.login form .forgetmenot { + font-weight: 400; + float: right; + margin-bottom: 0; +} + +.login .button-primary { + float: left; +} + +.login .reset-pass-submit { + display: flex; + flex-flow: row wrap; + justify-content: space-between; +} + +.login .reset-pass-submit .button { + display: inline-block; + float: none; + margin-bottom: 6px; +} + +.login .admin-email-confirm-form .submit { + text-align: center; +} + +.admin-email__later { + text-align: right; +} + +.login form p.admin-email__details { + margin: 1.1em 0; +} + +.login h1.admin-email__heading { + border-bottom: 1px #f0f0f1 solid; + color: #50575e; + font-weight: normal; + padding-bottom: 0.5em; + text-align: right; +} + +.admin-email__actions div { + padding-top: 1.5em; +} + +.login .admin-email__actions .button-primary { + float: none; + margin-right: 0.25em; + margin-left: 0.25em; +} + +#login form p { + margin-bottom: 0; +} + +#login form p.submit { + margin: 0; + padding: 0; +} + +.login label { + font-size: 14px; + line-height: 1.5; + display: inline-block; + margin-bottom: 3px; +} + +.login .forgetmenot label, +.login .pw-weak label { + line-height: 1.5; + vertical-align: baseline; +} + +.login h1 { + text-align: center; +} + +.login h1 a { + background-image: url(../images/w-logo-blue.png?ver=20131202); + background-image: none, url(../images/wordpress-logo.svg?ver=20131107); + background-size: 84px; + background-position: center top; + background-repeat: no-repeat; + color: #3c434a; + height: 84px; + font-size: 20px; + font-weight: 400; + line-height: 1.3; + margin: 0 auto 25px; + padding: 0; + text-decoration: none; + width: 84px; + text-indent: -9999px; + outline: none; + overflow: hidden; + display: block; +} + +#login { + width: 320px; + padding: 5% 0 0; + margin: auto; +} + +.login #nav, +.login #backtoblog { + font-size: 13px; + padding: 0 24px; +} + +.login #nav { + margin: 24px 0 0; +} + +#backtoblog { + margin: 16px 0; + word-wrap: break-word; +} + +.login #nav a, +.login #backtoblog a { + text-decoration: none; + color: #50575e; +} + +.login #nav a:hover, +.login #backtoblog a:hover, +.login h1 a:hover { + color: #135e96; +} + +.login #nav a:focus, +.login #backtoblog a:focus, +.login h1 a:focus { + color: #043959; +} + +.login .privacy-policy-page-link { + text-align: center; + width: 100%; + margin: 3em 0 2em; +} + +.login form .input, +.login input[type="text"], +.login input[type="password"] { + font-size: 24px; + line-height: 1.33333333; /* 32px */ + width: 100%; + border-width: 0.0625rem; + padding: 0.1875rem 0.3125rem; /* 3px 5px */ + margin: 0 0 16px 6px; + min-height: 40px; + max-height: none; +} + +.login input.password-input { + font-family: Consolas, Monaco, monospace; +} + +.js.login input.password-input, +.js.login-action-rp form .input, +.js.login-action-rp input[type="text"] { + padding-left: 2.5rem; +} + +.login form .input, +.login input[type="text"], +.login form input[type="checkbox"] { + background: #fff; +} + +.js.login-action-rp input[type="text"], +.js.login-action-rp input[type="password"] { + margin-bottom: 0; +} + +.login #pass-strength-result { + font-weight: 600; + margin: -1px 0 16px 5px; + padding: 6px 5px; + text-align: center; + width: 100%; +} + +body.interim-login { + height: auto; +} + +.interim-login #login { + padding: 0; + margin: 5px auto 20px; +} + +.interim-login.login h1 a { + width: auto; +} + +.interim-login #login_error, +.interim-login.login .message { + margin: 0 0 16px; +} + +.interim-login.login form { + margin: 0; +} + +/* Hide visually but not from screen readers */ +.screen-reader-text, +.screen-reader-text span { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ +} + +/* Hide the Edge "reveal password" native button */ +input::-ms-reveal { + display: none; +} + +#language-switcher { + padding: 0; + overflow: visible; + background: none; + border: none; + box-shadow: none; +} + +#language-switcher select { + margin-left: 0.25em; +} + +.language-switcher { + margin: 0 auto; + padding: 0 0 24px; + text-align: center; +} + +.language-switcher label { + margin-left: 0.25em; +} + +.language-switcher label .dashicons { + width: auto; + height: auto; +} + +.login .language-switcher .button-primary { + float: none; + margin-bottom: 0; +} + +@media screen and (max-height: 550px) { + #login { + padding: 20px 0; + } + + #language-switcher { + margin-top: 0; + } +} + + +@media screen and (max-width: 782px) { + .interim-login input[type=checkbox] { + width: 1rem; + height: 1rem; + } + + .interim-login input[type=checkbox]:checked:before { + width: 1.3125rem; + height: 1.3125rem; + margin: -0.1875rem -0.25rem 0 0; + } + + #language-switcher label, + #language-switcher select { + margin-left: 0; + } +} + +@media screen and (max-width: 400px) { + .login .language-switcher .button-primary { + display: block; + margin: 5px auto 0; + } +} diff --git a/tools/storybook/wordpress/css/login-rtl.min.css b/tools/storybook/wordpress/css/login-rtl.min.css new file mode 100644 index 00000000000..d4fe0dadfb3 --- /dev/null +++ b/tools/storybook/wordpress/css/login-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;min-width:0;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a{outline:0}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}p{line-height:1.5}.login #login_error,.login .message,.login .success{border-right:4px solid #72aee6;padding:12px;margin-right:0;margin-bottom:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);word-wrap:break-word}.login .success{border-right-color:#00a32a}.login #login_error{border-right-color:#d63638}#loginform p.submit,.login-action-lostpassword p.submit{border:none;margin:-10px 0 20px}.login *{margin:0;padding:0}.login .input::-ms-clear{display:none}.login .pw-weak{margin-bottom:15px}.login .button.wp-hide-pw{background:0 0;border:1px solid transparent;box-shadow:none;font-size:14px;line-height:2;width:2.5rem;height:2.5rem;min-width:40px;min-height:40px;margin:0;padding:5px 9px;position:absolute;left:0;top:0}.login .button.wp-hide-pw:hover{background:0 0}.login .button.wp-hide-pw:focus{background:0 0;border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.login .button.wp-hide-pw:active{background:0 0;box-shadow:none;transform:none}.login .button.wp-hide-pw .dashicons{width:1.25rem;height:1.25rem;top:.25rem}.login .wp-pwd{position:relative}.no-js .hide-if-no-js{display:none}.login form{margin-top:20px;margin-right:0;padding:26px 24px 34px;font-weight:400;overflow:hidden;background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 3px rgba(0,0,0,.04)}.login form.shake{animation:shake .2s cubic-bezier(.19,.49,.38,.79) both;animation-iteration-count:3;transform:translateX(0)}@keyframes shake{25%{transform:translateX(20px)}75%{transform:translateX(-20px)}100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.login form.shake{animation:none;transform:none}}.login-action-confirm_admin_email #login{width:60vw;max-width:650px;margin-top:-2vh}@media screen and (max-width:782px){.login-action-confirm_admin_email #login{box-sizing:border-box;margin-top:0;padding-right:4vw;padding-left:4vw;width:100vw}}.login form .forgetmenot{font-weight:400;float:right;margin-bottom:0}.login .button-primary{float:left}.login .reset-pass-submit{display:flex;flex-flow:row wrap;justify-content:space-between}.login .reset-pass-submit .button{display:inline-block;float:none;margin-bottom:6px}.login .admin-email-confirm-form .submit{text-align:center}.admin-email__later{text-align:right}.login form p.admin-email__details{margin:1.1em 0}.login h1.admin-email__heading{border-bottom:1px #f0f0f1 solid;color:#50575e;font-weight:400;padding-bottom:.5em;text-align:right}.admin-email__actions div{padding-top:1.5em}.login .admin-email__actions .button-primary{float:none;margin-right:.25em;margin-left:.25em}#login form p{margin-bottom:0}#login form p.submit{margin:0;padding:0}.login label{font-size:14px;line-height:1.5;display:inline-block;margin-bottom:3px}.login .forgetmenot label,.login .pw-weak label{line-height:1.5;vertical-align:baseline}.login h1{text-align:center}.login h1 a{background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;height:84px;font-size:20px;font-weight:400;line-height:1.3;margin:0 auto 25px;padding:0;text-decoration:none;width:84px;text-indent:-9999px;outline:0;overflow:hidden;display:block}#login{width:320px;padding:5% 0 0;margin:auto}.login #backtoblog,.login #nav{font-size:13px;padding:0 24px}.login #nav{margin:24px 0 0}#backtoblog{margin:16px 0;word-wrap:break-word}.login #backtoblog a,.login #nav a{text-decoration:none;color:#50575e}.login #backtoblog a:hover,.login #nav a:hover,.login h1 a:hover{color:#135e96}.login #backtoblog a:focus,.login #nav a:focus,.login h1 a:focus{color:#043959}.login .privacy-policy-page-link{text-align:center;width:100%;margin:3em 0 2em}.login form .input,.login input[type=password],.login input[type=text]{font-size:24px;line-height:1.33333333;width:100%;border-width:.0625rem;padding:.1875rem .3125rem;margin:0 0 16px 6px;min-height:40px;max-height:none}.login input.password-input{font-family:Consolas,Monaco,monospace}.js.login input.password-input,.js.login-action-rp form .input,.js.login-action-rp input[type=text]{padding-left:2.5rem}.login form .input,.login form input[type=checkbox],.login input[type=text]{background:#fff}.js.login-action-rp input[type=password],.js.login-action-rp input[type=text]{margin-bottom:0}.login #pass-strength-result{font-weight:600;margin:-1px 0 16px 5px;padding:6px 5px;text-align:center;width:100%}body.interim-login{height:auto}.interim-login #login{padding:0;margin:5px auto 20px}.interim-login.login h1 a{width:auto}.interim-login #login_error,.interim-login.login .message{margin:0 0 16px}.interim-login.login form{margin:0}.screen-reader-text,.screen-reader-text span{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}input::-ms-reveal{display:none}#language-switcher{padding:0;overflow:visible;background:0 0;border:none;box-shadow:none}#language-switcher select{margin-left:.25em}.language-switcher{margin:0 auto;padding:0 0 24px;text-align:center}.language-switcher label{margin-left:.25em}.language-switcher label .dashicons{width:auto;height:auto}.login .language-switcher .button-primary{float:none;margin-bottom:0}@media screen and (max-height:550px){#login{padding:20px 0}#language-switcher{margin-top:0}}@media screen and (max-width:782px){.interim-login input[type=checkbox]{width:1rem;height:1rem}.interim-login input[type=checkbox]:checked:before{width:1.3125rem;height:1.3125rem;margin:-.1875rem -.25rem 0 0}#language-switcher label,#language-switcher select{margin-left:0}}@media screen and (max-width:400px){.login .language-switcher .button-primary{display:block;margin:5px auto 0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/login.css b/tools/storybook/wordpress/css/login.css new file mode 100644 index 00000000000..1f89db216ed --- /dev/null +++ b/tools/storybook/wordpress/css/login.css @@ -0,0 +1,479 @@ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + background: #f0f0f1; + min-width: 0; + color: #3c434a; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + line-height: 1.4; +} + +a { + color: #2271b1; + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +a { + outline: 0; +} + +a:hover, +a:active { + color: #135e96; +} + +a:focus { + color: #043959; + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +p { + line-height: 1.5; +} + +.login .message, +.login .success, +.login #login_error { + border-left: 4px solid #72aee6; + padding: 12px; + margin-left: 0; + margin-bottom: 20px; + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + word-wrap: break-word; +} + +.login .success { + border-left-color: #00a32a; +} + +.login #login_error { + border-left-color: #d63638; +} + +#loginform p.submit, +.login-action-lostpassword p.submit { + border: none; + margin: -10px 0 20px; /* May want to revisit this */ +} + +.login * { + margin: 0; + padding: 0; +} + +.login .input::-ms-clear { + display: none; +} + +.login .pw-weak { + margin-bottom: 15px; +} + +.login .button.wp-hide-pw { + background: transparent; + border: 1px solid transparent; + box-shadow: none; + font-size: 14px; + line-height: 2; + width: 2.5rem; + height: 2.5rem; + min-width: 40px; + min-height: 40px; + margin: 0; + padding: 5px 9px; + position: absolute; + right: 0; + top: 0; +} + +.login .button.wp-hide-pw:hover { + background: transparent; +} + +.login .button.wp-hide-pw:focus { + background: transparent; + border-color: #3582c4; + box-shadow: 0 0 0 1px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.login .button.wp-hide-pw:active { + background: transparent; + box-shadow: none; + transform: none; +} + +.login .button.wp-hide-pw .dashicons { + width: 1.25rem; + height: 1.25rem; + top: 0.25rem; +} + +.login .wp-pwd { + position: relative; +} + +.no-js .hide-if-no-js { + display: none; +} + +.login form { + margin-top: 20px; + margin-left: 0; + padding: 26px 24px 34px; + font-weight: 400; + overflow: hidden; + background: #fff; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); +} + +.login form.shake { + animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both; + animation-iteration-count: 3; + transform: translateX(0); +} + +@keyframes shake { + 25% { + transform: translateX(-20px); + } + 75% { + transform: translateX(20px); + } + 100% { + transform: translateX(0); + } +} + +@media (prefers-reduced-motion: reduce) { + .login form.shake { + animation: none; + transform: none; + } +} + +.login-action-confirm_admin_email #login { + width: 60vw; + max-width: 650px; + margin-top: -2vh; +} + +@media screen and (max-width: 782px) { + .login-action-confirm_admin_email #login { + box-sizing: border-box; + margin-top: 0; + padding-left: 4vw; + padding-right: 4vw; + width: 100vw; + } +} + +.login form .forgetmenot { + font-weight: 400; + float: left; + margin-bottom: 0; +} + +.login .button-primary { + float: right; +} + +.login .reset-pass-submit { + display: flex; + flex-flow: row wrap; + justify-content: space-between; +} + +.login .reset-pass-submit .button { + display: inline-block; + float: none; + margin-bottom: 6px; +} + +.login .admin-email-confirm-form .submit { + text-align: center; +} + +.admin-email__later { + text-align: left; +} + +.login form p.admin-email__details { + margin: 1.1em 0; +} + +.login h1.admin-email__heading { + border-bottom: 1px #f0f0f1 solid; + color: #50575e; + font-weight: normal; + padding-bottom: 0.5em; + text-align: left; +} + +.admin-email__actions div { + padding-top: 1.5em; +} + +.login .admin-email__actions .button-primary { + float: none; + margin-left: 0.25em; + margin-right: 0.25em; +} + +#login form p { + margin-bottom: 0; +} + +#login form p.submit { + margin: 0; + padding: 0; +} + +.login label { + font-size: 14px; + line-height: 1.5; + display: inline-block; + margin-bottom: 3px; +} + +.login .forgetmenot label, +.login .pw-weak label { + line-height: 1.5; + vertical-align: baseline; +} + +.login h1 { + text-align: center; +} + +.login h1 a { + background-image: url(../images/w-logo-blue.png?ver=20131202); + background-image: none, url(../images/wordpress-logo.svg?ver=20131107); + background-size: 84px; + background-position: center top; + background-repeat: no-repeat; + color: #3c434a; + height: 84px; + font-size: 20px; + font-weight: 400; + line-height: 1.3; + margin: 0 auto 25px; + padding: 0; + text-decoration: none; + width: 84px; + text-indent: -9999px; + outline: none; + overflow: hidden; + display: block; +} + +#login { + width: 320px; + padding: 5% 0 0; + margin: auto; +} + +.login #nav, +.login #backtoblog { + font-size: 13px; + padding: 0 24px; +} + +.login #nav { + margin: 24px 0 0; +} + +#backtoblog { + margin: 16px 0; + word-wrap: break-word; +} + +.login #nav a, +.login #backtoblog a { + text-decoration: none; + color: #50575e; +} + +.login #nav a:hover, +.login #backtoblog a:hover, +.login h1 a:hover { + color: #135e96; +} + +.login #nav a:focus, +.login #backtoblog a:focus, +.login h1 a:focus { + color: #043959; +} + +.login .privacy-policy-page-link { + text-align: center; + width: 100%; + margin: 3em 0 2em; +} + +.login form .input, +.login input[type="text"], +.login input[type="password"] { + font-size: 24px; + line-height: 1.33333333; /* 32px */ + width: 100%; + border-width: 0.0625rem; + padding: 0.1875rem 0.3125rem; /* 3px 5px */ + margin: 0 6px 16px 0; + min-height: 40px; + max-height: none; +} + +.login input.password-input { + font-family: Consolas, Monaco, monospace; +} + +.js.login input.password-input, +.js.login-action-rp form .input, +.js.login-action-rp input[type="text"] { + padding-right: 2.5rem; +} + +.login form .input, +.login input[type="text"], +.login form input[type="checkbox"] { + background: #fff; +} + +.js.login-action-rp input[type="text"], +.js.login-action-rp input[type="password"] { + margin-bottom: 0; +} + +.login #pass-strength-result { + font-weight: 600; + margin: -1px 5px 16px 0; + padding: 6px 5px; + text-align: center; + width: 100%; +} + +body.interim-login { + height: auto; +} + +.interim-login #login { + padding: 0; + margin: 5px auto 20px; +} + +.interim-login.login h1 a { + width: auto; +} + +.interim-login #login_error, +.interim-login.login .message { + margin: 0 0 16px; +} + +.interim-login.login form { + margin: 0; +} + +/* Hide visually but not from screen readers */ +.screen-reader-text, +.screen-reader-text span { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ +} + +/* Hide the Edge "reveal password" native button */ +input::-ms-reveal { + display: none; +} + +#language-switcher { + padding: 0; + overflow: visible; + background: none; + border: none; + box-shadow: none; +} + +#language-switcher select { + margin-right: 0.25em; +} + +.language-switcher { + margin: 0 auto; + padding: 0 0 24px; + text-align: center; +} + +.language-switcher label { + margin-right: 0.25em; +} + +.language-switcher label .dashicons { + width: auto; + height: auto; +} + +.login .language-switcher .button-primary { + float: none; + margin-bottom: 0; +} + +@media screen and (max-height: 550px) { + #login { + padding: 20px 0; + } + + #language-switcher { + margin-top: 0; + } +} + + +@media screen and (max-width: 782px) { + .interim-login input[type=checkbox] { + width: 1rem; + height: 1rem; + } + + .interim-login input[type=checkbox]:checked:before { + width: 1.3125rem; + height: 1.3125rem; + margin: -0.1875rem 0 0 -0.25rem; + } + + #language-switcher label, + #language-switcher select { + margin-right: 0; + } +} + +@media screen and (max-width: 400px) { + .login .language-switcher .button-primary { + display: block; + margin: 5px auto 0; + } +} diff --git a/tools/storybook/wordpress/css/login.min.css b/tools/storybook/wordpress/css/login.min.css new file mode 100644 index 00000000000..b9e3211eb17 --- /dev/null +++ b/tools/storybook/wordpress/css/login.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;min-width:0;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a{outline:0}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}p{line-height:1.5}.login #login_error,.login .message,.login .success{border-left:4px solid #72aee6;padding:12px;margin-left:0;margin-bottom:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);word-wrap:break-word}.login .success{border-left-color:#00a32a}.login #login_error{border-left-color:#d63638}#loginform p.submit,.login-action-lostpassword p.submit{border:none;margin:-10px 0 20px}.login *{margin:0;padding:0}.login .input::-ms-clear{display:none}.login .pw-weak{margin-bottom:15px}.login .button.wp-hide-pw{background:0 0;border:1px solid transparent;box-shadow:none;font-size:14px;line-height:2;width:2.5rem;height:2.5rem;min-width:40px;min-height:40px;margin:0;padding:5px 9px;position:absolute;right:0;top:0}.login .button.wp-hide-pw:hover{background:0 0}.login .button.wp-hide-pw:focus{background:0 0;border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.login .button.wp-hide-pw:active{background:0 0;box-shadow:none;transform:none}.login .button.wp-hide-pw .dashicons{width:1.25rem;height:1.25rem;top:.25rem}.login .wp-pwd{position:relative}.no-js .hide-if-no-js{display:none}.login form{margin-top:20px;margin-left:0;padding:26px 24px 34px;font-weight:400;overflow:hidden;background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 3px rgba(0,0,0,.04)}.login form.shake{animation:shake .2s cubic-bezier(.19,.49,.38,.79) both;animation-iteration-count:3;transform:translateX(0)}@keyframes shake{25%{transform:translateX(-20px)}75%{transform:translateX(20px)}100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.login form.shake{animation:none;transform:none}}.login-action-confirm_admin_email #login{width:60vw;max-width:650px;margin-top:-2vh}@media screen and (max-width:782px){.login-action-confirm_admin_email #login{box-sizing:border-box;margin-top:0;padding-left:4vw;padding-right:4vw;width:100vw}}.login form .forgetmenot{font-weight:400;float:left;margin-bottom:0}.login .button-primary{float:right}.login .reset-pass-submit{display:flex;flex-flow:row wrap;justify-content:space-between}.login .reset-pass-submit .button{display:inline-block;float:none;margin-bottom:6px}.login .admin-email-confirm-form .submit{text-align:center}.admin-email__later{text-align:left}.login form p.admin-email__details{margin:1.1em 0}.login h1.admin-email__heading{border-bottom:1px #f0f0f1 solid;color:#50575e;font-weight:400;padding-bottom:.5em;text-align:left}.admin-email__actions div{padding-top:1.5em}.login .admin-email__actions .button-primary{float:none;margin-left:.25em;margin-right:.25em}#login form p{margin-bottom:0}#login form p.submit{margin:0;padding:0}.login label{font-size:14px;line-height:1.5;display:inline-block;margin-bottom:3px}.login .forgetmenot label,.login .pw-weak label{line-height:1.5;vertical-align:baseline}.login h1{text-align:center}.login h1 a{background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;height:84px;font-size:20px;font-weight:400;line-height:1.3;margin:0 auto 25px;padding:0;text-decoration:none;width:84px;text-indent:-9999px;outline:0;overflow:hidden;display:block}#login{width:320px;padding:5% 0 0;margin:auto}.login #backtoblog,.login #nav{font-size:13px;padding:0 24px}.login #nav{margin:24px 0 0}#backtoblog{margin:16px 0;word-wrap:break-word}.login #backtoblog a,.login #nav a{text-decoration:none;color:#50575e}.login #backtoblog a:hover,.login #nav a:hover,.login h1 a:hover{color:#135e96}.login #backtoblog a:focus,.login #nav a:focus,.login h1 a:focus{color:#043959}.login .privacy-policy-page-link{text-align:center;width:100%;margin:3em 0 2em}.login form .input,.login input[type=password],.login input[type=text]{font-size:24px;line-height:1.33333333;width:100%;border-width:.0625rem;padding:.1875rem .3125rem;margin:0 6px 16px 0;min-height:40px;max-height:none}.login input.password-input{font-family:Consolas,Monaco,monospace}.js.login input.password-input,.js.login-action-rp form .input,.js.login-action-rp input[type=text]{padding-right:2.5rem}.login form .input,.login form input[type=checkbox],.login input[type=text]{background:#fff}.js.login-action-rp input[type=password],.js.login-action-rp input[type=text]{margin-bottom:0}.login #pass-strength-result{font-weight:600;margin:-1px 5px 16px 0;padding:6px 5px;text-align:center;width:100%}body.interim-login{height:auto}.interim-login #login{padding:0;margin:5px auto 20px}.interim-login.login h1 a{width:auto}.interim-login #login_error,.interim-login.login .message{margin:0 0 16px}.interim-login.login form{margin:0}.screen-reader-text,.screen-reader-text span{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}input::-ms-reveal{display:none}#language-switcher{padding:0;overflow:visible;background:0 0;border:none;box-shadow:none}#language-switcher select{margin-right:.25em}.language-switcher{margin:0 auto;padding:0 0 24px;text-align:center}.language-switcher label{margin-right:.25em}.language-switcher label .dashicons{width:auto;height:auto}.login .language-switcher .button-primary{float:none;margin-bottom:0}@media screen and (max-height:550px){#login{padding:20px 0}#language-switcher{margin-top:0}}@media screen and (max-width:782px){.interim-login input[type=checkbox]{width:1rem;height:1rem}.interim-login input[type=checkbox]:checked:before{width:1.3125rem;height:1.3125rem;margin:-.1875rem 0 0 -.25rem}#language-switcher label,#language-switcher select{margin-right:0}}@media screen and (max-width:400px){.login .language-switcher .button-primary{display:block;margin:5px auto 0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/media-rtl.css b/tools/storybook/wordpress/css/media-rtl.css new file mode 100644 index 00000000000..e3d70fec827 --- /dev/null +++ b/tools/storybook/wordpress/css/media-rtl.css @@ -0,0 +1,1368 @@ +/*! This file is auto-generated */ +/*------------------------------------------------------------------------------ + 14.0 - Media Screen +------------------------------------------------------------------------------*/ + +.media-item .describe { + border-collapse: collapse; + width: 100%; + border-top: 1px solid #dcdcde; + clear: both; + cursor: default; +} + +.media-item.media-blank .describe { + border: 0; +} + +.media-item .describe th { + vertical-align: top; + text-align: right; + padding: 5px 10px 10px; + width: 140px; +} + +.media-item .describe .align th { + padding-top: 0; +} + +.media-item .media-item-info tr { + background-color: transparent; +} + +.media-item .describe td { + padding: 0 0 8px 8px; + vertical-align: top; +} + +.media-item thead.media-item-info td { + padding: 4px 10px 0; +} + +.media-item .media-item-info .A1B1 { + padding: 0 10px 0 0; +} + +.media-item td.savesend { + padding-bottom: 15px; +} + +.media-item .thumbnail { + max-height: 128px; + max-width: 128px; +} + +.media-list-subtitle { + display: block; +} + +.media-list-title { + display: block; +} + +#wpbody-content #async-upload-wrap a { + display: none; +} + +.media-upload-form { + margin-top: 20px; +} + +.media-upload-form td label { + margin-left: 6px; + margin-right: 2px; +} + +.media-upload-form .align .field label { + display: inline; + padding: 0 23px 0 0; + margin: 0 3px 0 1em; + font-weight: 600; +} + +.media-upload-form tr.image-size label { + margin: 0 5px 0 0; + font-weight: 600; +} + +.media-upload-form th.label label { + font-weight: 600; + margin: 0.5em; + font-size: 13px; +} + +.media-upload-form th.label label span { + padding: 0 5px; +} + +.media-item .describe input[type="text"], +.media-item .describe textarea { + width: 460px; +} + +.media-item .describe p.help { + margin: 0; + padding: 0 5px 0 0; +} + +.describe-toggle-on, +.describe-toggle-off { + display: block; + line-height: 2.76923076; + float: left; + margin-left: 10px; +} + +.media-item-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.media-item .attachment-tools { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.media-item .edit-attachment { + padding: 14px 0; + display: block; + margin-left: 10px; +} + +.media-item .edit-attachment.copy-to-clipboard-container { + margin-top: 0; +} + +.media-item-copy-container .success { + line-height: 0; +} + +.media-item button .copy-attachment-url { + margin-top: 14px; +} + +.media-item .copy-to-clipboard-container { + margin-top: 7px; +} + +.media-item .describe-toggle-off, +.media-item.open .describe-toggle-on { + display: none; +} + +.media-item.open .describe-toggle-off { + display: block; +} + +.media-upload-form .media-item { + min-height: 70px; + margin-bottom: 1px; + position: relative; + width: 100%; + background: #fff; +} + +.media-upload-form .media-item, +.media-upload-form .media-item .error { + box-shadow: 0 1px 0 #dcdcde; +} + +#media-items:empty { + border: 0 none; +} + +.media-item .filename { + padding: 14px 0; + overflow: hidden; + margin-right: 6px; +} + +.media-item .pinkynail { + float: right; + margin: 0 0 0 10px; + max-height: 70px; + max-width: 70px; +} + +.media-item .startopen, +.media-item .startclosed { + display: none; +} + +.media-item .original { + position: relative; + height: 34px; +} + +.media-item .progress { + float: left; + height: 22px; + margin: 7px 6px; + width: 200px; + line-height: 2em; + padding: 0; + overflow: hidden; + border-radius: 22px; + background: #dcdcde; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.media-item .bar { + z-index: 9; + width: 0; + height: 100%; + margin-top: -22px; + border-radius: 22px; + background-color: #2271b1; + box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); +} + +.media-item .progress .percent { + z-index: 10; + position: relative; + width: 200px; + padding: 0; + color: #fff; + text-align: center; + line-height: 22px; + font-weight: 400; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); +} + +.upload-php .fixed .column-parent { + width: 15%; +} + +.js .html-uploader #plupload-upload-ui { + display: none; +} + +.js .html-uploader #html-upload-ui { + display: block; +} + +#html-upload-ui #async-upload { + font-size: 1em; +} + +.media-upload-form .media-item.error, +.media-upload-form .media-item .error { + width: auto; + margin: 0 0 1px; +} + +.media-upload-form .media-item .error { + padding: 10px 14px 10px 0; + min-height: 50px; +} + +.media-item .error-div button.dismiss { + float: left; + margin: 0 15px 0 10px; +} + +/*------------------------------------------------------------------------------ + 14.1 - Media Library +------------------------------------------------------------------------------*/ + +.find-box { + background-color: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + width: 600px; + overflow: hidden; + margin-right: -300px; + position: fixed; + top: 30px; + bottom: 30px; + right: 50%; + z-index: 100105; +} + +.find-box-head { + background: #fff; + border-bottom: 1px solid #dcdcde; + height: 36px; + font-size: 18px; + font-weight: 600; + line-height: 2; + padding: 0 16px 0 36px; + position: absolute; + top: 0; + right: 0; + left: 0; +} + +.find-box-inside { + overflow: auto; + padding: 16px; + background-color: #fff; + position: absolute; + top: 37px; + bottom: 45px; + overflow-y: scroll; + width: 100%; + box-sizing: border-box; +} + +.find-box-search { + padding-bottom: 16px; +} + +.find-box-search .spinner { + float: none; + right: 105px; + position: absolute; +} + +.find-box-search, +#find-posts-response { + position: relative; /* RTL fix, #WP28010 */ +} + +#find-posts-input, +#find-posts-search { + float: right; +} + +#find-posts-input { + width: 140px; + height: 28px; + margin: 0 0 0 4px; +} + +.widefat .found-radio { + padding-left: 0; + width: 16px; +} + +#find-posts-close { + width: 36px; + height: 36px; + border: none; + padding: 0; + position: absolute; + top: 0; + left: 0; + cursor: pointer; + text-align: center; + background: none; + color: #646970; +} + +#find-posts-close:hover, +#find-posts-close:focus { + color: #135e96; +} + +#find-posts-close:focus { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +#find-posts-close:before { + font: normal 20px/36px dashicons; + vertical-align: top; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f158"; +} + +.find-box-buttons { + padding: 8px 16px; + background: #fff; + border-top: 1px solid #dcdcde; + position: absolute; + bottom: 0; + right: 0; + left: 0; +} + +@media screen and (max-width: 782px) { + .find-box-inside { + bottom: 57px; + } +} + +@media screen and (max-width: 660px) { + + .find-box { + top: 0; + bottom: 0; + right: 0; + left: 0; + margin: 0; + width: 100%; + } + +} + +.ui-find-overlay { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: #000; + opacity: 0.7; + filter: alpha(opacity=70); + z-index: 100100; +} + +.drag-drop #drag-drop-area { + border: 4px dashed #c3c4c7; + height: 200px; +} + +.drag-drop .drag-drop-inside { + margin: 60px auto 0; + width: 250px; +} + +.drag-drop-inside p { + font-size: 14px; + margin: 5px 0; + display: none; +} + +.drag-drop .drag-drop-inside p { + text-align: center; +} + +.drag-drop-inside p.drag-drop-info { + font-size: 20px; +} + +.drag-drop .drag-drop-inside p, +.drag-drop-inside p.drag-drop-buttons { + display: block; +} + +/* +#drag-drop-area:-moz-drag-over { + border-color: #83b4d8; +} +border color while dragging a file over the uploader drop area */ +.drag-drop.drag-over #drag-drop-area { + border-color: #9ec2e6; +} + +#plupload-upload-ui { + position: relative; +} + +/** + * Media Library grid view + */ + +.media-frame.mode-grid, +.media-frame.mode-grid .media-frame-content, +.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments, +.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper, +.media-frame.mode-grid .uploader-inline-content { + position: static; +} + +/* Regions we don't use at all */ +.media-frame.mode-grid .media-frame-title, +.media-frame.mode-grid .media-frame-router, +.media-frame.mode-grid .media-frame-menu { + display: none; +} + +.media-frame.mode-grid .media-frame-content { + background-color: transparent; + border: none; +} + +.upload-php .mode-grid .media-sidebar { + position: relative; + width: auto; + margin-top: 12px; + padding: 0 16px; + border-right: 4px solid #d63638; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + background-color: #fff; +} + +.upload-php .mode-grid .hide-sidebar .media-sidebar { + display: none; +} + +.upload-php .mode-grid .media-sidebar .media-uploader-status { + border-bottom: none; + padding-bottom: 0; + max-width: 100%; +} + +.upload-php .mode-grid .media-sidebar .upload-error { + margin: 12px 0; + padding: 4px 0 0; + border: none; + box-shadow: none; + background: none; +} + +.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 { + display: none; +} + +.media-frame.mode-grid .uploader-inline { + position: relative; + top: auto; + left: auto; + right: auto; + bottom: auto; + padding-top: 0; + margin-top: 20px; + border: 4px dashed #c3c4c7; +} + +.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments, +.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper { + position: relative; + top: 94px; /* prevent jumping up when the toolbar becomes fixed */ + padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */ +} + +.media-frame.mode-grid .attachment:focus, +.media-frame.mode-grid .selected.attachment:focus, +.media-frame.mode-grid .attachment.details:focus { + box-shadow: + inset 0 0 2px 3px #f0f0f1, + inset 0 0 0 7px #4f94d4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -6px; +} + +.media-frame.mode-grid .selected.attachment { + box-shadow: + inset 0 0 0 5px #f0f0f1, + inset 0 0 0 7px #c3c4c7; +} + +.media-frame.mode-grid .attachment.details { + box-shadow: + inset 0 0 0 3px #f0f0f1, + inset 0 0 0 7px #4f94d4; +} + +.media-frame.mode-grid.mode-select .attachment .thumbnail { + opacity: 0.65; +} + +.media-frame.mode-select .attachment.selected .thumbnail { + opacity: 1; +} + +.media-frame.mode-grid .media-toolbar { + margin-bottom: 15px; + height: auto; +} + +.media-frame.mode-grid .media-toolbar select { + margin: 0 0 0 10px; +} + +.media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button { + margin: 0 0 0 8px; + vertical-align: middle; +} + +.media-frame.mode-grid .attachments-browser .bulk-select { + display: inline-block; + margin: 0 0 0 10px; +} + +.media-frame.mode-grid .search { + margin-top: 0; +} + +.media-search-input-label { + margin: 0 0 0 .2em; + vertical-align: baseline; +} + +.media-frame.mode-grid .media-search-input-label { + position: static; + margin: 0 0 0 .5em; +} + +.attachments-browser .media-toolbar-secondary > .media-button { + margin-left: 10px; +} + +.media-frame.mode-select .attachments-browser.fixed .media-toolbar { + position: fixed; + top: 32px; + right: auto; + left: 20px; + margin-top: 0; +} + +.media-frame.mode-grid .attachments-browser { + padding: 0; +} + +.media-frame.mode-grid .attachments-browser .attachments { + padding: 2px; +} + +.media-frame.mode-grid .attachments-browser .no-media { + color: #646970; /* same as no plugins and no themes */ + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0 0; + text-align: center; +} + +/** + * Attachment details modal + */ + +.edit-attachment-frame { + display: block; + height: 100%; + width: 100%; +} + +.edit-attachment-frame .edit-media-header { + overflow: hidden; +} + +.upload-php .media-modal-close .media-modal-icon:before { + content: "\f335"; + font-size: 22px; +} + +.upload-php .media-modal-close, +.edit-attachment-frame .edit-media-header .left, +.edit-attachment-frame .edit-media-header .right { + cursor: pointer; + color: #787c82; + background-color: transparent; + height: 50px; + width: 50px; + padding: 0; + position: absolute; + text-align: center; + border: 0; + border-right: 1px solid #dcdcde; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.upload-php .media-modal-close { + top: 0; + left: 0; +} + +.edit-attachment-frame .edit-media-header .left { + left: 102px; +} + +.edit-attachment-frame .edit-media-header .right { + left: 51px; +} + +.edit-attachment-frame .media-frame-title { + right: 0; + left: 150px; /* leave space for prev/next/close */ +} + +.edit-attachment-frame .edit-media-header .right:before, +.edit-attachment-frame .edit-media-header .left:before { + font: normal 20px/50px dashicons !important; + display: inline; + font-weight: 300; +} + +.upload-php .media-modal-close:hover, +.upload-php .media-modal-close:focus, +.edit-attachment-frame .edit-media-header .left:hover, +.edit-attachment-frame .edit-media-header .right:hover, +.edit-attachment-frame .edit-media-header .left:focus, +.edit-attachment-frame .edit-media-header .right:focus { + background: #dcdcde; + border-color: #c3c4c7; + color: #000; + outline: none; + box-shadow: none; +} + +.upload-php .media-modal-close:focus, +.edit-attachment-frame .edit-media-header .left:focus, +.edit-attachment-frame .edit-media-header .right:focus { + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.upload-php .media-modal-close:focus .media-modal-icon:before, +.upload-php .media-modal-close:hover .media-modal-icon:before { + color: #000; +} + +.edit-attachment-frame .edit-media-header .left:before { + content: "\f345"; +} + +.edit-attachment-frame .edit-media-header .right:before { + content: "\f341"; +} + +.edit-attachment-frame .edit-media-header [disabled], +.edit-attachment-frame .edit-media-header [disabled]:hover { + color: #c3c4c7; + background: inherit; + cursor: default; +} + +.edit-attachment-frame .media-frame-content, +.edit-attachment-frame .media-frame-router { + right: 0; +} + +.edit-attachment-frame .media-frame-content { + border-bottom: none; + bottom: 0; + top: 50px; +} + +.edit-attachment-frame .attachment-details { + position: absolute; + overflow: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); +} + +.edit-attachment-frame .attachment-media-view { + float: right; + width: 65%; + height: 100%; +} + +.edit-attachment-frame .attachment-media-view .thumbnail { + box-sizing: border-box; + padding: 16px; + height: 100%; +} + +.edit-attachment-frame .attachment-media-view .details-image { + display: block; + margin: 0 auto 16px; + max-width: 100%; + max-height: 90%; + max-height: calc( 100% - 42px ); /* leave space for actions underneath */ + background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 100% 0, 10px 10px; + background-size: 20px 20px; +} + +.edit-attachment-frame .attachment-media-view .details-image.icon { + background: none; +} + +.edit-attachment-frame .attachment-media-view .attachment-actions { + text-align: center; +} + +.edit-attachment-frame .wp-media-wrapper { + margin-bottom: 12px; +} + +.edit-attachment-frame input, +.edit-attachment-frame textarea { + padding: 6px 8px; + line-height: 1.14285714; +} + +.edit-attachment-frame .attachment-info { + overflow: auto; + box-sizing: border-box; + margin-bottom: 0; + padding: 12px 16px 0; + width: 35%; + height: 100%; + box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); + border-bottom: 0; + border-right: 1px solid #dcdcde; + background: #f6f7f7; +} + +.edit-attachment-frame .attachment-info .details, +.edit-attachment-frame .attachment-info .settings { + position: relative; /* RTL fix, #WP29352 */ + overflow: hidden; + float: none; + margin-bottom: 15px; + padding-bottom: 15px; + border-bottom: 1px solid #dcdcde; +} + +.edit-attachment-frame .attachment-info .filename { + font-weight: 400; + color: #646970; +} + +.edit-attachment-frame .attachment-info .thumbnail { + margin-bottom: 12px; +} + +.attachment-info .actions { + margin-bottom: 16px; +} + +.attachment-info .actions a { + display: inline; + text-decoration: none; +} + +.copy-to-clipboard-container { + display: flex; + align-items: center; + margin-top: 8px; + clear: both; +} + +.copy-to-clipboard-container .copy-attachment-url { + white-space: normal; +} + +.copy-to-clipboard-container .success { + color: #008a20; + margin-right: 8px; +} + +/*------------------------------------------------------------------------------ + 14.2 - Image Editor +------------------------------------------------------------------------------*/ +.wp_attachment_details .attachment-alt-text { + margin-bottom: 5px; +} + +.wp_attachment_details .attachment-alt-text-description { + margin-top: 5px; +} + +.wp_attachment_details label[for="content"] { + font-size: 13px; + line-height: 1.5; + margin: 1em 0; +} + +.wp_attachment_details #attachment_caption { + height: 4em; +} + +.describe .image-editor { + vertical-align: top; +} + +.imgedit-wrap { + position: relative; + padding-top: 10px; +} + +.imgedit-settings p, +.imgedit-settings fieldset { + margin: 8px 0; +} + +.imgedit-settings legend { + margin-bottom: 5px; +} + +.describe .imgedit-wrap .imgedit-settings { + padding: 0 5px; +} + +.wp_attachment_holder div.updated { + margin-top: 0; +} + +.wp_attachment_holder .imgedit-wrap > div { + height: auto; +} + +.wp_attachment_holder .imgedit-wrap .imgedit-panel-content { + float: right; + padding: 3px 0 0 16px; + min-width: 400px; + max-width: calc( 100% - 266px ); +} + +.wp_attachment_holder .imgedit-wrap .imgedit-settings { + float: left; + width: 250px; +} + +.imgedit-settings input { + margin-top: 0; + vertical-align: middle; +} + +.imgedit-wait { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + background: #fff; + opacity: 0.7; + filter: alpha(opacity=70); + display: none; +} + +.imgedit-wait:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + right: 50%; + top: 50%; + margin: -10px -10px 0 0; + background: transparent url(../images/spinner.gif) no-repeat center; + background-size: 20px 20px; + transform: translateZ(0); +} + +.no-float { + float: none; +} + +.media-disabled, +.imgedit-settings .disabled { + /* WCAG 1.4.3 Text or images of text that are part of an inactive user + interface component ... have no contrast requirement. */ + color: #a7aaad; +} + +.A1B1 { + overflow: hidden; +} + +.wp_attachment_image .button, +.A1B1 .button { + float: right; +} + +.no-js .wp_attachment_image .button { + display: none; +} + +.wp_attachment_image .spinner, +.A1B1 .spinner { + float: right; +} + +.imgedit-menu { + margin: 0 0 12px; +} + +.imgedit-menu .note-no-rotate { + clear: both; + margin: 0; + padding: 1em 0 0; +} + +.image-editor .imgedit-menu .button { + display: inline-block; + width: auto; + min-height: 28px; + font-size: 13px; + line-height: 2; + margin: 0 0 8px 8px; + padding: 0 10px; +} + +.imgedit-menu .button:before { + font: normal 16px/1 dashicons; + margin-left: 8px; + speak: never; + vertical-align: middle; + position: relative; + top: -2px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.imgedit-menu .button.disabled { + color: #a7aaad; + border-color: #dcdcde; + background: #f6f7f7; + box-shadow: none; + text-shadow: 0 1px 0 #fff; + cursor: default; + transform: none; +} + +.imgedit-crop:before { + content: "\f165"; +} + +.imgedit-rleft:before { + content: "\f166"; +} + +.imgedit-rright:before { + content: "\f167"; +} + +.imgedit-flipv:before { + content: "\f168"; +} + +.imgedit-fliph:before { + content: "\f169"; +} + +.imgedit-undo:before { + content: "\f171"; +} + +.imgedit-redo:before { + content: "\f172"; +} + +.imgedit-crop-wrap { + position: relative; +} + +.imgedit-crop-wrap img { + background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 100% 0, 10px 10px; + background-size: 20px 20px; +} + +.imgedit-crop { + margin: 0 0 0 8px; +} + +.imgedit-rleft { + margin: 0 3px; +} + +.imgedit-rright { + margin: 0 3px 0 8px; +} + +.imgedit-flipv { + margin: 0 3px; +} + +.imgedit-fliph { + margin: 0 3px 0 8px; +} + +.imgedit-undo { + margin: 0 3px; +} + +.imgedit-redo { + margin: 0 3px 0 8px; +} + +.imgedit-thumbnail-preview { + margin: 10px 0 0 8px; +} + +.imgedit-thumbnail-preview-caption { + display: block; +} + +#poststuff .imgedit-group-top h2 { + display: inline-block; + margin: 0; + padding: 0; + font-size: 14px; + line-height: 1.4; +} + +#poststuff .imgedit-group-top .button-link { + text-decoration: none; + color: #1d2327; +} + +.imgedit-applyto .imgedit-label { + display: block; + padding: .5em 0 0; +} + +.imgedit-help { + display: none; + padding-bottom: 8px; +} + +.imgedit-help.imgedit-restore { + padding-bottom: 0; +} + +/* higher specificity than buttons */ +.image-editor .imgedit-settings .imgedit-help-toggle, +.image-editor .imgedit-settings .imgedit-help-toggle:hover, +.image-editor .imgedit-settings .imgedit-help-toggle:active { + border: 1px solid transparent; + margin: -1px -1px 0 0; + padding: 0; + background: transparent; + color: #2271b1; + font-size: 20px; + line-height: 1; + cursor: pointer; + box-sizing: content-box; + box-shadow: none; +} + +.image-editor .imgedit-settings .imgedit-help-toggle:focus { + color: #2271b1; + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.form-table td.imgedit-response { + padding: 0; +} + +.imgedit-submit { + margin: 8px 0 0; +} + +.imgedit-submit-btn { + margin-right: 20px; +} + +.imgedit-wrap .nowrap { + white-space: nowrap; + font-size: 12px; + line-height: inherit; +} + +span.imgedit-scale-warn { + color: #d63638; + font-size: 20px; + font-style: normal; + visibility: hidden; + vertical-align: middle; +} + +.imgedit-save-target { + margin: 8px 0; +} + +.imgedit-save-target legend { + font-weight: 600; +} + +.imgedit-group { + margin-bottom: 8px; + padding: 10px; +} + +.imgedit-settings .imgedit-original-dimensions { + display: inline-block; +} + +.imgedit-settings .imgedit-scale input[type="text"], +.imgedit-settings .imgedit-crop-ratio input[type="text"], +.imgedit-settings .imgedit-crop-sel input[type="text"] { + width: 80px; + font-size: 14px; + padding: 0 8px; +} + +.imgedit-separator { + display: inline-block; + width: 7px; + text-align: center; + font-size: 13px; + color: #3c434a; +} + +.imgedit-settings .imgedit-scale-button-wrapper { + margin-top: 0.3077em; + display: block; +} + +.imgedit-settings .imgedit-scale .button { + margin-bottom: 0; +} + +audio, video { + display: inline-block; + max-width: 100%; +} + +.wp-core-ui .mejs-container { + width: 100%; + max-width: 100%; +} + +.wp-core-ui .mejs-container * { + box-sizing: border-box; +} + +.wp-core-ui .mejs-time { + box-sizing: content-box; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + .imgedit-wait:before { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + .wp_attachment_details label[for="content"] { + font-size: 14px; + line-height: 1.5; + } + + .media-upload-form .media-item.error, + .media-upload-form .media-item .error { + font-size: 13px; + line-height: 1.5; + } + + .media-upload-form .media-item.error { + padding: 1px 10px; + } + + .media-upload-form .media-item .error { + padding: 10px 12px 10px 0; + } + + .imgedit-settings .imgedit-scale input[type="text"], + .imgedit-settings .imgedit-crop-ratio input[type="text"], + .imgedit-settings .imgedit-crop-sel input[type="text"] { + font-size: 16px; + padding: 6px 10px; + } + + .wp_attachment_holder .imgedit-wrap .imgedit-panel-content, + .wp_attachment_holder .imgedit-wrap .imgedit-settings { + float: none; + width: auto; + max-width: none; + padding-bottom: 16px; + } + + .copy-to-clipboard-container .success { + font-size: 14px; + } + + /* Restructure image editor on narrow viewports. */ + .imgedit-crop-wrap img{ + width: 100%; + } + + .media-modal .imgedit-wrap .imgedit-panel-content, + .media-modal .imgedit-wrap .imgedit-settings { + position: initial !important; + } + + .media-modal .imgedit-wrap .imgedit-settings { + box-sizing: border-box; + width: 100% !important; + } + + .imgedit-settings .imgedit-scale-button-wrapper { + display: inline-block; + } +} + +@media only screen and (max-width: 600px) { + .media-item-wrapper { + grid-template-columns: 1fr; + } +} + +/** + * Media queries for media grid. + */ + +@media only screen and (max-width: 1120px) { + /* override for media-views.css */ + #wp-media-grid .wp-filter .attachment-filters { + max-width: 100%; + } +} + +@media only screen and (max-width: 782px) { + .media-frame.mode-select .attachments-browser.fixed .media-toolbar { + top: 46px; + left: 10px; + } +} + +@media only screen and (max-width: 600px) { + .media-frame.mode-select .attachments-browser.fixed .media-toolbar { + top: 0; + } +} + +@media only screen and (max-width: 480px) { + .edit-attachment-frame .media-frame-title { + left: 110px; + } + + .upload-php .media-modal-close, + .edit-attachment-frame .edit-media-header .left, + .edit-attachment-frame .edit-media-header .right { + width: 40px; + height: 40px; + } + + .edit-attachment-frame .edit-media-header .right:before, + .edit-attachment-frame .edit-media-header .left:before { + line-height: 40px !important; + } + + .edit-attachment-frame .edit-media-header .left { + left: 82px; + } + + .edit-attachment-frame .edit-media-header .right { + left: 41px; + } + + .edit-attachment-frame .media-frame-content { + top: 40px; + } + + .edit-attachment-frame .attachment-media-view { + float: none; + height: auto; + width: 100%; + } + + .edit-attachment-frame .attachment-info { + height: auto; + width: 100%; + } +} + +@media only screen and (max-width: 640px), screen and (max-height: 400px) { + .upload-php .mode-grid .media-sidebar{ + max-width: 100%; + } +} diff --git a/tools/storybook/wordpress/css/media-rtl.min.css b/tools/storybook/wordpress/css/media-rtl.min.css new file mode 100644 index 00000000000..4ee4e4edb70 --- /dev/null +++ b/tools/storybook/wordpress/css/media-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.media-item .describe{border-collapse:collapse;width:100%;border-top:1px solid #dcdcde;clear:both;cursor:default}.media-item.media-blank .describe{border:0}.media-item .describe th{vertical-align:top;text-align:right;padding:5px 10px 10px;width:140px}.media-item .describe .align th{padding-top:0}.media-item .media-item-info tr{background-color:transparent}.media-item .describe td{padding:0 0 8px 8px;vertical-align:top}.media-item thead.media-item-info td{padding:4px 10px 0}.media-item .media-item-info .A1B1{padding:0 10px 0 0}.media-item td.savesend{padding-bottom:15px}.media-item .thumbnail{max-height:128px;max-width:128px}.media-list-subtitle{display:block}.media-list-title{display:block}#wpbody-content #async-upload-wrap a{display:none}.media-upload-form{margin-top:20px}.media-upload-form td label{margin-left:6px;margin-right:2px}.media-upload-form .align .field label{display:inline;padding:0 23px 0 0;margin:0 3px 0 1em;font-weight:600}.media-upload-form tr.image-size label{margin:0 5px 0 0;font-weight:600}.media-upload-form th.label label{font-weight:600;margin:.5em;font-size:13px}.media-upload-form th.label label span{padding:0 5px}.media-item .describe input[type=text],.media-item .describe textarea{width:460px}.media-item .describe p.help{margin:0;padding:0 5px 0 0}.describe-toggle-off,.describe-toggle-on{display:block;line-height:2.76923076;float:left;margin-left:10px}.media-item-wrapper{display:grid;grid-template-columns:1fr 1fr}.media-item .attachment-tools{display:flex;justify-content:flex-end;align-items:center}.media-item .edit-attachment{padding:14px 0;display:block;margin-left:10px}.media-item .edit-attachment.copy-to-clipboard-container{margin-top:0}.media-item-copy-container .success{line-height:0}.media-item button .copy-attachment-url{margin-top:14px}.media-item .copy-to-clipboard-container{margin-top:7px}.media-item .describe-toggle-off,.media-item.open .describe-toggle-on{display:none}.media-item.open .describe-toggle-off{display:block}.media-upload-form .media-item{min-height:70px;margin-bottom:1px;position:relative;width:100%;background:#fff}.media-upload-form .media-item,.media-upload-form .media-item .error{box-shadow:0 1px 0 #dcdcde}#media-items:empty{border:0 none}.media-item .filename{padding:14px 0;overflow:hidden;margin-right:6px}.media-item .pinkynail{float:right;margin:0 0 0 10px;max-height:70px;max-width:70px}.media-item .startclosed,.media-item .startopen{display:none}.media-item .original{position:relative;height:34px}.media-item .progress{float:left;height:22px;margin:7px 6px;width:200px;line-height:2em;padding:0;overflow:hidden;border-radius:22px;background:#dcdcde;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.media-item .bar{z-index:9;width:0;height:100%;margin-top:-22px;border-radius:22px;background-color:#2271b1;box-shadow:inset 0 0 2px rgba(0,0,0,.3)}.media-item .progress .percent{z-index:10;position:relative;width:200px;padding:0;color:#fff;text-align:center;line-height:22px;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.2)}.upload-php .fixed .column-parent{width:15%}.js .html-uploader #plupload-upload-ui{display:none}.js .html-uploader #html-upload-ui{display:block}#html-upload-ui #async-upload{font-size:1em}.media-upload-form .media-item .error,.media-upload-form .media-item.error{width:auto;margin:0 0 1px}.media-upload-form .media-item .error{padding:10px 14px 10px 0;min-height:50px}.media-item .error-div button.dismiss{float:left;margin:0 15px 0 10px}.find-box{background-color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3);width:600px;overflow:hidden;margin-right:-300px;position:fixed;top:30px;bottom:30px;right:50%;z-index:100105}.find-box-head{background:#fff;border-bottom:1px solid #dcdcde;height:36px;font-size:18px;font-weight:600;line-height:2;padding:0 16px 0 36px;position:absolute;top:0;right:0;left:0}.find-box-inside{overflow:auto;padding:16px;background-color:#fff;position:absolute;top:37px;bottom:45px;overflow-y:scroll;width:100%;box-sizing:border-box}.find-box-search{padding-bottom:16px}.find-box-search .spinner{float:none;right:105px;position:absolute}#find-posts-response,.find-box-search{position:relative}#find-posts-input,#find-posts-search{float:right}#find-posts-input{width:140px;height:28px;margin:0 0 0 4px}.widefat .found-radio{padding-left:0;width:16px}#find-posts-close{width:36px;height:36px;border:none;padding:0;position:absolute;top:0;left:0;cursor:pointer;text-align:center;background:0 0;color:#646970}#find-posts-close:focus,#find-posts-close:hover{color:#135e96}#find-posts-close:focus{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);outline:2px solid transparent;outline-offset:-2px}#find-posts-close:before{font:normal 20px/36px dashicons;vertical-align:top;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f158"}.find-box-buttons{padding:8px 16px;background:#fff;border-top:1px solid #dcdcde;position:absolute;bottom:0;right:0;left:0}@media screen and (max-width:782px){.find-box-inside{bottom:57px}}@media screen and (max-width:660px){.find-box{top:0;bottom:0;right:0;left:0;margin:0;width:100%}}.ui-find-overlay{position:fixed;top:0;right:0;left:0;bottom:0;background:#000;opacity:.7;z-index:100100}.drag-drop #drag-drop-area{border:4px dashed #c3c4c7;height:200px}.drag-drop .drag-drop-inside{margin:60px auto 0;width:250px}.drag-drop-inside p{font-size:14px;margin:5px 0;display:none}.drag-drop .drag-drop-inside p{text-align:center}.drag-drop-inside p.drag-drop-info{font-size:20px}.drag-drop .drag-drop-inside p,.drag-drop-inside p.drag-drop-buttons{display:block}.drag-drop.drag-over #drag-drop-area{border-color:#9ec2e6}#plupload-upload-ui{position:relative}.media-frame.mode-grid,.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,.media-frame.mode-grid .media-frame-content,.media-frame.mode-grid .uploader-inline-content{position:static}.media-frame.mode-grid .media-frame-menu,.media-frame.mode-grid .media-frame-router,.media-frame.mode-grid .media-frame-title{display:none}.media-frame.mode-grid .media-frame-content{background-color:transparent;border:none}.upload-php .mode-grid .media-sidebar{position:relative;width:auto;margin-top:12px;padding:0 16px;border-right:4px solid #d63638;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);background-color:#fff}.upload-php .mode-grid .hide-sidebar .media-sidebar{display:none}.upload-php .mode-grid .media-sidebar .media-uploader-status{border-bottom:none;padding-bottom:0;max-width:100%}.upload-php .mode-grid .media-sidebar .upload-error{margin:12px 0;padding:4px 0 0;border:none;box-shadow:none;background:0 0}.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2{display:none}.media-frame.mode-grid .uploader-inline{position:relative;top:auto;left:auto;right:auto;bottom:auto;padding-top:0;margin-top:20px;border:4px dashed #c3c4c7}.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper{position:relative;top:94px;padding-bottom:94px}.media-frame.mode-grid .attachment.details:focus,.media-frame.mode-grid .attachment:focus,.media-frame.mode-grid .selected.attachment:focus{box-shadow:inset 0 0 2px 3px #f0f0f1,inset 0 0 0 7px #4f94d4;outline:2px solid transparent;outline-offset:-6px}.media-frame.mode-grid .selected.attachment{box-shadow:inset 0 0 0 5px #f0f0f1,inset 0 0 0 7px #c3c4c7}.media-frame.mode-grid .attachment.details{box-shadow:inset 0 0 0 3px #f0f0f1,inset 0 0 0 7px #4f94d4}.media-frame.mode-grid.mode-select .attachment .thumbnail{opacity:.65}.media-frame.mode-select .attachment.selected .thumbnail{opacity:1}.media-frame.mode-grid .media-toolbar{margin-bottom:15px;height:auto}.media-frame.mode-grid .media-toolbar select{margin:0 0 0 10px}.media-frame.mode-grid.mode-edit .media-toolbar-secondary>.select-mode-toggle-button{margin:0 0 0 8px;vertical-align:middle}.media-frame.mode-grid .attachments-browser .bulk-select{display:inline-block;margin:0 0 0 10px}.media-frame.mode-grid .search{margin-top:0}.media-search-input-label{margin:0 0 0 .2em;vertical-align:baseline}.media-frame.mode-grid .media-search-input-label{position:static;margin:0 0 0 .5em}.attachments-browser .media-toolbar-secondary>.media-button{margin-left:10px}.media-frame.mode-select .attachments-browser.fixed .media-toolbar{position:fixed;top:32px;right:auto;left:20px;margin-top:0}.media-frame.mode-grid .attachments-browser{padding:0}.media-frame.mode-grid .attachments-browser .attachments{padding:2px}.media-frame.mode-grid .attachments-browser .no-media{color:#646970;font-size:18px;font-style:normal;margin:0;padding:100px 0 0;text-align:center}.edit-attachment-frame{display:block;height:100%;width:100%}.edit-attachment-frame .edit-media-header{overflow:hidden}.upload-php .media-modal-close .media-modal-icon:before{content:"\f335";font-size:22px}.edit-attachment-frame .edit-media-header .left,.edit-attachment-frame .edit-media-header .right,.upload-php .media-modal-close{cursor:pointer;color:#787c82;background-color:transparent;height:50px;width:50px;padding:0;position:absolute;text-align:center;border:0;border-right:1px solid #dcdcde;transition:color .1s ease-in-out,background .1s ease-in-out}.upload-php .media-modal-close{top:0;left:0}.edit-attachment-frame .edit-media-header .left{left:102px}.edit-attachment-frame .edit-media-header .right{left:51px}.edit-attachment-frame .media-frame-title{right:0;left:150px}.edit-attachment-frame .edit-media-header .left:before,.edit-attachment-frame .edit-media-header .right:before{font:normal 20px/50px dashicons!important;display:inline;font-weight:300}.edit-attachment-frame .edit-media-header .left:focus,.edit-attachment-frame .edit-media-header .left:hover,.edit-attachment-frame .edit-media-header .right:focus,.edit-attachment-frame .edit-media-header .right:hover,.upload-php .media-modal-close:focus,.upload-php .media-modal-close:hover{background:#dcdcde;border-color:#c3c4c7;color:#000;outline:0;box-shadow:none}.edit-attachment-frame .edit-media-header .left:focus,.edit-attachment-frame .edit-media-header .right:focus,.upload-php .media-modal-close:focus{outline:2px solid transparent;outline-offset:-2px}.upload-php .media-modal-close:focus .media-modal-icon:before,.upload-php .media-modal-close:hover .media-modal-icon:before{color:#000}.edit-attachment-frame .edit-media-header .left:before{content:"\f345"}.edit-attachment-frame .edit-media-header .right:before{content:"\f341"}.edit-attachment-frame .edit-media-header [disabled],.edit-attachment-frame .edit-media-header [disabled]:hover{color:#c3c4c7;background:inherit;cursor:default}.edit-attachment-frame .media-frame-content,.edit-attachment-frame .media-frame-router{right:0}.edit-attachment-frame .media-frame-content{border-bottom:none;bottom:0;top:50px}.edit-attachment-frame .attachment-details{position:absolute;overflow:auto;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 4px 4px -4px rgba(0,0,0,.1)}.edit-attachment-frame .attachment-media-view{float:right;width:65%;height:100%}.edit-attachment-frame .attachment-media-view .thumbnail{box-sizing:border-box;padding:16px;height:100%}.edit-attachment-frame .attachment-media-view .details-image{display:block;margin:0 auto 16px;max-width:100%;max-height:90%;max-height:calc(100% - 42px);background-image:linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:100% 0,10px 10px;background-size:20px 20px}.edit-attachment-frame .attachment-media-view .details-image.icon{background:0 0}.edit-attachment-frame .attachment-media-view .attachment-actions{text-align:center}.edit-attachment-frame .wp-media-wrapper{margin-bottom:12px}.edit-attachment-frame input,.edit-attachment-frame textarea{padding:6px 8px;line-height:1.14285714}.edit-attachment-frame .attachment-info{overflow:auto;box-sizing:border-box;margin-bottom:0;padding:12px 16px 0;width:35%;height:100%;box-shadow:inset 0 4px 4px -4px rgba(0,0,0,.1);border-bottom:0;border-right:1px solid #dcdcde;background:#f6f7f7}.edit-attachment-frame .attachment-info .details,.edit-attachment-frame .attachment-info .settings{position:relative;overflow:hidden;float:none;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #dcdcde}.edit-attachment-frame .attachment-info .filename{font-weight:400;color:#646970}.edit-attachment-frame .attachment-info .thumbnail{margin-bottom:12px}.attachment-info .actions{margin-bottom:16px}.attachment-info .actions a{display:inline;text-decoration:none}.copy-to-clipboard-container{display:flex;align-items:center;margin-top:8px;clear:both}.copy-to-clipboard-container .copy-attachment-url{white-space:normal}.copy-to-clipboard-container .success{color:#008a20;margin-right:8px}.wp_attachment_details .attachment-alt-text{margin-bottom:5px}.wp_attachment_details .attachment-alt-text-description{margin-top:5px}.wp_attachment_details label[for=content]{font-size:13px;line-height:1.5;margin:1em 0}.wp_attachment_details #attachment_caption{height:4em}.describe .image-editor{vertical-align:top}.imgedit-wrap{position:relative;padding-top:10px}.imgedit-settings fieldset,.imgedit-settings p{margin:8px 0}.imgedit-settings legend{margin-bottom:5px}.describe .imgedit-wrap .imgedit-settings{padding:0 5px}.wp_attachment_holder div.updated{margin-top:0}.wp_attachment_holder .imgedit-wrap>div{height:auto}.wp_attachment_holder .imgedit-wrap .imgedit-panel-content{float:right;padding:3px 0 0 16px;min-width:400px;max-width:calc(100% - 266px)}.wp_attachment_holder .imgedit-wrap .imgedit-settings{float:left;width:250px}.imgedit-settings input{margin-top:0;vertical-align:middle}.imgedit-wait{position:absolute;top:0;bottom:0;width:100%;background:#fff;opacity:.7;display:none}.imgedit-wait:before{content:"";display:block;width:20px;height:20px;position:absolute;right:50%;top:50%;margin:-10px -10px 0 0;background:transparent url(../images/spinner.gif) no-repeat center;background-size:20px 20px;transform:translateZ(0)}.no-float{float:none}.imgedit-settings .disabled,.media-disabled{color:#a7aaad}.A1B1{overflow:hidden}.A1B1 .button,.wp_attachment_image .button{float:right}.no-js .wp_attachment_image .button{display:none}.A1B1 .spinner,.wp_attachment_image .spinner{float:right}.imgedit-menu{margin:0 0 12px}.imgedit-menu .note-no-rotate{clear:both;margin:0;padding:1em 0 0}.image-editor .imgedit-menu .button{display:inline-block;width:auto;min-height:28px;font-size:13px;line-height:2;margin:0 0 8px 8px;padding:0 10px}.imgedit-menu .button:before{font:normal 16px/1 dashicons;margin-left:8px;speak:never;vertical-align:middle;position:relative;top:-2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.imgedit-menu .button.disabled{color:#a7aaad;border-color:#dcdcde;background:#f6f7f7;box-shadow:none;text-shadow:0 1px 0 #fff;cursor:default;transform:none}.imgedit-crop:before{content:"\f165"}.imgedit-rleft:before{content:"\f166"}.imgedit-rright:before{content:"\f167"}.imgedit-flipv:before{content:"\f168"}.imgedit-fliph:before{content:"\f169"}.imgedit-undo:before{content:"\f171"}.imgedit-redo:before{content:"\f172"}.imgedit-crop-wrap{position:relative}.imgedit-crop-wrap img{background-image:linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:100% 0,10px 10px;background-size:20px 20px}.imgedit-crop{margin:0 0 0 8px}.imgedit-rleft{margin:0 3px}.imgedit-rright{margin:0 3px 0 8px}.imgedit-flipv{margin:0 3px}.imgedit-fliph{margin:0 3px 0 8px}.imgedit-undo{margin:0 3px}.imgedit-redo{margin:0 3px 0 8px}.imgedit-thumbnail-preview{margin:10px 0 0 8px}.imgedit-thumbnail-preview-caption{display:block}#poststuff .imgedit-group-top h2{display:inline-block;margin:0;padding:0;font-size:14px;line-height:1.4}#poststuff .imgedit-group-top .button-link{text-decoration:none;color:#1d2327}.imgedit-applyto .imgedit-label{display:block;padding:.5em 0 0}.imgedit-help{display:none;padding-bottom:8px}.imgedit-help.imgedit-restore{padding-bottom:0}.image-editor .imgedit-settings .imgedit-help-toggle,.image-editor .imgedit-settings .imgedit-help-toggle:active,.image-editor .imgedit-settings .imgedit-help-toggle:hover{border:1px solid transparent;margin:-1px -1px 0 0;padding:0;background:0 0;color:#2271b1;font-size:20px;line-height:1;cursor:pointer;box-sizing:content-box;box-shadow:none}.image-editor .imgedit-settings .imgedit-help-toggle:focus{color:#2271b1;border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8);outline:2px solid transparent}.form-table td.imgedit-response{padding:0}.imgedit-submit{margin:8px 0 0}.imgedit-submit-btn{margin-right:20px}.imgedit-wrap .nowrap{white-space:nowrap;font-size:12px;line-height:inherit}span.imgedit-scale-warn{color:#d63638;font-size:20px;font-style:normal;visibility:hidden;vertical-align:middle}.imgedit-save-target{margin:8px 0}.imgedit-save-target legend{font-weight:600}.imgedit-group{margin-bottom:8px;padding:10px}.imgedit-settings .imgedit-original-dimensions{display:inline-block}.imgedit-settings .imgedit-crop-ratio input[type=text],.imgedit-settings .imgedit-crop-sel input[type=text],.imgedit-settings .imgedit-scale input[type=text]{width:80px;font-size:14px;padding:0 8px}.imgedit-separator{display:inline-block;width:7px;text-align:center;font-size:13px;color:#3c434a}.imgedit-settings .imgedit-scale-button-wrapper{margin-top:.3077em;display:block}.imgedit-settings .imgedit-scale .button{margin-bottom:0}audio,video{display:inline-block;max-width:100%}.wp-core-ui .mejs-container{width:100%;max-width:100%}.wp-core-ui .mejs-container *{box-sizing:border-box}.wp-core-ui .mejs-time{box-sizing:content-box}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.imgedit-wait:before{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){.wp_attachment_details label[for=content]{font-size:14px;line-height:1.5}.media-upload-form .media-item .error,.media-upload-form .media-item.error{font-size:13px;line-height:1.5}.media-upload-form .media-item.error{padding:1px 10px}.media-upload-form .media-item .error{padding:10px 12px 10px 0}.imgedit-settings .imgedit-crop-ratio input[type=text],.imgedit-settings .imgedit-crop-sel input[type=text],.imgedit-settings .imgedit-scale input[type=text]{font-size:16px;padding:6px 10px}.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,.wp_attachment_holder .imgedit-wrap .imgedit-settings{float:none;width:auto;max-width:none;padding-bottom:16px}.copy-to-clipboard-container .success{font-size:14px}.imgedit-crop-wrap img{width:100%}.media-modal .imgedit-wrap .imgedit-panel-content,.media-modal .imgedit-wrap .imgedit-settings{position:initial!important}.media-modal .imgedit-wrap .imgedit-settings{box-sizing:border-box;width:100%!important}.imgedit-settings .imgedit-scale-button-wrapper{display:inline-block}}@media only screen and (max-width:600px){.media-item-wrapper{grid-template-columns:1fr}}@media only screen and (max-width:1120px){#wp-media-grid .wp-filter .attachment-filters{max-width:100%}}@media only screen and (max-width:782px){.media-frame.mode-select .attachments-browser.fixed .media-toolbar{top:46px;left:10px}}@media only screen and (max-width:600px){.media-frame.mode-select .attachments-browser.fixed .media-toolbar{top:0}}@media only screen and (max-width:480px){.edit-attachment-frame .media-frame-title{left:110px}.edit-attachment-frame .edit-media-header .left,.edit-attachment-frame .edit-media-header .right,.upload-php .media-modal-close{width:40px;height:40px}.edit-attachment-frame .edit-media-header .left:before,.edit-attachment-frame .edit-media-header .right:before{line-height:40px!important}.edit-attachment-frame .edit-media-header .left{left:82px}.edit-attachment-frame .edit-media-header .right{left:41px}.edit-attachment-frame .media-frame-content{top:40px}.edit-attachment-frame .attachment-media-view{float:none;height:auto;width:100%}.edit-attachment-frame .attachment-info{height:auto;width:100%}}@media only screen and (max-width:640px),screen and (max-height:400px){.upload-php .mode-grid .media-sidebar{max-width:100%}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/media.css b/tools/storybook/wordpress/css/media.css new file mode 100644 index 00000000000..d1f333e3431 --- /dev/null +++ b/tools/storybook/wordpress/css/media.css @@ -0,0 +1,1367 @@ +/*------------------------------------------------------------------------------ + 14.0 - Media Screen +------------------------------------------------------------------------------*/ + +.media-item .describe { + border-collapse: collapse; + width: 100%; + border-top: 1px solid #dcdcde; + clear: both; + cursor: default; +} + +.media-item.media-blank .describe { + border: 0; +} + +.media-item .describe th { + vertical-align: top; + text-align: left; + padding: 5px 10px 10px; + width: 140px; +} + +.media-item .describe .align th { + padding-top: 0; +} + +.media-item .media-item-info tr { + background-color: transparent; +} + +.media-item .describe td { + padding: 0 8px 8px 0; + vertical-align: top; +} + +.media-item thead.media-item-info td { + padding: 4px 10px 0; +} + +.media-item .media-item-info .A1B1 { + padding: 0 0 0 10px; +} + +.media-item td.savesend { + padding-bottom: 15px; +} + +.media-item .thumbnail { + max-height: 128px; + max-width: 128px; +} + +.media-list-subtitle { + display: block; +} + +.media-list-title { + display: block; +} + +#wpbody-content #async-upload-wrap a { + display: none; +} + +.media-upload-form { + margin-top: 20px; +} + +.media-upload-form td label { + margin-right: 6px; + margin-left: 2px; +} + +.media-upload-form .align .field label { + display: inline; + padding: 0 0 0 23px; + margin: 0 1em 0 3px; + font-weight: 600; +} + +.media-upload-form tr.image-size label { + margin: 0 0 0 5px; + font-weight: 600; +} + +.media-upload-form th.label label { + font-weight: 600; + margin: 0.5em; + font-size: 13px; +} + +.media-upload-form th.label label span { + padding: 0 5px; +} + +.media-item .describe input[type="text"], +.media-item .describe textarea { + width: 460px; +} + +.media-item .describe p.help { + margin: 0; + padding: 0 0 0 5px; +} + +.describe-toggle-on, +.describe-toggle-off { + display: block; + line-height: 2.76923076; + float: right; + margin-right: 10px; +} + +.media-item-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.media-item .attachment-tools { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.media-item .edit-attachment { + padding: 14px 0; + display: block; + margin-right: 10px; +} + +.media-item .edit-attachment.copy-to-clipboard-container { + margin-top: 0; +} + +.media-item-copy-container .success { + line-height: 0; +} + +.media-item button .copy-attachment-url { + margin-top: 14px; +} + +.media-item .copy-to-clipboard-container { + margin-top: 7px; +} + +.media-item .describe-toggle-off, +.media-item.open .describe-toggle-on { + display: none; +} + +.media-item.open .describe-toggle-off { + display: block; +} + +.media-upload-form .media-item { + min-height: 70px; + margin-bottom: 1px; + position: relative; + width: 100%; + background: #fff; +} + +.media-upload-form .media-item, +.media-upload-form .media-item .error { + box-shadow: 0 1px 0 #dcdcde; +} + +#media-items:empty { + border: 0 none; +} + +.media-item .filename { + padding: 14px 0; + overflow: hidden; + margin-left: 6px; +} + +.media-item .pinkynail { + float: left; + margin: 0 10px 0 0; + max-height: 70px; + max-width: 70px; +} + +.media-item .startopen, +.media-item .startclosed { + display: none; +} + +.media-item .original { + position: relative; + height: 34px; +} + +.media-item .progress { + float: right; + height: 22px; + margin: 7px 6px; + width: 200px; + line-height: 2em; + padding: 0; + overflow: hidden; + border-radius: 22px; + background: #dcdcde; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.media-item .bar { + z-index: 9; + width: 0; + height: 100%; + margin-top: -22px; + border-radius: 22px; + background-color: #2271b1; + box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); +} + +.media-item .progress .percent { + z-index: 10; + position: relative; + width: 200px; + padding: 0; + color: #fff; + text-align: center; + line-height: 22px; + font-weight: 400; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); +} + +.upload-php .fixed .column-parent { + width: 15%; +} + +.js .html-uploader #plupload-upload-ui { + display: none; +} + +.js .html-uploader #html-upload-ui { + display: block; +} + +#html-upload-ui #async-upload { + font-size: 1em; +} + +.media-upload-form .media-item.error, +.media-upload-form .media-item .error { + width: auto; + margin: 0 0 1px; +} + +.media-upload-form .media-item .error { + padding: 10px 0 10px 14px; + min-height: 50px; +} + +.media-item .error-div button.dismiss { + float: right; + margin: 0 10px 0 15px; +} + +/*------------------------------------------------------------------------------ + 14.1 - Media Library +------------------------------------------------------------------------------*/ + +.find-box { + background-color: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + width: 600px; + overflow: hidden; + margin-left: -300px; + position: fixed; + top: 30px; + bottom: 30px; + left: 50%; + z-index: 100105; +} + +.find-box-head { + background: #fff; + border-bottom: 1px solid #dcdcde; + height: 36px; + font-size: 18px; + font-weight: 600; + line-height: 2; + padding: 0 36px 0 16px; + position: absolute; + top: 0; + left: 0; + right: 0; +} + +.find-box-inside { + overflow: auto; + padding: 16px; + background-color: #fff; + position: absolute; + top: 37px; + bottom: 45px; + overflow-y: scroll; + width: 100%; + box-sizing: border-box; +} + +.find-box-search { + padding-bottom: 16px; +} + +.find-box-search .spinner { + float: none; + left: 105px; + position: absolute; +} + +.find-box-search, +#find-posts-response { + position: relative; /* RTL fix, #WP28010 */ +} + +#find-posts-input, +#find-posts-search { + float: left; +} + +#find-posts-input { + width: 140px; + height: 28px; + margin: 0 4px 0 0; +} + +.widefat .found-radio { + padding-right: 0; + width: 16px; +} + +#find-posts-close { + width: 36px; + height: 36px; + border: none; + padding: 0; + position: absolute; + top: 0; + right: 0; + cursor: pointer; + text-align: center; + background: none; + color: #646970; +} + +#find-posts-close:hover, +#find-posts-close:focus { + color: #135e96; +} + +#find-posts-close:focus { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +#find-posts-close:before { + font: normal 20px/36px dashicons; + vertical-align: top; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f158"; +} + +.find-box-buttons { + padding: 8px 16px; + background: #fff; + border-top: 1px solid #dcdcde; + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +@media screen and (max-width: 782px) { + .find-box-inside { + bottom: 57px; + } +} + +@media screen and (max-width: 660px) { + + .find-box { + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: 0; + width: 100%; + } + +} + +.ui-find-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #000; + opacity: 0.7; + filter: alpha(opacity=70); + z-index: 100100; +} + +.drag-drop #drag-drop-area { + border: 4px dashed #c3c4c7; + height: 200px; +} + +.drag-drop .drag-drop-inside { + margin: 60px auto 0; + width: 250px; +} + +.drag-drop-inside p { + font-size: 14px; + margin: 5px 0; + display: none; +} + +.drag-drop .drag-drop-inside p { + text-align: center; +} + +.drag-drop-inside p.drag-drop-info { + font-size: 20px; +} + +.drag-drop .drag-drop-inside p, +.drag-drop-inside p.drag-drop-buttons { + display: block; +} + +/* +#drag-drop-area:-moz-drag-over { + border-color: #83b4d8; +} +border color while dragging a file over the uploader drop area */ +.drag-drop.drag-over #drag-drop-area { + border-color: #9ec2e6; +} + +#plupload-upload-ui { + position: relative; +} + +/** + * Media Library grid view + */ + +.media-frame.mode-grid, +.media-frame.mode-grid .media-frame-content, +.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments, +.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper, +.media-frame.mode-grid .uploader-inline-content { + position: static; +} + +/* Regions we don't use at all */ +.media-frame.mode-grid .media-frame-title, +.media-frame.mode-grid .media-frame-router, +.media-frame.mode-grid .media-frame-menu { + display: none; +} + +.media-frame.mode-grid .media-frame-content { + background-color: transparent; + border: none; +} + +.upload-php .mode-grid .media-sidebar { + position: relative; + width: auto; + margin-top: 12px; + padding: 0 16px; + border-left: 4px solid #d63638; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + background-color: #fff; +} + +.upload-php .mode-grid .hide-sidebar .media-sidebar { + display: none; +} + +.upload-php .mode-grid .media-sidebar .media-uploader-status { + border-bottom: none; + padding-bottom: 0; + max-width: 100%; +} + +.upload-php .mode-grid .media-sidebar .upload-error { + margin: 12px 0; + padding: 4px 0 0; + border: none; + box-shadow: none; + background: none; +} + +.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 { + display: none; +} + +.media-frame.mode-grid .uploader-inline { + position: relative; + top: auto; + right: auto; + left: auto; + bottom: auto; + padding-top: 0; + margin-top: 20px; + border: 4px dashed #c3c4c7; +} + +.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments, +.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper { + position: relative; + top: 94px; /* prevent jumping up when the toolbar becomes fixed */ + padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */ +} + +.media-frame.mode-grid .attachment:focus, +.media-frame.mode-grid .selected.attachment:focus, +.media-frame.mode-grid .attachment.details:focus { + box-shadow: + inset 0 0 2px 3px #f0f0f1, + inset 0 0 0 7px #4f94d4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -6px; +} + +.media-frame.mode-grid .selected.attachment { + box-shadow: + inset 0 0 0 5px #f0f0f1, + inset 0 0 0 7px #c3c4c7; +} + +.media-frame.mode-grid .attachment.details { + box-shadow: + inset 0 0 0 3px #f0f0f1, + inset 0 0 0 7px #4f94d4; +} + +.media-frame.mode-grid.mode-select .attachment .thumbnail { + opacity: 0.65; +} + +.media-frame.mode-select .attachment.selected .thumbnail { + opacity: 1; +} + +.media-frame.mode-grid .media-toolbar { + margin-bottom: 15px; + height: auto; +} + +.media-frame.mode-grid .media-toolbar select { + margin: 0 10px 0 0; +} + +.media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button { + margin: 0 8px 0 0; + vertical-align: middle; +} + +.media-frame.mode-grid .attachments-browser .bulk-select { + display: inline-block; + margin: 0 10px 0 0; +} + +.media-frame.mode-grid .search { + margin-top: 0; +} + +.media-search-input-label { + margin: 0 .2em 0 0; + vertical-align: baseline; +} + +.media-frame.mode-grid .media-search-input-label { + position: static; + margin: 0 .5em 0 0; +} + +.attachments-browser .media-toolbar-secondary > .media-button { + margin-right: 10px; +} + +.media-frame.mode-select .attachments-browser.fixed .media-toolbar { + position: fixed; + top: 32px; + left: auto; + right: 20px; + margin-top: 0; +} + +.media-frame.mode-grid .attachments-browser { + padding: 0; +} + +.media-frame.mode-grid .attachments-browser .attachments { + padding: 2px; +} + +.media-frame.mode-grid .attachments-browser .no-media { + color: #646970; /* same as no plugins and no themes */ + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0 0; + text-align: center; +} + +/** + * Attachment details modal + */ + +.edit-attachment-frame { + display: block; + height: 100%; + width: 100%; +} + +.edit-attachment-frame .edit-media-header { + overflow: hidden; +} + +.upload-php .media-modal-close .media-modal-icon:before { + content: "\f335"; + font-size: 22px; +} + +.upload-php .media-modal-close, +.edit-attachment-frame .edit-media-header .left, +.edit-attachment-frame .edit-media-header .right { + cursor: pointer; + color: #787c82; + background-color: transparent; + height: 50px; + width: 50px; + padding: 0; + position: absolute; + text-align: center; + border: 0; + border-left: 1px solid #dcdcde; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.upload-php .media-modal-close { + top: 0; + right: 0; +} + +.edit-attachment-frame .edit-media-header .left { + right: 102px; +} + +.edit-attachment-frame .edit-media-header .right { + right: 51px; +} + +.edit-attachment-frame .media-frame-title { + left: 0; + right: 150px; /* leave space for prev/next/close */ +} + +.edit-attachment-frame .edit-media-header .right:before, +.edit-attachment-frame .edit-media-header .left:before { + font: normal 20px/50px dashicons !important; + display: inline; + font-weight: 300; +} + +.upload-php .media-modal-close:hover, +.upload-php .media-modal-close:focus, +.edit-attachment-frame .edit-media-header .left:hover, +.edit-attachment-frame .edit-media-header .right:hover, +.edit-attachment-frame .edit-media-header .left:focus, +.edit-attachment-frame .edit-media-header .right:focus { + background: #dcdcde; + border-color: #c3c4c7; + color: #000; + outline: none; + box-shadow: none; +} + +.upload-php .media-modal-close:focus, +.edit-attachment-frame .edit-media-header .left:focus, +.edit-attachment-frame .edit-media-header .right:focus { + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.upload-php .media-modal-close:focus .media-modal-icon:before, +.upload-php .media-modal-close:hover .media-modal-icon:before { + color: #000; +} + +.edit-attachment-frame .edit-media-header .left:before { + content: "\f341"; +} + +.edit-attachment-frame .edit-media-header .right:before { + content: "\f345"; +} + +.edit-attachment-frame .edit-media-header [disabled], +.edit-attachment-frame .edit-media-header [disabled]:hover { + color: #c3c4c7; + background: inherit; + cursor: default; +} + +.edit-attachment-frame .media-frame-content, +.edit-attachment-frame .media-frame-router { + left: 0; +} + +.edit-attachment-frame .media-frame-content { + border-bottom: none; + bottom: 0; + top: 50px; +} + +.edit-attachment-frame .attachment-details { + position: absolute; + overflow: auto; + top: 0; + bottom: 0; + right: 0; + left: 0; + box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); +} + +.edit-attachment-frame .attachment-media-view { + float: left; + width: 65%; + height: 100%; +} + +.edit-attachment-frame .attachment-media-view .thumbnail { + box-sizing: border-box; + padding: 16px; + height: 100%; +} + +.edit-attachment-frame .attachment-media-view .details-image { + display: block; + margin: 0 auto 16px; + max-width: 100%; + max-height: 90%; + max-height: calc( 100% - 42px ); /* leave space for actions underneath */ + background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; +} + +.edit-attachment-frame .attachment-media-view .details-image.icon { + background: none; +} + +.edit-attachment-frame .attachment-media-view .attachment-actions { + text-align: center; +} + +.edit-attachment-frame .wp-media-wrapper { + margin-bottom: 12px; +} + +.edit-attachment-frame input, +.edit-attachment-frame textarea { + padding: 6px 8px; + line-height: 1.14285714; +} + +.edit-attachment-frame .attachment-info { + overflow: auto; + box-sizing: border-box; + margin-bottom: 0; + padding: 12px 16px 0; + width: 35%; + height: 100%; + box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); + border-bottom: 0; + border-left: 1px solid #dcdcde; + background: #f6f7f7; +} + +.edit-attachment-frame .attachment-info .details, +.edit-attachment-frame .attachment-info .settings { + position: relative; /* RTL fix, #WP29352 */ + overflow: hidden; + float: none; + margin-bottom: 15px; + padding-bottom: 15px; + border-bottom: 1px solid #dcdcde; +} + +.edit-attachment-frame .attachment-info .filename { + font-weight: 400; + color: #646970; +} + +.edit-attachment-frame .attachment-info .thumbnail { + margin-bottom: 12px; +} + +.attachment-info .actions { + margin-bottom: 16px; +} + +.attachment-info .actions a { + display: inline; + text-decoration: none; +} + +.copy-to-clipboard-container { + display: flex; + align-items: center; + margin-top: 8px; + clear: both; +} + +.copy-to-clipboard-container .copy-attachment-url { + white-space: normal; +} + +.copy-to-clipboard-container .success { + color: #008a20; + margin-left: 8px; +} + +/*------------------------------------------------------------------------------ + 14.2 - Image Editor +------------------------------------------------------------------------------*/ +.wp_attachment_details .attachment-alt-text { + margin-bottom: 5px; +} + +.wp_attachment_details .attachment-alt-text-description { + margin-top: 5px; +} + +.wp_attachment_details label[for="content"] { + font-size: 13px; + line-height: 1.5; + margin: 1em 0; +} + +.wp_attachment_details #attachment_caption { + height: 4em; +} + +.describe .image-editor { + vertical-align: top; +} + +.imgedit-wrap { + position: relative; + padding-top: 10px; +} + +.imgedit-settings p, +.imgedit-settings fieldset { + margin: 8px 0; +} + +.imgedit-settings legend { + margin-bottom: 5px; +} + +.describe .imgedit-wrap .imgedit-settings { + padding: 0 5px; +} + +.wp_attachment_holder div.updated { + margin-top: 0; +} + +.wp_attachment_holder .imgedit-wrap > div { + height: auto; +} + +.wp_attachment_holder .imgedit-wrap .imgedit-panel-content { + float: left; + padding: 3px 16px 0 0; + min-width: 400px; + max-width: calc( 100% - 266px ); +} + +.wp_attachment_holder .imgedit-wrap .imgedit-settings { + float: right; + width: 250px; +} + +.imgedit-settings input { + margin-top: 0; + vertical-align: middle; +} + +.imgedit-wait { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + background: #fff; + opacity: 0.7; + filter: alpha(opacity=70); + display: none; +} + +.imgedit-wait:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + left: 50%; + top: 50%; + margin: -10px 0 0 -10px; + background: transparent url(../images/spinner.gif) no-repeat center; + background-size: 20px 20px; + transform: translateZ(0); +} + +.no-float { + float: none; +} + +.media-disabled, +.imgedit-settings .disabled { + /* WCAG 1.4.3 Text or images of text that are part of an inactive user + interface component ... have no contrast requirement. */ + color: #a7aaad; +} + +.A1B1 { + overflow: hidden; +} + +.wp_attachment_image .button, +.A1B1 .button { + float: left; +} + +.no-js .wp_attachment_image .button { + display: none; +} + +.wp_attachment_image .spinner, +.A1B1 .spinner { + float: left; +} + +.imgedit-menu { + margin: 0 0 12px; +} + +.imgedit-menu .note-no-rotate { + clear: both; + margin: 0; + padding: 1em 0 0; +} + +.image-editor .imgedit-menu .button { + display: inline-block; + width: auto; + min-height: 28px; + font-size: 13px; + line-height: 2; + margin: 0 8px 8px 0; + padding: 0 10px; +} + +.imgedit-menu .button:before { + font: normal 16px/1 dashicons; + margin-right: 8px; + speak: never; + vertical-align: middle; + position: relative; + top: -2px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.imgedit-menu .button.disabled { + color: #a7aaad; + border-color: #dcdcde; + background: #f6f7f7; + box-shadow: none; + text-shadow: 0 1px 0 #fff; + cursor: default; + transform: none; +} + +.imgedit-crop:before { + content: "\f165"; +} + +.imgedit-rleft:before { + content: "\f166"; +} + +.imgedit-rright:before { + content: "\f167"; +} + +.imgedit-flipv:before { + content: "\f168"; +} + +.imgedit-fliph:before { + content: "\f169"; +} + +.imgedit-undo:before { + content: "\f171"; +} + +.imgedit-redo:before { + content: "\f172"; +} + +.imgedit-crop-wrap { + position: relative; +} + +.imgedit-crop-wrap img { + background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; +} + +.imgedit-crop { + margin: 0 8px 0 0; +} + +.imgedit-rleft { + margin: 0 3px; +} + +.imgedit-rright { + margin: 0 8px 0 3px; +} + +.imgedit-flipv { + margin: 0 3px; +} + +.imgedit-fliph { + margin: 0 8px 0 3px; +} + +.imgedit-undo { + margin: 0 3px; +} + +.imgedit-redo { + margin: 0 8px 0 3px; +} + +.imgedit-thumbnail-preview { + margin: 10px 8px 0 0; +} + +.imgedit-thumbnail-preview-caption { + display: block; +} + +#poststuff .imgedit-group-top h2 { + display: inline-block; + margin: 0; + padding: 0; + font-size: 14px; + line-height: 1.4; +} + +#poststuff .imgedit-group-top .button-link { + text-decoration: none; + color: #1d2327; +} + +.imgedit-applyto .imgedit-label { + display: block; + padding: .5em 0 0; +} + +.imgedit-help { + display: none; + padding-bottom: 8px; +} + +.imgedit-help.imgedit-restore { + padding-bottom: 0; +} + +/* higher specificity than buttons */ +.image-editor .imgedit-settings .imgedit-help-toggle, +.image-editor .imgedit-settings .imgedit-help-toggle:hover, +.image-editor .imgedit-settings .imgedit-help-toggle:active { + border: 1px solid transparent; + margin: -1px 0 0 -1px; + padding: 0; + background: transparent; + color: #2271b1; + font-size: 20px; + line-height: 1; + cursor: pointer; + box-sizing: content-box; + box-shadow: none; +} + +.image-editor .imgedit-settings .imgedit-help-toggle:focus { + color: #2271b1; + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.form-table td.imgedit-response { + padding: 0; +} + +.imgedit-submit { + margin: 8px 0 0; +} + +.imgedit-submit-btn { + margin-left: 20px; +} + +.imgedit-wrap .nowrap { + white-space: nowrap; + font-size: 12px; + line-height: inherit; +} + +span.imgedit-scale-warn { + color: #d63638; + font-size: 20px; + font-style: normal; + visibility: hidden; + vertical-align: middle; +} + +.imgedit-save-target { + margin: 8px 0; +} + +.imgedit-save-target legend { + font-weight: 600; +} + +.imgedit-group { + margin-bottom: 8px; + padding: 10px; +} + +.imgedit-settings .imgedit-original-dimensions { + display: inline-block; +} + +.imgedit-settings .imgedit-scale input[type="text"], +.imgedit-settings .imgedit-crop-ratio input[type="text"], +.imgedit-settings .imgedit-crop-sel input[type="text"] { + width: 80px; + font-size: 14px; + padding: 0 8px; +} + +.imgedit-separator { + display: inline-block; + width: 7px; + text-align: center; + font-size: 13px; + color: #3c434a; +} + +.imgedit-settings .imgedit-scale-button-wrapper { + margin-top: 0.3077em; + display: block; +} + +.imgedit-settings .imgedit-scale .button { + margin-bottom: 0; +} + +audio, video { + display: inline-block; + max-width: 100%; +} + +.wp-core-ui .mejs-container { + width: 100%; + max-width: 100%; +} + +.wp-core-ui .mejs-container * { + box-sizing: border-box; +} + +.wp-core-ui .mejs-time { + box-sizing: content-box; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + .imgedit-wait:before { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + .wp_attachment_details label[for="content"] { + font-size: 14px; + line-height: 1.5; + } + + .media-upload-form .media-item.error, + .media-upload-form .media-item .error { + font-size: 13px; + line-height: 1.5; + } + + .media-upload-form .media-item.error { + padding: 1px 10px; + } + + .media-upload-form .media-item .error { + padding: 10px 0 10px 12px; + } + + .imgedit-settings .imgedit-scale input[type="text"], + .imgedit-settings .imgedit-crop-ratio input[type="text"], + .imgedit-settings .imgedit-crop-sel input[type="text"] { + font-size: 16px; + padding: 6px 10px; + } + + .wp_attachment_holder .imgedit-wrap .imgedit-panel-content, + .wp_attachment_holder .imgedit-wrap .imgedit-settings { + float: none; + width: auto; + max-width: none; + padding-bottom: 16px; + } + + .copy-to-clipboard-container .success { + font-size: 14px; + } + + /* Restructure image editor on narrow viewports. */ + .imgedit-crop-wrap img{ + width: 100%; + } + + .media-modal .imgedit-wrap .imgedit-panel-content, + .media-modal .imgedit-wrap .imgedit-settings { + position: initial !important; + } + + .media-modal .imgedit-wrap .imgedit-settings { + box-sizing: border-box; + width: 100% !important; + } + + .imgedit-settings .imgedit-scale-button-wrapper { + display: inline-block; + } +} + +@media only screen and (max-width: 600px) { + .media-item-wrapper { + grid-template-columns: 1fr; + } +} + +/** + * Media queries for media grid. + */ + +@media only screen and (max-width: 1120px) { + /* override for media-views.css */ + #wp-media-grid .wp-filter .attachment-filters { + max-width: 100%; + } +} + +@media only screen and (max-width: 782px) { + .media-frame.mode-select .attachments-browser.fixed .media-toolbar { + top: 46px; + right: 10px; + } +} + +@media only screen and (max-width: 600px) { + .media-frame.mode-select .attachments-browser.fixed .media-toolbar { + top: 0; + } +} + +@media only screen and (max-width: 480px) { + .edit-attachment-frame .media-frame-title { + right: 110px; + } + + .upload-php .media-modal-close, + .edit-attachment-frame .edit-media-header .left, + .edit-attachment-frame .edit-media-header .right { + width: 40px; + height: 40px; + } + + .edit-attachment-frame .edit-media-header .right:before, + .edit-attachment-frame .edit-media-header .left:before { + line-height: 40px !important; + } + + .edit-attachment-frame .edit-media-header .left { + right: 82px; + } + + .edit-attachment-frame .edit-media-header .right { + right: 41px; + } + + .edit-attachment-frame .media-frame-content { + top: 40px; + } + + .edit-attachment-frame .attachment-media-view { + float: none; + height: auto; + width: 100%; + } + + .edit-attachment-frame .attachment-info { + height: auto; + width: 100%; + } +} + +@media only screen and (max-width: 640px), screen and (max-height: 400px) { + .upload-php .mode-grid .media-sidebar{ + max-width: 100%; + } +} diff --git a/tools/storybook/wordpress/css/media.min.css b/tools/storybook/wordpress/css/media.min.css new file mode 100644 index 00000000000..ab1226e6f34 --- /dev/null +++ b/tools/storybook/wordpress/css/media.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.media-item .describe{border-collapse:collapse;width:100%;border-top:1px solid #dcdcde;clear:both;cursor:default}.media-item.media-blank .describe{border:0}.media-item .describe th{vertical-align:top;text-align:left;padding:5px 10px 10px;width:140px}.media-item .describe .align th{padding-top:0}.media-item .media-item-info tr{background-color:transparent}.media-item .describe td{padding:0 8px 8px 0;vertical-align:top}.media-item thead.media-item-info td{padding:4px 10px 0}.media-item .media-item-info .A1B1{padding:0 0 0 10px}.media-item td.savesend{padding-bottom:15px}.media-item .thumbnail{max-height:128px;max-width:128px}.media-list-subtitle{display:block}.media-list-title{display:block}#wpbody-content #async-upload-wrap a{display:none}.media-upload-form{margin-top:20px}.media-upload-form td label{margin-right:6px;margin-left:2px}.media-upload-form .align .field label{display:inline;padding:0 0 0 23px;margin:0 1em 0 3px;font-weight:600}.media-upload-form tr.image-size label{margin:0 0 0 5px;font-weight:600}.media-upload-form th.label label{font-weight:600;margin:.5em;font-size:13px}.media-upload-form th.label label span{padding:0 5px}.media-item .describe input[type=text],.media-item .describe textarea{width:460px}.media-item .describe p.help{margin:0;padding:0 0 0 5px}.describe-toggle-off,.describe-toggle-on{display:block;line-height:2.76923076;float:right;margin-right:10px}.media-item-wrapper{display:grid;grid-template-columns:1fr 1fr}.media-item .attachment-tools{display:flex;justify-content:flex-end;align-items:center}.media-item .edit-attachment{padding:14px 0;display:block;margin-right:10px}.media-item .edit-attachment.copy-to-clipboard-container{margin-top:0}.media-item-copy-container .success{line-height:0}.media-item button .copy-attachment-url{margin-top:14px}.media-item .copy-to-clipboard-container{margin-top:7px}.media-item .describe-toggle-off,.media-item.open .describe-toggle-on{display:none}.media-item.open .describe-toggle-off{display:block}.media-upload-form .media-item{min-height:70px;margin-bottom:1px;position:relative;width:100%;background:#fff}.media-upload-form .media-item,.media-upload-form .media-item .error{box-shadow:0 1px 0 #dcdcde}#media-items:empty{border:0 none}.media-item .filename{padding:14px 0;overflow:hidden;margin-left:6px}.media-item .pinkynail{float:left;margin:0 10px 0 0;max-height:70px;max-width:70px}.media-item .startclosed,.media-item .startopen{display:none}.media-item .original{position:relative;height:34px}.media-item .progress{float:right;height:22px;margin:7px 6px;width:200px;line-height:2em;padding:0;overflow:hidden;border-radius:22px;background:#dcdcde;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.media-item .bar{z-index:9;width:0;height:100%;margin-top:-22px;border-radius:22px;background-color:#2271b1;box-shadow:inset 0 0 2px rgba(0,0,0,.3)}.media-item .progress .percent{z-index:10;position:relative;width:200px;padding:0;color:#fff;text-align:center;line-height:22px;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.2)}.upload-php .fixed .column-parent{width:15%}.js .html-uploader #plupload-upload-ui{display:none}.js .html-uploader #html-upload-ui{display:block}#html-upload-ui #async-upload{font-size:1em}.media-upload-form .media-item .error,.media-upload-form .media-item.error{width:auto;margin:0 0 1px}.media-upload-form .media-item .error{padding:10px 0 10px 14px;min-height:50px}.media-item .error-div button.dismiss{float:right;margin:0 10px 0 15px}.find-box{background-color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3);width:600px;overflow:hidden;margin-left:-300px;position:fixed;top:30px;bottom:30px;left:50%;z-index:100105}.find-box-head{background:#fff;border-bottom:1px solid #dcdcde;height:36px;font-size:18px;font-weight:600;line-height:2;padding:0 36px 0 16px;position:absolute;top:0;left:0;right:0}.find-box-inside{overflow:auto;padding:16px;background-color:#fff;position:absolute;top:37px;bottom:45px;overflow-y:scroll;width:100%;box-sizing:border-box}.find-box-search{padding-bottom:16px}.find-box-search .spinner{float:none;left:105px;position:absolute}#find-posts-response,.find-box-search{position:relative}#find-posts-input,#find-posts-search{float:left}#find-posts-input{width:140px;height:28px;margin:0 4px 0 0}.widefat .found-radio{padding-right:0;width:16px}#find-posts-close{width:36px;height:36px;border:none;padding:0;position:absolute;top:0;right:0;cursor:pointer;text-align:center;background:0 0;color:#646970}#find-posts-close:focus,#find-posts-close:hover{color:#135e96}#find-posts-close:focus{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);outline:2px solid transparent;outline-offset:-2px}#find-posts-close:before{font:normal 20px/36px dashicons;vertical-align:top;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f158"}.find-box-buttons{padding:8px 16px;background:#fff;border-top:1px solid #dcdcde;position:absolute;bottom:0;left:0;right:0}@media screen and (max-width:782px){.find-box-inside{bottom:57px}}@media screen and (max-width:660px){.find-box{top:0;bottom:0;left:0;right:0;margin:0;width:100%}}.ui-find-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;opacity:.7;z-index:100100}.drag-drop #drag-drop-area{border:4px dashed #c3c4c7;height:200px}.drag-drop .drag-drop-inside{margin:60px auto 0;width:250px}.drag-drop-inside p{font-size:14px;margin:5px 0;display:none}.drag-drop .drag-drop-inside p{text-align:center}.drag-drop-inside p.drag-drop-info{font-size:20px}.drag-drop .drag-drop-inside p,.drag-drop-inside p.drag-drop-buttons{display:block}.drag-drop.drag-over #drag-drop-area{border-color:#9ec2e6}#plupload-upload-ui{position:relative}.media-frame.mode-grid,.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,.media-frame.mode-grid .media-frame-content,.media-frame.mode-grid .uploader-inline-content{position:static}.media-frame.mode-grid .media-frame-menu,.media-frame.mode-grid .media-frame-router,.media-frame.mode-grid .media-frame-title{display:none}.media-frame.mode-grid .media-frame-content{background-color:transparent;border:none}.upload-php .mode-grid .media-sidebar{position:relative;width:auto;margin-top:12px;padding:0 16px;border-left:4px solid #d63638;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);background-color:#fff}.upload-php .mode-grid .hide-sidebar .media-sidebar{display:none}.upload-php .mode-grid .media-sidebar .media-uploader-status{border-bottom:none;padding-bottom:0;max-width:100%}.upload-php .mode-grid .media-sidebar .upload-error{margin:12px 0;padding:4px 0 0;border:none;box-shadow:none;background:0 0}.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2{display:none}.media-frame.mode-grid .uploader-inline{position:relative;top:auto;right:auto;left:auto;bottom:auto;padding-top:0;margin-top:20px;border:4px dashed #c3c4c7}.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper{position:relative;top:94px;padding-bottom:94px}.media-frame.mode-grid .attachment.details:focus,.media-frame.mode-grid .attachment:focus,.media-frame.mode-grid .selected.attachment:focus{box-shadow:inset 0 0 2px 3px #f0f0f1,inset 0 0 0 7px #4f94d4;outline:2px solid transparent;outline-offset:-6px}.media-frame.mode-grid .selected.attachment{box-shadow:inset 0 0 0 5px #f0f0f1,inset 0 0 0 7px #c3c4c7}.media-frame.mode-grid .attachment.details{box-shadow:inset 0 0 0 3px #f0f0f1,inset 0 0 0 7px #4f94d4}.media-frame.mode-grid.mode-select .attachment .thumbnail{opacity:.65}.media-frame.mode-select .attachment.selected .thumbnail{opacity:1}.media-frame.mode-grid .media-toolbar{margin-bottom:15px;height:auto}.media-frame.mode-grid .media-toolbar select{margin:0 10px 0 0}.media-frame.mode-grid.mode-edit .media-toolbar-secondary>.select-mode-toggle-button{margin:0 8px 0 0;vertical-align:middle}.media-frame.mode-grid .attachments-browser .bulk-select{display:inline-block;margin:0 10px 0 0}.media-frame.mode-grid .search{margin-top:0}.media-search-input-label{margin:0 .2em 0 0;vertical-align:baseline}.media-frame.mode-grid .media-search-input-label{position:static;margin:0 .5em 0 0}.attachments-browser .media-toolbar-secondary>.media-button{margin-right:10px}.media-frame.mode-select .attachments-browser.fixed .media-toolbar{position:fixed;top:32px;left:auto;right:20px;margin-top:0}.media-frame.mode-grid .attachments-browser{padding:0}.media-frame.mode-grid .attachments-browser .attachments{padding:2px}.media-frame.mode-grid .attachments-browser .no-media{color:#646970;font-size:18px;font-style:normal;margin:0;padding:100px 0 0;text-align:center}.edit-attachment-frame{display:block;height:100%;width:100%}.edit-attachment-frame .edit-media-header{overflow:hidden}.upload-php .media-modal-close .media-modal-icon:before{content:"\f335";font-size:22px}.edit-attachment-frame .edit-media-header .left,.edit-attachment-frame .edit-media-header .right,.upload-php .media-modal-close{cursor:pointer;color:#787c82;background-color:transparent;height:50px;width:50px;padding:0;position:absolute;text-align:center;border:0;border-left:1px solid #dcdcde;transition:color .1s ease-in-out,background .1s ease-in-out}.upload-php .media-modal-close{top:0;right:0}.edit-attachment-frame .edit-media-header .left{right:102px}.edit-attachment-frame .edit-media-header .right{right:51px}.edit-attachment-frame .media-frame-title{left:0;right:150px}.edit-attachment-frame .edit-media-header .left:before,.edit-attachment-frame .edit-media-header .right:before{font:normal 20px/50px dashicons!important;display:inline;font-weight:300}.edit-attachment-frame .edit-media-header .left:focus,.edit-attachment-frame .edit-media-header .left:hover,.edit-attachment-frame .edit-media-header .right:focus,.edit-attachment-frame .edit-media-header .right:hover,.upload-php .media-modal-close:focus,.upload-php .media-modal-close:hover{background:#dcdcde;border-color:#c3c4c7;color:#000;outline:0;box-shadow:none}.edit-attachment-frame .edit-media-header .left:focus,.edit-attachment-frame .edit-media-header .right:focus,.upload-php .media-modal-close:focus{outline:2px solid transparent;outline-offset:-2px}.upload-php .media-modal-close:focus .media-modal-icon:before,.upload-php .media-modal-close:hover .media-modal-icon:before{color:#000}.edit-attachment-frame .edit-media-header .left:before{content:"\f341"}.edit-attachment-frame .edit-media-header .right:before{content:"\f345"}.edit-attachment-frame .edit-media-header [disabled],.edit-attachment-frame .edit-media-header [disabled]:hover{color:#c3c4c7;background:inherit;cursor:default}.edit-attachment-frame .media-frame-content,.edit-attachment-frame .media-frame-router{left:0}.edit-attachment-frame .media-frame-content{border-bottom:none;bottom:0;top:50px}.edit-attachment-frame .attachment-details{position:absolute;overflow:auto;top:0;bottom:0;right:0;left:0;box-shadow:inset 0 4px 4px -4px rgba(0,0,0,.1)}.edit-attachment-frame .attachment-media-view{float:left;width:65%;height:100%}.edit-attachment-frame .attachment-media-view .thumbnail{box-sizing:border-box;padding:16px;height:100%}.edit-attachment-frame .attachment-media-view .details-image{display:block;margin:0 auto 16px;max-width:100%;max-height:90%;max-height:calc(100% - 42px);background-image:linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:0 0,10px 10px;background-size:20px 20px}.edit-attachment-frame .attachment-media-view .details-image.icon{background:0 0}.edit-attachment-frame .attachment-media-view .attachment-actions{text-align:center}.edit-attachment-frame .wp-media-wrapper{margin-bottom:12px}.edit-attachment-frame input,.edit-attachment-frame textarea{padding:6px 8px;line-height:1.14285714}.edit-attachment-frame .attachment-info{overflow:auto;box-sizing:border-box;margin-bottom:0;padding:12px 16px 0;width:35%;height:100%;box-shadow:inset 0 4px 4px -4px rgba(0,0,0,.1);border-bottom:0;border-left:1px solid #dcdcde;background:#f6f7f7}.edit-attachment-frame .attachment-info .details,.edit-attachment-frame .attachment-info .settings{position:relative;overflow:hidden;float:none;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #dcdcde}.edit-attachment-frame .attachment-info .filename{font-weight:400;color:#646970}.edit-attachment-frame .attachment-info .thumbnail{margin-bottom:12px}.attachment-info .actions{margin-bottom:16px}.attachment-info .actions a{display:inline;text-decoration:none}.copy-to-clipboard-container{display:flex;align-items:center;margin-top:8px;clear:both}.copy-to-clipboard-container .copy-attachment-url{white-space:normal}.copy-to-clipboard-container .success{color:#008a20;margin-left:8px}.wp_attachment_details .attachment-alt-text{margin-bottom:5px}.wp_attachment_details .attachment-alt-text-description{margin-top:5px}.wp_attachment_details label[for=content]{font-size:13px;line-height:1.5;margin:1em 0}.wp_attachment_details #attachment_caption{height:4em}.describe .image-editor{vertical-align:top}.imgedit-wrap{position:relative;padding-top:10px}.imgedit-settings fieldset,.imgedit-settings p{margin:8px 0}.imgedit-settings legend{margin-bottom:5px}.describe .imgedit-wrap .imgedit-settings{padding:0 5px}.wp_attachment_holder div.updated{margin-top:0}.wp_attachment_holder .imgedit-wrap>div{height:auto}.wp_attachment_holder .imgedit-wrap .imgedit-panel-content{float:left;padding:3px 16px 0 0;min-width:400px;max-width:calc(100% - 266px)}.wp_attachment_holder .imgedit-wrap .imgedit-settings{float:right;width:250px}.imgedit-settings input{margin-top:0;vertical-align:middle}.imgedit-wait{position:absolute;top:0;bottom:0;width:100%;background:#fff;opacity:.7;display:none}.imgedit-wait:before{content:"";display:block;width:20px;height:20px;position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px;background:transparent url(../images/spinner.gif) no-repeat center;background-size:20px 20px;transform:translateZ(0)}.no-float{float:none}.imgedit-settings .disabled,.media-disabled{color:#a7aaad}.A1B1{overflow:hidden}.A1B1 .button,.wp_attachment_image .button{float:left}.no-js .wp_attachment_image .button{display:none}.A1B1 .spinner,.wp_attachment_image .spinner{float:left}.imgedit-menu{margin:0 0 12px}.imgedit-menu .note-no-rotate{clear:both;margin:0;padding:1em 0 0}.image-editor .imgedit-menu .button{display:inline-block;width:auto;min-height:28px;font-size:13px;line-height:2;margin:0 8px 8px 0;padding:0 10px}.imgedit-menu .button:before{font:normal 16px/1 dashicons;margin-right:8px;speak:never;vertical-align:middle;position:relative;top:-2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.imgedit-menu .button.disabled{color:#a7aaad;border-color:#dcdcde;background:#f6f7f7;box-shadow:none;text-shadow:0 1px 0 #fff;cursor:default;transform:none}.imgedit-crop:before{content:"\f165"}.imgedit-rleft:before{content:"\f166"}.imgedit-rright:before{content:"\f167"}.imgedit-flipv:before{content:"\f168"}.imgedit-fliph:before{content:"\f169"}.imgedit-undo:before{content:"\f171"}.imgedit-redo:before{content:"\f172"}.imgedit-crop-wrap{position:relative}.imgedit-crop-wrap img{background-image:linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:0 0,10px 10px;background-size:20px 20px}.imgedit-crop{margin:0 8px 0 0}.imgedit-rleft{margin:0 3px}.imgedit-rright{margin:0 8px 0 3px}.imgedit-flipv{margin:0 3px}.imgedit-fliph{margin:0 8px 0 3px}.imgedit-undo{margin:0 3px}.imgedit-redo{margin:0 8px 0 3px}.imgedit-thumbnail-preview{margin:10px 8px 0 0}.imgedit-thumbnail-preview-caption{display:block}#poststuff .imgedit-group-top h2{display:inline-block;margin:0;padding:0;font-size:14px;line-height:1.4}#poststuff .imgedit-group-top .button-link{text-decoration:none;color:#1d2327}.imgedit-applyto .imgedit-label{display:block;padding:.5em 0 0}.imgedit-help{display:none;padding-bottom:8px}.imgedit-help.imgedit-restore{padding-bottom:0}.image-editor .imgedit-settings .imgedit-help-toggle,.image-editor .imgedit-settings .imgedit-help-toggle:active,.image-editor .imgedit-settings .imgedit-help-toggle:hover{border:1px solid transparent;margin:-1px 0 0 -1px;padding:0;background:0 0;color:#2271b1;font-size:20px;line-height:1;cursor:pointer;box-sizing:content-box;box-shadow:none}.image-editor .imgedit-settings .imgedit-help-toggle:focus{color:#2271b1;border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8);outline:2px solid transparent}.form-table td.imgedit-response{padding:0}.imgedit-submit{margin:8px 0 0}.imgedit-submit-btn{margin-left:20px}.imgedit-wrap .nowrap{white-space:nowrap;font-size:12px;line-height:inherit}span.imgedit-scale-warn{color:#d63638;font-size:20px;font-style:normal;visibility:hidden;vertical-align:middle}.imgedit-save-target{margin:8px 0}.imgedit-save-target legend{font-weight:600}.imgedit-group{margin-bottom:8px;padding:10px}.imgedit-settings .imgedit-original-dimensions{display:inline-block}.imgedit-settings .imgedit-crop-ratio input[type=text],.imgedit-settings .imgedit-crop-sel input[type=text],.imgedit-settings .imgedit-scale input[type=text]{width:80px;font-size:14px;padding:0 8px}.imgedit-separator{display:inline-block;width:7px;text-align:center;font-size:13px;color:#3c434a}.imgedit-settings .imgedit-scale-button-wrapper{margin-top:.3077em;display:block}.imgedit-settings .imgedit-scale .button{margin-bottom:0}audio,video{display:inline-block;max-width:100%}.wp-core-ui .mejs-container{width:100%;max-width:100%}.wp-core-ui .mejs-container *{box-sizing:border-box}.wp-core-ui .mejs-time{box-sizing:content-box}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.imgedit-wait:before{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){.wp_attachment_details label[for=content]{font-size:14px;line-height:1.5}.media-upload-form .media-item .error,.media-upload-form .media-item.error{font-size:13px;line-height:1.5}.media-upload-form .media-item.error{padding:1px 10px}.media-upload-form .media-item .error{padding:10px 0 10px 12px}.imgedit-settings .imgedit-crop-ratio input[type=text],.imgedit-settings .imgedit-crop-sel input[type=text],.imgedit-settings .imgedit-scale input[type=text]{font-size:16px;padding:6px 10px}.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,.wp_attachment_holder .imgedit-wrap .imgedit-settings{float:none;width:auto;max-width:none;padding-bottom:16px}.copy-to-clipboard-container .success{font-size:14px}.imgedit-crop-wrap img{width:100%}.media-modal .imgedit-wrap .imgedit-panel-content,.media-modal .imgedit-wrap .imgedit-settings{position:initial!important}.media-modal .imgedit-wrap .imgedit-settings{box-sizing:border-box;width:100%!important}.imgedit-settings .imgedit-scale-button-wrapper{display:inline-block}}@media only screen and (max-width:600px){.media-item-wrapper{grid-template-columns:1fr}}@media only screen and (max-width:1120px){#wp-media-grid .wp-filter .attachment-filters{max-width:100%}}@media only screen and (max-width:782px){.media-frame.mode-select .attachments-browser.fixed .media-toolbar{top:46px;right:10px}}@media only screen and (max-width:600px){.media-frame.mode-select .attachments-browser.fixed .media-toolbar{top:0}}@media only screen and (max-width:480px){.edit-attachment-frame .media-frame-title{right:110px}.edit-attachment-frame .edit-media-header .left,.edit-attachment-frame .edit-media-header .right,.upload-php .media-modal-close{width:40px;height:40px}.edit-attachment-frame .edit-media-header .left:before,.edit-attachment-frame .edit-media-header .right:before{line-height:40px!important}.edit-attachment-frame .edit-media-header .left{right:82px}.edit-attachment-frame .edit-media-header .right{right:41px}.edit-attachment-frame .media-frame-content{top:40px}.edit-attachment-frame .attachment-media-view{float:none;height:auto;width:100%}.edit-attachment-frame .attachment-info{height:auto;width:100%}}@media only screen and (max-width:640px),screen and (max-height:400px){.upload-php .mode-grid .media-sidebar{max-width:100%}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/nav-menus-rtl.css b/tools/storybook/wordpress/css/nav-menus-rtl.css new file mode 100644 index 00000000000..05087e828e1 --- /dev/null +++ b/tools/storybook/wordpress/css/nav-menus-rtl.css @@ -0,0 +1,1027 @@ +/*! This file is auto-generated */ +/* nav-menu */ + +/* @todo: determine if this is truly for nav menus only */ +.no-js #message { + display: block; +} + +ul.add-menu-item-tabs li { + padding: 3px 8px 4px 5px; +} + +.accordion-section ul.category-tabs, +.accordion-section ul.add-menu-item-tabs, +.accordion-section ul.wp-tab-bar { + margin: 0; +} + +.accordion-section .categorychecklist { + margin: 13px 0; +} + +#nav-menu-meta .accordion-section-content { + padding: 18px 13px; +} + +#nav-menu-meta .button-controls { + margin-bottom: 0; +} + +.has-no-menu-item .button-controls { + display: none; +} + +#nav-menus-frame { + margin-right: 300px; + margin-top: 23px; +} + +#wpbody-content #menu-settings-column { + display: inline; + width: 281px; + margin-right: -300px; + clear: both; + float: right; + padding-top: 0; +} + +#menu-settings-column .inside { + clear: both; + margin: 10px 0 0; +} + +.metabox-holder-disabled .postbox, +.metabox-holder-disabled .accordion-section-content, +.metabox-holder-disabled .accordion-section-title { + opacity: 0.5; + filter: alpha(opacity=50); +} + +.metabox-holder-disabled .button-controls .select-all { + display: none; +} + +#wpbody { + position: relative; +} + +.is-submenu { + color: #50575e; /* #fafafa background */ + font-style: italic; + font-weight: 400; + margin-right: 4px; +} + +.manage-menus { + margin-top: 23px; + padding: 10px; + overflow: hidden; + background: #fff; +} + +.manage-menus .selected-menu, +.manage-menus select, +.manage-menus .submit-btn, +.nav-menus-php .add-new-menu-action { + display: inline-block; + margin-left: 3px; + vertical-align: middle; +} + +.manage-menus select, +.menu-location-menus select { + max-width: 100%; +} + +.menu-edit #post-body-content h3 { + margin: 1em 0 10px; +} + +#nav-menu-bulk-actions-top { + margin: 1em 0; +} + +#nav-menu-bulk-actions-bottom { + margin: 1em 0; + margin: calc( 1em + 9px ) 0 ; +} + +.bulk-actions input.button { + margin-left: 12px; +} + +.bulk-select-button { + position: relative; + display: inline-block; + padding: 0 10px; + font-size: 13px; + line-height: 2.15384615; + height: auto; + min-height: 30px; + background: #f6f7f7; + vertical-align: top; + border: 1px solid #dcdcde; + margin: 0; + cursor: pointer; + border-radius: 3px; + white-space: nowrap; + box-sizing: border-box; +} + +.bulk-selection .bulk-select-button { + color: #2271b1; + border-color: #2271b1; + background: #f6f7f7; + vertical-align: top; +} + +#pending-menu-items-to-delete { + display: none; +} + +.bulk-selection #pending-menu-items-to-delete { + display: block; + margin-top: 1em; +} + +#pending-menu-items-to-delete p { + margin-bottom: 0; +} + +#pending-menu-items-to-delete ul { + margin-top: 0; + list-style: none; +} + +#pending-menu-items-to-delete ul li { + display: inline; +} + +input.bulk-select-switcher + .bulk-select-button-label { + vertical-align: inherit; +} + +label.bulk-select-button:hover, +label.bulk-select-button:active, +label.bulk-select-button:focus-within { + background: #f0f0f1; + border-color: #0a4b78; + color: #0a4b78; +} + +input.bulk-select-switcher:focus + .bulk-select-button-label{ + color: #0a4b78; +} + +.bulk-actions input.menu-items-delete { + -webkit-appearance: none; + appearance: none; + font-size: inherit; + border: 0; + line-height: 2.1em; + background: none; + cursor: pointer; + text-decoration: underline; + color: #b32d2e; +} + +.bulk-actions input.menu-items-delete:hover { + color: #b32d2e; + border: none; +} + +.bulk-actions input.menu-items-delete.disabled { + cursor: default; + color: #a7aaad; + box-shadow: none; +} + +.menu-settings { + border-top: 1px solid #f0f0f1; + margin-top: 2em; +} + +.menu-settings-group { + margin: 0 0 10px; + overflow: hidden; + padding-right: 20%; +} + +.menu-settings-group:last-of-type { + margin-bottom: 0; +} + +.menu-settings-input { + float: right; + margin: 0; + width: 100%; +} + +.menu-settings-group-name { + float: right; + clear: both; + width: 25%; + padding: 3px 0 0; + margin-right: -25%; /* 20 container left padding x ( 100 container % width / 80 this % width ) */ +} + +.menu-settings label { + vertical-align: baseline; +} + +.menu-edit .checkbox-input { + margin-top: 4px; +} + +.theme-location-set { + color: #646970; + font-size: 11px; +} + +/* Menu Container */ + +/* @todo: responsive view. */ +#menu-management-liquid { + float: right; + min-width: 100%; + margin-top: 3px; +} + +/* @todo: responsive view. */ +#menu-management { + position: relative; + margin-left: 20px; + margin-top: -3px; + width: 100%; +} + +#menu-management .menu-edit { + margin-bottom: 20px; +} + +.nav-menus-php #post-body { + padding: 0 10px; + border-top: 1px solid #fff; + border-bottom: 1px solid #dcdcde; + background: #fff; +} + +#nav-menu-header, +#nav-menu-footer { + padding: 0 10px; + background: #f6f7f7; +} + +#nav-menu-header { + border-bottom: 1px solid #dcdcde; + margin-bottom: 0; +} + +#nav-menu-header .menu-name-label { + display: inline-block; + vertical-align: middle; + margin-left: 7px; +} + +.nav-menus-php #post-body div.updated, +.nav-menus-php #post-body div.error { + margin: 0; +} + +.nav-menus-php #post-body-content { + position: relative; + float: none; +} + +.nav-menus-php #post-body-content .post-body-plain { + margin-bottom: 0; +} + +#menu-management .menu-add-new abbr { + font-weight: 600; +} + +#select-nav-menu-container { + text-align: left; + padding: 0 10px 3px; + margin-bottom: 5px; +} + +#select-nav-menu { + width: 100px; + display: inline; +} + +#menu-name-label { + margin-top: -2px; +} + +.widefat .menu-locations .menu-location-title { + padding: 13px 10px 0; +} + +.menu-location-title label { + font-weight: 600; +} + +.menu-location-menus select { + float: right; +} + +#locations-nav-menu-wrapper { + padding: 5px 0; +} + +.locations-nav-menu-select select { + float: right; + width: 160px; + margin-left: 5px; +} + +.locations-row-links { + float: right; + margin: 6px 6px 0 0; +} + +.locations-edit-menu-link, +.locations-add-menu-link { + margin: 0 3px; +} + +.locations-edit-menu-link { + padding-left: 3px; + border-left: 1px solid #c3c4c7; +} + +#menu-management .inside { + padding: 0 10px; +} + +/* Add Menu Item Boxes */ +.postbox .howto input, +.customlinkdiv .menu-item-textbox { + width: 180px; + float: left; +} + +.accordion-container .outer-border { + margin: 0; +} + +.customlinkdiv p { + margin-top: 0 +} + +#nav-menu-theme-locations .howto select { + width: 100%; +} + +#nav-menu-theme-locations .button-controls { + text-align: left; +} + +.add-menu-item-view-all { + height: 400px; +} + +/* Button Primary Actions */ +#menu-container .submit { + margin: 0 0 10px; + padding: 0; +} + +/* @todo: is this actually used? */ +#cancel-save { + text-decoration: underline; + font-size: 12px; + margin-right: 20px; + margin-top: 5px; +} + +.button.right, .button-secondary.right, .button-primary.right { + float: left; +} + +/* Button Secondary Actions */ +.list-controls { + float: right; + margin-top: 5px; +} + +.add-to-menu { + float: left; +} + +.button-controls { + clear: both; + margin: 10px 0; +} + +.show-all, +.hide-all { + cursor: pointer; +} + +.hide-all { + display: none; +} + +/* Create Menu */ +#menu-name { + width: 270px; + vertical-align: middle; +} + +#manage-menu .inside { + padding: 0; +} + +/* Custom Links */ +#available-links dt { + display: block; +} + +#add-custom-link .howto { + font-size: 12px; +} + +#add-custom-link label span { + display: block; + float: right; + margin-top: 5px; + padding-left: 5px; +} + +.menu-item-textbox { + width: 180px; +} + +.customlinkdiv label, +.nav-menus-php .howto span { + float: right; + margin-top: 6px; +} + +/* Menu item types */ +.quick-search { + width: 190px; +} + +.quick-search-wrap .spinner { + float: none; + margin: -3px 0 0 -10px; +} + +.nav-menus-php .list-wrap { + display: none; + clear: both; + margin-bottom: 10px; +} + +.nav-menus-php .postbox p.submit { + margin-bottom: 0; +} + +/* Listings */ +.nav-menus-php .list li { + display: none; + margin: 0 0 5px; +} + +.nav-menus-php .list li .menu-item-title { + cursor: pointer; + display: block; +} + +.nav-menus-php .list li .menu-item-title input { + margin-left: 3px; + margin-top: -3px; +} + +.menu-item-title input[type=checkbox] { + display: inline-block; + margin-top: -4px; +} + +.menu-item-title .post-state { + font-weight: 600; +} + +/* Nav Menu */ +#menu-container .inside { + padding-bottom: 10px; +} + +.menu { + padding-top: 1em; +} + +#menu-to-edit { + margin: 0; + padding: 0.1em 0; +} + +.menu ul { + width: 100%; +} + +.menu li { + margin-bottom: 0; + position: relative; +} + +.menu-item-bar { + clear: both; + line-height: 1.5; + position: relative; + margin: 9px 0 0; +} + +.menu-item-bar .menu-item-handle { + border: 1px solid #dcdcde; + position: relative; + padding: 10px 15px; + height: auto; + min-height: 20px; + max-width: 382px; + line-height: 2.30769230; + overflow: hidden; + word-wrap: break-word; +} + +.menu-item-bar .menu-item-handle:hover { + border-color: #8c8f94; +} + +#menu-to-edit .menu-item-invalid .menu-item-handle { + background: #fcf0f1; + border-color: #d63638; +} + +.no-js .menu-item-edit-active .item-edit { + display: none; +} + +.js .menu-item-handle { + cursor: move; +} + +.menu li.deleting .menu-item-handle { + background-image: none; + background-color: #f86368; +} + +.menu-item-handle .item-title { + font-size: 13px; + font-weight: 600; + line-height: 1.53846153; + display: block; + /* @todo: responsive view. */ + margin-left: 13em; +} + +.menu-item-handle .menu-item-checkbox { + display: none; +} + +.bulk-selection .menu-item-handle .menu-item-checkbox { + display: inline-block; + margin-left: 6px; +} + +.menu-item-handle .menu-item-title.no-title { + color: #646970; +} + +/* Sortables */ +li.menu-item.ui-sortable-helper .menu-item-bar { + margin-top: 0; +} + +li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar { + margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */ +} + +.menu .sortable-placeholder { + height: 35px; + width: 410px; + margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */ +} + +/* Hide the transport list when it's empty */ +.menu-item .menu-item-transport:empty { + display: none; +} + +/* WARNING: The factor of 30px is hardcoded into the nav-menus JavaScript. */ +.menu-item-depth-0 { margin-right: 0; } +.menu-item-depth-1 { margin-right: 30px; } +.menu-item-depth-2 { margin-right: 60px; } +.menu-item-depth-3 { margin-right: 90px; } +.menu-item-depth-4 { margin-right: 120px; } +.menu-item-depth-5 { margin-right: 150px; } +.menu-item-depth-6 { margin-right: 180px; } +.menu-item-depth-7 { margin-right: 210px; } +.menu-item-depth-8 { margin-right: 240px; } +.menu-item-depth-9 { margin-right: 270px; } +.menu-item-depth-10 { margin-right: 300px; } +.menu-item-depth-11 { margin-right: 330px; } + +.menu-item-depth-0 .menu-item-transport { margin-right: 0; } +.menu-item-depth-1 .menu-item-transport { margin-right: -30px; } +.menu-item-depth-2 .menu-item-transport { margin-right: -60px; } +.menu-item-depth-3 .menu-item-transport { margin-right: -90px; } +.menu-item-depth-4 .menu-item-transport { margin-right: -120px; } +.menu-item-depth-5 .menu-item-transport { margin-right: -150px; } +.menu-item-depth-6 .menu-item-transport { margin-right: -180px; } +.menu-item-depth-7 .menu-item-transport { margin-right: -210px; } +.menu-item-depth-8 .menu-item-transport { margin-right: -240px; } +.menu-item-depth-9 .menu-item-transport { margin-right: -270px; } +.menu-item-depth-10 .menu-item-transport { margin-right: -300px; } +.menu-item-depth-11 .menu-item-transport { margin-right: -330px; } + +body.menu-max-depth-0 { min-width: 950px !important; } +body.menu-max-depth-1 { min-width: 980px !important; } +body.menu-max-depth-2 { min-width: 1010px !important; } +body.menu-max-depth-3 { min-width: 1040px !important; } +body.menu-max-depth-4 { min-width: 1070px !important; } +body.menu-max-depth-5 { min-width: 1100px !important; } +body.menu-max-depth-6 { min-width: 1130px !important; } +body.menu-max-depth-7 { min-width: 1160px !important; } +body.menu-max-depth-8 { min-width: 1190px !important; } +body.menu-max-depth-9 { min-width: 1220px !important; } +body.menu-max-depth-10 { min-width: 1250px !important; } +body.menu-max-depth-11 { min-width: 1280px !important; } + +/* Menu item controls */ +.item-type { + display: inline-block; + padding: 12px 16px; + color: #646970; + font-size: 12px; + line-height: 1.5; +} + +.item-controls { + font-size: 12px; + position: absolute; + left: 20px; + top: -1px; +} + +.item-controls a { + text-decoration: none; +} + +.item-controls a:hover { + cursor: pointer; +} + +.item-controls .item-order { + padding-left: 10px; +} + +.nav-menus-php .item-edit { + position: absolute; + left: -20px; + top: 0; + display: block; + width: 30px; + height: 40px; + outline: none; +} + +.no-js.nav-menus-php .item-edit { + position: static; + float: left; + width: auto; + height: auto; + margin: 12px 0 12px -10px; + padding: 0; + color: #2271b1; + text-decoration: underline; + font-size: 12px; + line-height: 1.5; +} + +.no-js.nav-menus-php .item-edit .screen-reader-text { + position: static; + -webkit-clip-path: none; + clip-path: none; + width: auto; + height: auto; + margin: 0; +} + +.nav-menus-php .item-edit:before { + margin-top: 10px; + margin-right: 4px; + width: 20px; + border-radius: 50%; + text-indent: -1px; /* account for the dashicon alignment */ +} + +.no-js.nav-menus-php .item-edit:before { + display: none; +} + +.rtl .nav-menus-php .item-edit:before { + text-indent: 1px; /* account for the dashicon alignment */ +} + +.js.nav-menus-php .item-edit:focus { + box-shadow: none; +} + +.nav-menus-php .item-edit:focus:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +/* Menu editing */ +.menu-instructions-inactive { + display: none; +} + +.menu-item-settings { + display: block; + max-width: 392px; + padding: 10px; + position: relative; + z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */ + border: 1px solid #c3c4c7; + border-top: none; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +.menu-item-settings .field-move { + margin: 3px 0 5px; + line-height: 1.5; +} + +.field-move-visual-label { + float: right; + margin-left: 4px; +} + +.menu-item-settings .field-move .button-link { + display: none; + margin: 0 2px; +} + +.menu-item-edit-active .menu-item-settings { + display: block; +} + +.menu-item-edit-inactive .menu-item-settings { + display: none; +} + +.add-menu-item-pagelinks { + margin: .5em -10px; + text-align: center; +} + +.add-menu-item-pagelinks .page-numbers { + display: inline-block; + min-width: 20px; +} + +.add-menu-item-pagelinks .page-numbers.dots { + min-width: 0; +} + +.link-to-original { + display: block; + margin: 0 0 15px; + padding: 3px 5px 5px; + border: 1px solid #dcdcde; + color: #646970; + font-size: 12px; +} + +.link-to-original a { + padding-right: 4px; + font-style: normal; +} + +.hidden-field { + display: none; +} + +.menu-item-settings .description-thin, +.menu-item-settings .description-wide { + margin-left: 10px; + float: right; +} + +.description-thin { + width: calc(50% - 5px); +} + +.menu-item-settings .description-thin + .description-thin { + margin-left: 0; +} + +.description-wide { + width: 100%; +} + +.menu-item-actions { + padding-top: 15px; + padding-bottom: 7px; +} + +#cancel-save { + cursor: pointer; +} + +/* Major/minor publishing actions (classes) */ +.nav-menus-php .major-publishing-actions { + clear: both; + padding: 10px 0; + line-height: 2.15384615; +} + +.nav-menus-php .major-publishing-actions .publishing-action { + text-align: left; + float: left; +} + +/* Same as the Publish Meta Box #delete-action */ +.nav-menus-php .delete-action { + float: right; + line-height: 2.1; +} + +.nav-menus-php .major-publishing-actions .form-invalid { + padding-right: 4px; + margin-right: -4px; +} + +#nav-menus-frame, +.button-controls, +#menu-item-url-wrap, +#menu-item-name-wrap { + display: block; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media only screen and (min-width: 769px) and (max-width: 1000px) { + body.menu-max-depth-0 { + min-width: 0 !important; + } + + #menu-management-liquid { + width: 100%; + } + + .nav-menus-php #post-body-content { + min-width: 0; + } +} + +@media screen and (max-width: 782px) { + body.nav-menus-php, + body.wp-customizer { + min-width: 0 !important; + } + + #nav-menus-frame { + margin-right: 0; + float: none; + width: 100%; + } + + #wpbody-content #menu-settings-column { + display: block; + width: 100%; + float: none; + margin-right: 0; + } + + #side-sortables .add-menu-item-tabs { + margin: 15px 0 14px; + } + + ul.add-menu-item-tabs li.tabs { + padding: 13px 15px 14px; + } + + .nav-menus-php .customlinkdiv .howto input { + width: 65%; + } + + .nav-menus-php .quick-search { + width: 85%; + } + + #menu-management-liquid { + margin-top: 25px; + } + + .nav-menus-php .menu-name-label.howto span { + margin-top: 13px + } + + #menu-name { + width: 100%; + } + + .nav-menus-php #nav-menu-header .major-publishing-actions .publishing-action { + padding-top: 1em; + } + + .nav-menus-php .delete-action { + font-size: 14px; + line-height: 2.14285714; + } + + .menu-item-bar .menu-item-handle, + .menu-item-settings, + .description-wide { + width: auto; + } + + .menu-item-settings { + padding: 10px; + } + + .menu-item-settings .description-thin, + .menu-item-settings .description-wide { + width: 100%; + } + + .menu-item-settings input { + width: 100%; + } + + .menu-item-settings input[type="checkbox"], + .menu-item-settings input[type="radio"] { + width: 25px; + } + + .menu-settings-group { + padding-right: 0; + overflow: visible; + } + + .menu-settings-group-name { + float: none; + width: auto; + margin-right: 0; + margin-bottom: 15px; + } + + .menu-settings-input { + float: none; + margin-bottom: 15px; + } + + .menu-edit .checkbox-input { + margin-top: 0; + } + + .manage-menus select { + margin: 0.5em 0; + } + + .wp-core-ui .manage-menus .button { + margin-bottom: 0; + } + + .widefat .menu-locations .menu-location-title { + padding-top: 16px; + } +} + +@media only screen and (min-width: 783px) { + @supports (position: sticky) and (scroll-margin-bottom: 130px) { + + #nav-menu-footer { + position: sticky; + bottom: 0; + z-index: 10; + box-shadow: 0 -1px 0 0 #ddd; + } + + #save_menu_header { + display: none; + } + } +} + +@media only screen and (max-width: 768px) { + /* menu locations */ + #menu-locations-wrap .widefat { + width: 100%; + } + + .bulk-select-button { + padding: 5px 10px; + } +} diff --git a/tools/storybook/wordpress/css/nav-menus-rtl.min.css b/tools/storybook/wordpress/css/nav-menus-rtl.min.css new file mode 100644 index 00000000000..eaf7300e355 --- /dev/null +++ b/tools/storybook/wordpress/css/nav-menus-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.no-js #message{display:block}ul.add-menu-item-tabs li{padding:3px 8px 4px 5px}.accordion-section ul.add-menu-item-tabs,.accordion-section ul.category-tabs,.accordion-section ul.wp-tab-bar{margin:0}.accordion-section .categorychecklist{margin:13px 0}#nav-menu-meta .accordion-section-content{padding:18px 13px}#nav-menu-meta .button-controls{margin-bottom:0}.has-no-menu-item .button-controls{display:none}#nav-menus-frame{margin-right:300px;margin-top:23px}#wpbody-content #menu-settings-column{display:inline;width:281px;margin-right:-300px;clear:both;float:right;padding-top:0}#menu-settings-column .inside{clear:both;margin:10px 0 0}.metabox-holder-disabled .accordion-section-content,.metabox-holder-disabled .accordion-section-title,.metabox-holder-disabled .postbox{opacity:.5}.metabox-holder-disabled .button-controls .select-all{display:none}#wpbody{position:relative}.is-submenu{color:#50575e;font-style:italic;font-weight:400;margin-right:4px}.manage-menus{margin-top:23px;padding:10px;overflow:hidden;background:#fff}.manage-menus .selected-menu,.manage-menus .submit-btn,.manage-menus select,.nav-menus-php .add-new-menu-action{display:inline-block;margin-left:3px;vertical-align:middle}.manage-menus select,.menu-location-menus select{max-width:100%}.menu-edit #post-body-content h3{margin:1em 0 10px}#nav-menu-bulk-actions-top{margin:1em 0}#nav-menu-bulk-actions-bottom{margin:1em 0;margin:calc(1em + 9px) 0}.bulk-actions input.button{margin-left:12px}.bulk-select-button{position:relative;display:inline-block;padding:0 10px;font-size:13px;line-height:2.15384615;height:auto;min-height:30px;background:#f6f7f7;vertical-align:top;border:1px solid #dcdcde;margin:0;cursor:pointer;border-radius:3px;white-space:nowrap;box-sizing:border-box}.bulk-selection .bulk-select-button{color:#2271b1;border-color:#2271b1;background:#f6f7f7;vertical-align:top}#pending-menu-items-to-delete{display:none}.bulk-selection #pending-menu-items-to-delete{display:block;margin-top:1em}#pending-menu-items-to-delete p{margin-bottom:0}#pending-menu-items-to-delete ul{margin-top:0;list-style:none}#pending-menu-items-to-delete ul li{display:inline}input.bulk-select-switcher+.bulk-select-button-label{vertical-align:inherit}label.bulk-select-button:active,label.bulk-select-button:focus-within,label.bulk-select-button:hover{background:#f0f0f1;border-color:#0a4b78;color:#0a4b78}input.bulk-select-switcher:focus+.bulk-select-button-label{color:#0a4b78}.bulk-actions input.menu-items-delete{-webkit-appearance:none;appearance:none;font-size:inherit;border:0;line-height:2.1em;background:0 0;cursor:pointer;text-decoration:underline;color:#b32d2e}.bulk-actions input.menu-items-delete:hover{color:#b32d2e;border:none}.bulk-actions input.menu-items-delete.disabled{cursor:default;color:#a7aaad;box-shadow:none}.menu-settings{border-top:1px solid #f0f0f1;margin-top:2em}.menu-settings-group{margin:0 0 10px;overflow:hidden;padding-right:20%}.menu-settings-group:last-of-type{margin-bottom:0}.menu-settings-input{float:right;margin:0;width:100%}.menu-settings-group-name{float:right;clear:both;width:25%;padding:3px 0 0;margin-right:-25%}.menu-settings label{vertical-align:baseline}.menu-edit .checkbox-input{margin-top:4px}.theme-location-set{color:#646970;font-size:11px}#menu-management-liquid{float:right;min-width:100%;margin-top:3px}#menu-management{position:relative;margin-left:20px;margin-top:-3px;width:100%}#menu-management .menu-edit{margin-bottom:20px}.nav-menus-php #post-body{padding:0 10px;border-top:1px solid #fff;border-bottom:1px solid #dcdcde;background:#fff}#nav-menu-footer,#nav-menu-header{padding:0 10px;background:#f6f7f7}#nav-menu-header{border-bottom:1px solid #dcdcde;margin-bottom:0}#nav-menu-header .menu-name-label{display:inline-block;vertical-align:middle;margin-left:7px}.nav-menus-php #post-body div.error,.nav-menus-php #post-body div.updated{margin:0}.nav-menus-php #post-body-content{position:relative;float:none}.nav-menus-php #post-body-content .post-body-plain{margin-bottom:0}#menu-management .menu-add-new abbr{font-weight:600}#select-nav-menu-container{text-align:left;padding:0 10px 3px;margin-bottom:5px}#select-nav-menu{width:100px;display:inline}#menu-name-label{margin-top:-2px}.widefat .menu-locations .menu-location-title{padding:13px 10px 0}.menu-location-title label{font-weight:600}.menu-location-menus select{float:right}#locations-nav-menu-wrapper{padding:5px 0}.locations-nav-menu-select select{float:right;width:160px;margin-left:5px}.locations-row-links{float:right;margin:6px 6px 0 0}.locations-add-menu-link,.locations-edit-menu-link{margin:0 3px}.locations-edit-menu-link{padding-left:3px;border-left:1px solid #c3c4c7}#menu-management .inside{padding:0 10px}.customlinkdiv .menu-item-textbox,.postbox .howto input{width:180px;float:left}.accordion-container .outer-border{margin:0}.customlinkdiv p{margin-top:0}#nav-menu-theme-locations .howto select{width:100%}#nav-menu-theme-locations .button-controls{text-align:left}.add-menu-item-view-all{height:400px}#menu-container .submit{margin:0 0 10px;padding:0}#cancel-save{text-decoration:underline;font-size:12px;margin-right:20px;margin-top:5px}.button-primary.right,.button-secondary.right,.button.right{float:left}.list-controls{float:right;margin-top:5px}.add-to-menu{float:left}.button-controls{clear:both;margin:10px 0}.hide-all,.show-all{cursor:pointer}.hide-all{display:none}#menu-name{width:270px;vertical-align:middle}#manage-menu .inside{padding:0}#available-links dt{display:block}#add-custom-link .howto{font-size:12px}#add-custom-link label span{display:block;float:right;margin-top:5px;padding-left:5px}.menu-item-textbox{width:180px}.customlinkdiv label,.nav-menus-php .howto span{float:right;margin-top:6px}.quick-search{width:190px}.quick-search-wrap .spinner{float:none;margin:-3px 0 0 -10px}.nav-menus-php .list-wrap{display:none;clear:both;margin-bottom:10px}.nav-menus-php .postbox p.submit{margin-bottom:0}.nav-menus-php .list li{display:none;margin:0 0 5px}.nav-menus-php .list li .menu-item-title{cursor:pointer;display:block}.nav-menus-php .list li .menu-item-title input{margin-left:3px;margin-top:-3px}.menu-item-title input[type=checkbox]{display:inline-block;margin-top:-4px}.menu-item-title .post-state{font-weight:600}#menu-container .inside{padding-bottom:10px}.menu{padding-top:1em}#menu-to-edit{margin:0;padding:.1em 0}.menu ul{width:100%}.menu li{margin-bottom:0;position:relative}.menu-item-bar{clear:both;line-height:1.5;position:relative;margin:9px 0 0}.menu-item-bar .menu-item-handle{border:1px solid #dcdcde;position:relative;padding:10px 15px;height:auto;min-height:20px;max-width:382px;line-height:2.30769230;overflow:hidden;word-wrap:break-word}.menu-item-bar .menu-item-handle:hover{border-color:#8c8f94}#menu-to-edit .menu-item-invalid .menu-item-handle{background:#fcf0f1;border-color:#d63638}.no-js .menu-item-edit-active .item-edit{display:none}.js .menu-item-handle{cursor:move}.menu li.deleting .menu-item-handle{background-image:none;background-color:#f86368}.menu-item-handle .item-title{font-size:13px;font-weight:600;line-height:1.53846153;display:block;margin-left:13em}.menu-item-handle .menu-item-checkbox{display:none}.bulk-selection .menu-item-handle .menu-item-checkbox{display:inline-block;margin-left:6px}.menu-item-handle .menu-item-title.no-title{color:#646970}li.menu-item.ui-sortable-helper .menu-item-bar{margin-top:0}li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar{margin-top:9px}.menu .sortable-placeholder{height:35px;width:410px;margin-top:9px}.menu-item .menu-item-transport:empty{display:none}.menu-item-depth-0{margin-right:0}.menu-item-depth-1{margin-right:30px}.menu-item-depth-2{margin-right:60px}.menu-item-depth-3{margin-right:90px}.menu-item-depth-4{margin-right:120px}.menu-item-depth-5{margin-right:150px}.menu-item-depth-6{margin-right:180px}.menu-item-depth-7{margin-right:210px}.menu-item-depth-8{margin-right:240px}.menu-item-depth-9{margin-right:270px}.menu-item-depth-10{margin-right:300px}.menu-item-depth-11{margin-right:330px}.menu-item-depth-0 .menu-item-transport{margin-right:0}.menu-item-depth-1 .menu-item-transport{margin-right:-30px}.menu-item-depth-2 .menu-item-transport{margin-right:-60px}.menu-item-depth-3 .menu-item-transport{margin-right:-90px}.menu-item-depth-4 .menu-item-transport{margin-right:-120px}.menu-item-depth-5 .menu-item-transport{margin-right:-150px}.menu-item-depth-6 .menu-item-transport{margin-right:-180px}.menu-item-depth-7 .menu-item-transport{margin-right:-210px}.menu-item-depth-8 .menu-item-transport{margin-right:-240px}.menu-item-depth-9 .menu-item-transport{margin-right:-270px}.menu-item-depth-10 .menu-item-transport{margin-right:-300px}.menu-item-depth-11 .menu-item-transport{margin-right:-330px}body.menu-max-depth-0{min-width:950px!important}body.menu-max-depth-1{min-width:980px!important}body.menu-max-depth-2{min-width:1010px!important}body.menu-max-depth-3{min-width:1040px!important}body.menu-max-depth-4{min-width:1070px!important}body.menu-max-depth-5{min-width:1100px!important}body.menu-max-depth-6{min-width:1130px!important}body.menu-max-depth-7{min-width:1160px!important}body.menu-max-depth-8{min-width:1190px!important}body.menu-max-depth-9{min-width:1220px!important}body.menu-max-depth-10{min-width:1250px!important}body.menu-max-depth-11{min-width:1280px!important}.item-type{display:inline-block;padding:12px 16px;color:#646970;font-size:12px;line-height:1.5}.item-controls{font-size:12px;position:absolute;left:20px;top:-1px}.item-controls a{text-decoration:none}.item-controls a:hover{cursor:pointer}.item-controls .item-order{padding-left:10px}.nav-menus-php .item-edit{position:absolute;left:-20px;top:0;display:block;width:30px;height:40px;outline:0}.no-js.nav-menus-php .item-edit{position:static;float:left;width:auto;height:auto;margin:12px 0 12px -10px;padding:0;color:#2271b1;text-decoration:underline;font-size:12px;line-height:1.5}.no-js.nav-menus-php .item-edit .screen-reader-text{position:static;-webkit-clip-path:none;clip-path:none;width:auto;height:auto;margin:0}.nav-menus-php .item-edit:before{margin-top:10px;margin-right:4px;width:20px;border-radius:50%;text-indent:-1px}.no-js.nav-menus-php .item-edit:before{display:none}.rtl .nav-menus-php .item-edit:before{text-indent:1px}.js.nav-menus-php .item-edit:focus{box-shadow:none}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.menu-instructions-inactive{display:none}.menu-item-settings{display:block;max-width:392px;padding:10px;position:relative;z-index:10;border:1px solid #c3c4c7;border-top:none;box-shadow:0 1px 1px rgba(0,0,0,.04)}.menu-item-settings .field-move{margin:3px 0 5px;line-height:1.5}.field-move-visual-label{float:right;margin-left:4px}.menu-item-settings .field-move .button-link{display:none;margin:0 2px}.menu-item-edit-active .menu-item-settings{display:block}.menu-item-edit-inactive .menu-item-settings{display:none}.add-menu-item-pagelinks{margin:.5em -10px;text-align:center}.add-menu-item-pagelinks .page-numbers{display:inline-block;min-width:20px}.add-menu-item-pagelinks .page-numbers.dots{min-width:0}.link-to-original{display:block;margin:0 0 15px;padding:3px 5px 5px;border:1px solid #dcdcde;color:#646970;font-size:12px}.link-to-original a{padding-right:4px;font-style:normal}.hidden-field{display:none}.menu-item-settings .description-thin,.menu-item-settings .description-wide{margin-left:10px;float:right}.description-thin{width:calc(50% - 5px)}.menu-item-settings .description-thin+.description-thin{margin-left:0}.description-wide{width:100%}.menu-item-actions{padding-top:15px;padding-bottom:7px}#cancel-save{cursor:pointer}.nav-menus-php .major-publishing-actions{clear:both;padding:10px 0;line-height:2.15384615}.nav-menus-php .major-publishing-actions .publishing-action{text-align:left;float:left}.nav-menus-php .delete-action{float:right;line-height:2.1}.nav-menus-php .major-publishing-actions .form-invalid{padding-right:4px;margin-right:-4px}#menu-item-name-wrap,#menu-item-url-wrap,#nav-menus-frame,.button-controls{display:block}@media only screen and (min-width:769px) and (max-width:1000px){body.menu-max-depth-0{min-width:0!important}#menu-management-liquid{width:100%}.nav-menus-php #post-body-content{min-width:0}}@media screen and (max-width:782px){body.nav-menus-php,body.wp-customizer{min-width:0!important}#nav-menus-frame{margin-right:0;float:none;width:100%}#wpbody-content #menu-settings-column{display:block;width:100%;float:none;margin-right:0}#side-sortables .add-menu-item-tabs{margin:15px 0 14px}ul.add-menu-item-tabs li.tabs{padding:13px 15px 14px}.nav-menus-php .customlinkdiv .howto input{width:65%}.nav-menus-php .quick-search{width:85%}#menu-management-liquid{margin-top:25px}.nav-menus-php .menu-name-label.howto span{margin-top:13px}#menu-name{width:100%}.nav-menus-php #nav-menu-header .major-publishing-actions .publishing-action{padding-top:1em}.nav-menus-php .delete-action{font-size:14px;line-height:2.14285714}.description-wide,.menu-item-bar .menu-item-handle,.menu-item-settings{width:auto}.menu-item-settings{padding:10px}.menu-item-settings .description-thin,.menu-item-settings .description-wide{width:100%}.menu-item-settings input{width:100%}.menu-item-settings input[type=checkbox],.menu-item-settings input[type=radio]{width:25px}.menu-settings-group{padding-right:0;overflow:visible}.menu-settings-group-name{float:none;width:auto;margin-right:0;margin-bottom:15px}.menu-settings-input{float:none;margin-bottom:15px}.menu-edit .checkbox-input{margin-top:0}.manage-menus select{margin:.5em 0}.wp-core-ui .manage-menus .button{margin-bottom:0}.widefat .menu-locations .menu-location-title{padding-top:16px}}@media only screen and (min-width:783px){@supports (position:sticky) and (scroll-margin-bottom:130px){#nav-menu-footer{position:sticky;bottom:0;z-index:10;box-shadow:0 -1px 0 0 #ddd}#save_menu_header{display:none}}}@media only screen and (max-width:768px){#menu-locations-wrap .widefat{width:100%}.bulk-select-button{padding:5px 10px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/nav-menus.css b/tools/storybook/wordpress/css/nav-menus.css new file mode 100644 index 00000000000..8dfe84d1532 --- /dev/null +++ b/tools/storybook/wordpress/css/nav-menus.css @@ -0,0 +1,1026 @@ +/* nav-menu */ + +/* @todo: determine if this is truly for nav menus only */ +.no-js #message { + display: block; +} + +ul.add-menu-item-tabs li { + padding: 3px 5px 4px 8px; +} + +.accordion-section ul.category-tabs, +.accordion-section ul.add-menu-item-tabs, +.accordion-section ul.wp-tab-bar { + margin: 0; +} + +.accordion-section .categorychecklist { + margin: 13px 0; +} + +#nav-menu-meta .accordion-section-content { + padding: 18px 13px; +} + +#nav-menu-meta .button-controls { + margin-bottom: 0; +} + +.has-no-menu-item .button-controls { + display: none; +} + +#nav-menus-frame { + margin-left: 300px; + margin-top: 23px; +} + +#wpbody-content #menu-settings-column { + display: inline; + width: 281px; + margin-left: -300px; + clear: both; + float: left; + padding-top: 0; +} + +#menu-settings-column .inside { + clear: both; + margin: 10px 0 0; +} + +.metabox-holder-disabled .postbox, +.metabox-holder-disabled .accordion-section-content, +.metabox-holder-disabled .accordion-section-title { + opacity: 0.5; + filter: alpha(opacity=50); +} + +.metabox-holder-disabled .button-controls .select-all { + display: none; +} + +#wpbody { + position: relative; +} + +.is-submenu { + color: #50575e; /* #fafafa background */ + font-style: italic; + font-weight: 400; + margin-left: 4px; +} + +.manage-menus { + margin-top: 23px; + padding: 10px; + overflow: hidden; + background: #fff; +} + +.manage-menus .selected-menu, +.manage-menus select, +.manage-menus .submit-btn, +.nav-menus-php .add-new-menu-action { + display: inline-block; + margin-right: 3px; + vertical-align: middle; +} + +.manage-menus select, +.menu-location-menus select { + max-width: 100%; +} + +.menu-edit #post-body-content h3 { + margin: 1em 0 10px; +} + +#nav-menu-bulk-actions-top { + margin: 1em 0; +} + +#nav-menu-bulk-actions-bottom { + margin: 1em 0; + margin: calc( 1em + 9px ) 0 ; +} + +.bulk-actions input.button { + margin-right: 12px; +} + +.bulk-select-button { + position: relative; + display: inline-block; + padding: 0 10px; + font-size: 13px; + line-height: 2.15384615; + height: auto; + min-height: 30px; + background: #f6f7f7; + vertical-align: top; + border: 1px solid #dcdcde; + margin: 0; + cursor: pointer; + border-radius: 3px; + white-space: nowrap; + box-sizing: border-box; +} + +.bulk-selection .bulk-select-button { + color: #2271b1; + border-color: #2271b1; + background: #f6f7f7; + vertical-align: top; +} + +#pending-menu-items-to-delete { + display: none; +} + +.bulk-selection #pending-menu-items-to-delete { + display: block; + margin-top: 1em; +} + +#pending-menu-items-to-delete p { + margin-bottom: 0; +} + +#pending-menu-items-to-delete ul { + margin-top: 0; + list-style: none; +} + +#pending-menu-items-to-delete ul li { + display: inline; +} + +input.bulk-select-switcher + .bulk-select-button-label { + vertical-align: inherit; +} + +label.bulk-select-button:hover, +label.bulk-select-button:active, +label.bulk-select-button:focus-within { + background: #f0f0f1; + border-color: #0a4b78; + color: #0a4b78; +} + +input.bulk-select-switcher:focus + .bulk-select-button-label{ + color: #0a4b78; +} + +.bulk-actions input.menu-items-delete { + -webkit-appearance: none; + appearance: none; + font-size: inherit; + border: 0; + line-height: 2.1em; + background: none; + cursor: pointer; + text-decoration: underline; + color: #b32d2e; +} + +.bulk-actions input.menu-items-delete:hover { + color: #b32d2e; + border: none; +} + +.bulk-actions input.menu-items-delete.disabled { + cursor: default; + color: #a7aaad; + box-shadow: none; +} + +.menu-settings { + border-top: 1px solid #f0f0f1; + margin-top: 2em; +} + +.menu-settings-group { + margin: 0 0 10px; + overflow: hidden; + padding-left: 20%; +} + +.menu-settings-group:last-of-type { + margin-bottom: 0; +} + +.menu-settings-input { + float: left; + margin: 0; + width: 100%; +} + +.menu-settings-group-name { + float: left; + clear: both; + width: 25%; + padding: 3px 0 0; + margin-left: -25%; /* 20 container left padding x ( 100 container % width / 80 this % width ) */ +} + +.menu-settings label { + vertical-align: baseline; +} + +.menu-edit .checkbox-input { + margin-top: 4px; +} + +.theme-location-set { + color: #646970; + font-size: 11px; +} + +/* Menu Container */ + +/* @todo: responsive view. */ +#menu-management-liquid { + float: left; + min-width: 100%; + margin-top: 3px; +} + +/* @todo: responsive view. */ +#menu-management { + position: relative; + margin-right: 20px; + margin-top: -3px; + width: 100%; +} + +#menu-management .menu-edit { + margin-bottom: 20px; +} + +.nav-menus-php #post-body { + padding: 0 10px; + border-top: 1px solid #fff; + border-bottom: 1px solid #dcdcde; + background: #fff; +} + +#nav-menu-header, +#nav-menu-footer { + padding: 0 10px; + background: #f6f7f7; +} + +#nav-menu-header { + border-bottom: 1px solid #dcdcde; + margin-bottom: 0; +} + +#nav-menu-header .menu-name-label { + display: inline-block; + vertical-align: middle; + margin-right: 7px; +} + +.nav-menus-php #post-body div.updated, +.nav-menus-php #post-body div.error { + margin: 0; +} + +.nav-menus-php #post-body-content { + position: relative; + float: none; +} + +.nav-menus-php #post-body-content .post-body-plain { + margin-bottom: 0; +} + +#menu-management .menu-add-new abbr { + font-weight: 600; +} + +#select-nav-menu-container { + text-align: right; + padding: 0 10px 3px; + margin-bottom: 5px; +} + +#select-nav-menu { + width: 100px; + display: inline; +} + +#menu-name-label { + margin-top: -2px; +} + +.widefat .menu-locations .menu-location-title { + padding: 13px 10px 0; +} + +.menu-location-title label { + font-weight: 600; +} + +.menu-location-menus select { + float: left; +} + +#locations-nav-menu-wrapper { + padding: 5px 0; +} + +.locations-nav-menu-select select { + float: left; + width: 160px; + margin-right: 5px; +} + +.locations-row-links { + float: left; + margin: 6px 0 0 6px; +} + +.locations-edit-menu-link, +.locations-add-menu-link { + margin: 0 3px; +} + +.locations-edit-menu-link { + padding-right: 3px; + border-right: 1px solid #c3c4c7; +} + +#menu-management .inside { + padding: 0 10px; +} + +/* Add Menu Item Boxes */ +.postbox .howto input, +.customlinkdiv .menu-item-textbox { + width: 180px; + float: right; +} + +.accordion-container .outer-border { + margin: 0; +} + +.customlinkdiv p { + margin-top: 0 +} + +#nav-menu-theme-locations .howto select { + width: 100%; +} + +#nav-menu-theme-locations .button-controls { + text-align: right; +} + +.add-menu-item-view-all { + height: 400px; +} + +/* Button Primary Actions */ +#menu-container .submit { + margin: 0 0 10px; + padding: 0; +} + +/* @todo: is this actually used? */ +#cancel-save { + text-decoration: underline; + font-size: 12px; + margin-left: 20px; + margin-top: 5px; +} + +.button.right, .button-secondary.right, .button-primary.right { + float: right; +} + +/* Button Secondary Actions */ +.list-controls { + float: left; + margin-top: 5px; +} + +.add-to-menu { + float: right; +} + +.button-controls { + clear: both; + margin: 10px 0; +} + +.show-all, +.hide-all { + cursor: pointer; +} + +.hide-all { + display: none; +} + +/* Create Menu */ +#menu-name { + width: 270px; + vertical-align: middle; +} + +#manage-menu .inside { + padding: 0; +} + +/* Custom Links */ +#available-links dt { + display: block; +} + +#add-custom-link .howto { + font-size: 12px; +} + +#add-custom-link label span { + display: block; + float: left; + margin-top: 5px; + padding-right: 5px; +} + +.menu-item-textbox { + width: 180px; +} + +.customlinkdiv label, +.nav-menus-php .howto span { + float: left; + margin-top: 6px; +} + +/* Menu item types */ +.quick-search { + width: 190px; +} + +.quick-search-wrap .spinner { + float: none; + margin: -3px -10px 0 0; +} + +.nav-menus-php .list-wrap { + display: none; + clear: both; + margin-bottom: 10px; +} + +.nav-menus-php .postbox p.submit { + margin-bottom: 0; +} + +/* Listings */ +.nav-menus-php .list li { + display: none; + margin: 0 0 5px; +} + +.nav-menus-php .list li .menu-item-title { + cursor: pointer; + display: block; +} + +.nav-menus-php .list li .menu-item-title input { + margin-right: 3px; + margin-top: -3px; +} + +.menu-item-title input[type=checkbox] { + display: inline-block; + margin-top: -4px; +} + +.menu-item-title .post-state { + font-weight: 600; +} + +/* Nav Menu */ +#menu-container .inside { + padding-bottom: 10px; +} + +.menu { + padding-top: 1em; +} + +#menu-to-edit { + margin: 0; + padding: 0.1em 0; +} + +.menu ul { + width: 100%; +} + +.menu li { + margin-bottom: 0; + position: relative; +} + +.menu-item-bar { + clear: both; + line-height: 1.5; + position: relative; + margin: 9px 0 0; +} + +.menu-item-bar .menu-item-handle { + border: 1px solid #dcdcde; + position: relative; + padding: 10px 15px; + height: auto; + min-height: 20px; + max-width: 382px; + line-height: 2.30769230; + overflow: hidden; + word-wrap: break-word; +} + +.menu-item-bar .menu-item-handle:hover { + border-color: #8c8f94; +} + +#menu-to-edit .menu-item-invalid .menu-item-handle { + background: #fcf0f1; + border-color: #d63638; +} + +.no-js .menu-item-edit-active .item-edit { + display: none; +} + +.js .menu-item-handle { + cursor: move; +} + +.menu li.deleting .menu-item-handle { + background-image: none; + background-color: #f86368; +} + +.menu-item-handle .item-title { + font-size: 13px; + font-weight: 600; + line-height: 1.53846153; + display: block; + /* @todo: responsive view. */ + margin-right: 13em; +} + +.menu-item-handle .menu-item-checkbox { + display: none; +} + +.bulk-selection .menu-item-handle .menu-item-checkbox { + display: inline-block; + margin-right: 6px; +} + +.menu-item-handle .menu-item-title.no-title { + color: #646970; +} + +/* Sortables */ +li.menu-item.ui-sortable-helper .menu-item-bar { + margin-top: 0; +} + +li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar { + margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */ +} + +.menu .sortable-placeholder { + height: 35px; + width: 410px; + margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */ +} + +/* Hide the transport list when it's empty */ +.menu-item .menu-item-transport:empty { + display: none; +} + +/* WARNING: The factor of 30px is hardcoded into the nav-menus JavaScript. */ +.menu-item-depth-0 { margin-left: 0; } +.menu-item-depth-1 { margin-left: 30px; } +.menu-item-depth-2 { margin-left: 60px; } +.menu-item-depth-3 { margin-left: 90px; } +.menu-item-depth-4 { margin-left: 120px; } +.menu-item-depth-5 { margin-left: 150px; } +.menu-item-depth-6 { margin-left: 180px; } +.menu-item-depth-7 { margin-left: 210px; } +.menu-item-depth-8 { margin-left: 240px; } +.menu-item-depth-9 { margin-left: 270px; } +.menu-item-depth-10 { margin-left: 300px; } +.menu-item-depth-11 { margin-left: 330px; } + +.menu-item-depth-0 .menu-item-transport { margin-left: 0; } +.menu-item-depth-1 .menu-item-transport { margin-left: -30px; } +.menu-item-depth-2 .menu-item-transport { margin-left: -60px; } +.menu-item-depth-3 .menu-item-transport { margin-left: -90px; } +.menu-item-depth-4 .menu-item-transport { margin-left: -120px; } +.menu-item-depth-5 .menu-item-transport { margin-left: -150px; } +.menu-item-depth-6 .menu-item-transport { margin-left: -180px; } +.menu-item-depth-7 .menu-item-transport { margin-left: -210px; } +.menu-item-depth-8 .menu-item-transport { margin-left: -240px; } +.menu-item-depth-9 .menu-item-transport { margin-left: -270px; } +.menu-item-depth-10 .menu-item-transport { margin-left: -300px; } +.menu-item-depth-11 .menu-item-transport { margin-left: -330px; } + +body.menu-max-depth-0 { min-width: 950px !important; } +body.menu-max-depth-1 { min-width: 980px !important; } +body.menu-max-depth-2 { min-width: 1010px !important; } +body.menu-max-depth-3 { min-width: 1040px !important; } +body.menu-max-depth-4 { min-width: 1070px !important; } +body.menu-max-depth-5 { min-width: 1100px !important; } +body.menu-max-depth-6 { min-width: 1130px !important; } +body.menu-max-depth-7 { min-width: 1160px !important; } +body.menu-max-depth-8 { min-width: 1190px !important; } +body.menu-max-depth-9 { min-width: 1220px !important; } +body.menu-max-depth-10 { min-width: 1250px !important; } +body.menu-max-depth-11 { min-width: 1280px !important; } + +/* Menu item controls */ +.item-type { + display: inline-block; + padding: 12px 16px; + color: #646970; + font-size: 12px; + line-height: 1.5; +} + +.item-controls { + font-size: 12px; + position: absolute; + right: 20px; + top: -1px; +} + +.item-controls a { + text-decoration: none; +} + +.item-controls a:hover { + cursor: pointer; +} + +.item-controls .item-order { + padding-right: 10px; +} + +.nav-menus-php .item-edit { + position: absolute; + right: -20px; + top: 0; + display: block; + width: 30px; + height: 40px; + outline: none; +} + +.no-js.nav-menus-php .item-edit { + position: static; + float: right; + width: auto; + height: auto; + margin: 12px -10px 12px 0; + padding: 0; + color: #2271b1; + text-decoration: underline; + font-size: 12px; + line-height: 1.5; +} + +.no-js.nav-menus-php .item-edit .screen-reader-text { + position: static; + -webkit-clip-path: none; + clip-path: none; + width: auto; + height: auto; + margin: 0; +} + +.nav-menus-php .item-edit:before { + margin-top: 10px; + margin-left: 4px; + width: 20px; + border-radius: 50%; + text-indent: -1px; /* account for the dashicon alignment */ +} + +.no-js.nav-menus-php .item-edit:before { + display: none; +} + +.rtl .nav-menus-php .item-edit:before { + text-indent: 1px; /* account for the dashicon alignment */ +} + +.js.nav-menus-php .item-edit:focus { + box-shadow: none; +} + +.nav-menus-php .item-edit:focus:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +/* Menu editing */ +.menu-instructions-inactive { + display: none; +} + +.menu-item-settings { + display: block; + max-width: 392px; + padding: 10px; + position: relative; + z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */ + border: 1px solid #c3c4c7; + border-top: none; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +.menu-item-settings .field-move { + margin: 3px 0 5px; + line-height: 1.5; +} + +.field-move-visual-label { + float: left; + margin-right: 4px; +} + +.menu-item-settings .field-move .button-link { + display: none; + margin: 0 2px; +} + +.menu-item-edit-active .menu-item-settings { + display: block; +} + +.menu-item-edit-inactive .menu-item-settings { + display: none; +} + +.add-menu-item-pagelinks { + margin: .5em -10px; + text-align: center; +} + +.add-menu-item-pagelinks .page-numbers { + display: inline-block; + min-width: 20px; +} + +.add-menu-item-pagelinks .page-numbers.dots { + min-width: 0; +} + +.link-to-original { + display: block; + margin: 0 0 15px; + padding: 3px 5px 5px; + border: 1px solid #dcdcde; + color: #646970; + font-size: 12px; +} + +.link-to-original a { + padding-left: 4px; + font-style: normal; +} + +.hidden-field { + display: none; +} + +.menu-item-settings .description-thin, +.menu-item-settings .description-wide { + margin-right: 10px; + float: left; +} + +.description-thin { + width: calc(50% - 5px); +} + +.menu-item-settings .description-thin + .description-thin { + margin-right: 0; +} + +.description-wide { + width: 100%; +} + +.menu-item-actions { + padding-top: 15px; + padding-bottom: 7px; +} + +#cancel-save { + cursor: pointer; +} + +/* Major/minor publishing actions (classes) */ +.nav-menus-php .major-publishing-actions { + clear: both; + padding: 10px 0; + line-height: 2.15384615; +} + +.nav-menus-php .major-publishing-actions .publishing-action { + text-align: right; + float: right; +} + +/* Same as the Publish Meta Box #delete-action */ +.nav-menus-php .delete-action { + float: left; + line-height: 2.1; +} + +.nav-menus-php .major-publishing-actions .form-invalid { + padding-left: 4px; + margin-left: -4px; +} + +#nav-menus-frame, +.button-controls, +#menu-item-url-wrap, +#menu-item-name-wrap { + display: block; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media only screen and (min-width: 769px) and (max-width: 1000px) { + body.menu-max-depth-0 { + min-width: 0 !important; + } + + #menu-management-liquid { + width: 100%; + } + + .nav-menus-php #post-body-content { + min-width: 0; + } +} + +@media screen and (max-width: 782px) { + body.nav-menus-php, + body.wp-customizer { + min-width: 0 !important; + } + + #nav-menus-frame { + margin-left: 0; + float: none; + width: 100%; + } + + #wpbody-content #menu-settings-column { + display: block; + width: 100%; + float: none; + margin-left: 0; + } + + #side-sortables .add-menu-item-tabs { + margin: 15px 0 14px; + } + + ul.add-menu-item-tabs li.tabs { + padding: 13px 15px 14px; + } + + .nav-menus-php .customlinkdiv .howto input { + width: 65%; + } + + .nav-menus-php .quick-search { + width: 85%; + } + + #menu-management-liquid { + margin-top: 25px; + } + + .nav-menus-php .menu-name-label.howto span { + margin-top: 13px + } + + #menu-name { + width: 100%; + } + + .nav-menus-php #nav-menu-header .major-publishing-actions .publishing-action { + padding-top: 1em; + } + + .nav-menus-php .delete-action { + font-size: 14px; + line-height: 2.14285714; + } + + .menu-item-bar .menu-item-handle, + .menu-item-settings, + .description-wide { + width: auto; + } + + .menu-item-settings { + padding: 10px; + } + + .menu-item-settings .description-thin, + .menu-item-settings .description-wide { + width: 100%; + } + + .menu-item-settings input { + width: 100%; + } + + .menu-item-settings input[type="checkbox"], + .menu-item-settings input[type="radio"] { + width: 25px; + } + + .menu-settings-group { + padding-left: 0; + overflow: visible; + } + + .menu-settings-group-name { + float: none; + width: auto; + margin-left: 0; + margin-bottom: 15px; + } + + .menu-settings-input { + float: none; + margin-bottom: 15px; + } + + .menu-edit .checkbox-input { + margin-top: 0; + } + + .manage-menus select { + margin: 0.5em 0; + } + + .wp-core-ui .manage-menus .button { + margin-bottom: 0; + } + + .widefat .menu-locations .menu-location-title { + padding-top: 16px; + } +} + +@media only screen and (min-width: 783px) { + @supports (position: sticky) and (scroll-margin-bottom: 130px) { + + #nav-menu-footer { + position: sticky; + bottom: 0; + z-index: 10; + box-shadow: 0 -1px 0 0 #ddd; + } + + #save_menu_header { + display: none; + } + } +} + +@media only screen and (max-width: 768px) { + /* menu locations */ + #menu-locations-wrap .widefat { + width: 100%; + } + + .bulk-select-button { + padding: 5px 10px; + } +} diff --git a/tools/storybook/wordpress/css/nav-menus.min.css b/tools/storybook/wordpress/css/nav-menus.min.css new file mode 100644 index 00000000000..8eed65aa838 --- /dev/null +++ b/tools/storybook/wordpress/css/nav-menus.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.no-js #message{display:block}ul.add-menu-item-tabs li{padding:3px 5px 4px 8px}.accordion-section ul.add-menu-item-tabs,.accordion-section ul.category-tabs,.accordion-section ul.wp-tab-bar{margin:0}.accordion-section .categorychecklist{margin:13px 0}#nav-menu-meta .accordion-section-content{padding:18px 13px}#nav-menu-meta .button-controls{margin-bottom:0}.has-no-menu-item .button-controls{display:none}#nav-menus-frame{margin-left:300px;margin-top:23px}#wpbody-content #menu-settings-column{display:inline;width:281px;margin-left:-300px;clear:both;float:left;padding-top:0}#menu-settings-column .inside{clear:both;margin:10px 0 0}.metabox-holder-disabled .accordion-section-content,.metabox-holder-disabled .accordion-section-title,.metabox-holder-disabled .postbox{opacity:.5}.metabox-holder-disabled .button-controls .select-all{display:none}#wpbody{position:relative}.is-submenu{color:#50575e;font-style:italic;font-weight:400;margin-left:4px}.manage-menus{margin-top:23px;padding:10px;overflow:hidden;background:#fff}.manage-menus .selected-menu,.manage-menus .submit-btn,.manage-menus select,.nav-menus-php .add-new-menu-action{display:inline-block;margin-right:3px;vertical-align:middle}.manage-menus select,.menu-location-menus select{max-width:100%}.menu-edit #post-body-content h3{margin:1em 0 10px}#nav-menu-bulk-actions-top{margin:1em 0}#nav-menu-bulk-actions-bottom{margin:1em 0;margin:calc(1em + 9px) 0}.bulk-actions input.button{margin-right:12px}.bulk-select-button{position:relative;display:inline-block;padding:0 10px;font-size:13px;line-height:2.15384615;height:auto;min-height:30px;background:#f6f7f7;vertical-align:top;border:1px solid #dcdcde;margin:0;cursor:pointer;border-radius:3px;white-space:nowrap;box-sizing:border-box}.bulk-selection .bulk-select-button{color:#2271b1;border-color:#2271b1;background:#f6f7f7;vertical-align:top}#pending-menu-items-to-delete{display:none}.bulk-selection #pending-menu-items-to-delete{display:block;margin-top:1em}#pending-menu-items-to-delete p{margin-bottom:0}#pending-menu-items-to-delete ul{margin-top:0;list-style:none}#pending-menu-items-to-delete ul li{display:inline}input.bulk-select-switcher+.bulk-select-button-label{vertical-align:inherit}label.bulk-select-button:active,label.bulk-select-button:focus-within,label.bulk-select-button:hover{background:#f0f0f1;border-color:#0a4b78;color:#0a4b78}input.bulk-select-switcher:focus+.bulk-select-button-label{color:#0a4b78}.bulk-actions input.menu-items-delete{-webkit-appearance:none;appearance:none;font-size:inherit;border:0;line-height:2.1em;background:0 0;cursor:pointer;text-decoration:underline;color:#b32d2e}.bulk-actions input.menu-items-delete:hover{color:#b32d2e;border:none}.bulk-actions input.menu-items-delete.disabled{cursor:default;color:#a7aaad;box-shadow:none}.menu-settings{border-top:1px solid #f0f0f1;margin-top:2em}.menu-settings-group{margin:0 0 10px;overflow:hidden;padding-left:20%}.menu-settings-group:last-of-type{margin-bottom:0}.menu-settings-input{float:left;margin:0;width:100%}.menu-settings-group-name{float:left;clear:both;width:25%;padding:3px 0 0;margin-left:-25%}.menu-settings label{vertical-align:baseline}.menu-edit .checkbox-input{margin-top:4px}.theme-location-set{color:#646970;font-size:11px}#menu-management-liquid{float:left;min-width:100%;margin-top:3px}#menu-management{position:relative;margin-right:20px;margin-top:-3px;width:100%}#menu-management .menu-edit{margin-bottom:20px}.nav-menus-php #post-body{padding:0 10px;border-top:1px solid #fff;border-bottom:1px solid #dcdcde;background:#fff}#nav-menu-footer,#nav-menu-header{padding:0 10px;background:#f6f7f7}#nav-menu-header{border-bottom:1px solid #dcdcde;margin-bottom:0}#nav-menu-header .menu-name-label{display:inline-block;vertical-align:middle;margin-right:7px}.nav-menus-php #post-body div.error,.nav-menus-php #post-body div.updated{margin:0}.nav-menus-php #post-body-content{position:relative;float:none}.nav-menus-php #post-body-content .post-body-plain{margin-bottom:0}#menu-management .menu-add-new abbr{font-weight:600}#select-nav-menu-container{text-align:right;padding:0 10px 3px;margin-bottom:5px}#select-nav-menu{width:100px;display:inline}#menu-name-label{margin-top:-2px}.widefat .menu-locations .menu-location-title{padding:13px 10px 0}.menu-location-title label{font-weight:600}.menu-location-menus select{float:left}#locations-nav-menu-wrapper{padding:5px 0}.locations-nav-menu-select select{float:left;width:160px;margin-right:5px}.locations-row-links{float:left;margin:6px 0 0 6px}.locations-add-menu-link,.locations-edit-menu-link{margin:0 3px}.locations-edit-menu-link{padding-right:3px;border-right:1px solid #c3c4c7}#menu-management .inside{padding:0 10px}.customlinkdiv .menu-item-textbox,.postbox .howto input{width:180px;float:right}.accordion-container .outer-border{margin:0}.customlinkdiv p{margin-top:0}#nav-menu-theme-locations .howto select{width:100%}#nav-menu-theme-locations .button-controls{text-align:right}.add-menu-item-view-all{height:400px}#menu-container .submit{margin:0 0 10px;padding:0}#cancel-save{text-decoration:underline;font-size:12px;margin-left:20px;margin-top:5px}.button-primary.right,.button-secondary.right,.button.right{float:right}.list-controls{float:left;margin-top:5px}.add-to-menu{float:right}.button-controls{clear:both;margin:10px 0}.hide-all,.show-all{cursor:pointer}.hide-all{display:none}#menu-name{width:270px;vertical-align:middle}#manage-menu .inside{padding:0}#available-links dt{display:block}#add-custom-link .howto{font-size:12px}#add-custom-link label span{display:block;float:left;margin-top:5px;padding-right:5px}.menu-item-textbox{width:180px}.customlinkdiv label,.nav-menus-php .howto span{float:left;margin-top:6px}.quick-search{width:190px}.quick-search-wrap .spinner{float:none;margin:-3px -10px 0 0}.nav-menus-php .list-wrap{display:none;clear:both;margin-bottom:10px}.nav-menus-php .postbox p.submit{margin-bottom:0}.nav-menus-php .list li{display:none;margin:0 0 5px}.nav-menus-php .list li .menu-item-title{cursor:pointer;display:block}.nav-menus-php .list li .menu-item-title input{margin-right:3px;margin-top:-3px}.menu-item-title input[type=checkbox]{display:inline-block;margin-top:-4px}.menu-item-title .post-state{font-weight:600}#menu-container .inside{padding-bottom:10px}.menu{padding-top:1em}#menu-to-edit{margin:0;padding:.1em 0}.menu ul{width:100%}.menu li{margin-bottom:0;position:relative}.menu-item-bar{clear:both;line-height:1.5;position:relative;margin:9px 0 0}.menu-item-bar .menu-item-handle{border:1px solid #dcdcde;position:relative;padding:10px 15px;height:auto;min-height:20px;max-width:382px;line-height:2.30769230;overflow:hidden;word-wrap:break-word}.menu-item-bar .menu-item-handle:hover{border-color:#8c8f94}#menu-to-edit .menu-item-invalid .menu-item-handle{background:#fcf0f1;border-color:#d63638}.no-js .menu-item-edit-active .item-edit{display:none}.js .menu-item-handle{cursor:move}.menu li.deleting .menu-item-handle{background-image:none;background-color:#f86368}.menu-item-handle .item-title{font-size:13px;font-weight:600;line-height:1.53846153;display:block;margin-right:13em}.menu-item-handle .menu-item-checkbox{display:none}.bulk-selection .menu-item-handle .menu-item-checkbox{display:inline-block;margin-right:6px}.menu-item-handle .menu-item-title.no-title{color:#646970}li.menu-item.ui-sortable-helper .menu-item-bar{margin-top:0}li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar{margin-top:9px}.menu .sortable-placeholder{height:35px;width:410px;margin-top:9px}.menu-item .menu-item-transport:empty{display:none}.menu-item-depth-0{margin-left:0}.menu-item-depth-1{margin-left:30px}.menu-item-depth-2{margin-left:60px}.menu-item-depth-3{margin-left:90px}.menu-item-depth-4{margin-left:120px}.menu-item-depth-5{margin-left:150px}.menu-item-depth-6{margin-left:180px}.menu-item-depth-7{margin-left:210px}.menu-item-depth-8{margin-left:240px}.menu-item-depth-9{margin-left:270px}.menu-item-depth-10{margin-left:300px}.menu-item-depth-11{margin-left:330px}.menu-item-depth-0 .menu-item-transport{margin-left:0}.menu-item-depth-1 .menu-item-transport{margin-left:-30px}.menu-item-depth-2 .menu-item-transport{margin-left:-60px}.menu-item-depth-3 .menu-item-transport{margin-left:-90px}.menu-item-depth-4 .menu-item-transport{margin-left:-120px}.menu-item-depth-5 .menu-item-transport{margin-left:-150px}.menu-item-depth-6 .menu-item-transport{margin-left:-180px}.menu-item-depth-7 .menu-item-transport{margin-left:-210px}.menu-item-depth-8 .menu-item-transport{margin-left:-240px}.menu-item-depth-9 .menu-item-transport{margin-left:-270px}.menu-item-depth-10 .menu-item-transport{margin-left:-300px}.menu-item-depth-11 .menu-item-transport{margin-left:-330px}body.menu-max-depth-0{min-width:950px!important}body.menu-max-depth-1{min-width:980px!important}body.menu-max-depth-2{min-width:1010px!important}body.menu-max-depth-3{min-width:1040px!important}body.menu-max-depth-4{min-width:1070px!important}body.menu-max-depth-5{min-width:1100px!important}body.menu-max-depth-6{min-width:1130px!important}body.menu-max-depth-7{min-width:1160px!important}body.menu-max-depth-8{min-width:1190px!important}body.menu-max-depth-9{min-width:1220px!important}body.menu-max-depth-10{min-width:1250px!important}body.menu-max-depth-11{min-width:1280px!important}.item-type{display:inline-block;padding:12px 16px;color:#646970;font-size:12px;line-height:1.5}.item-controls{font-size:12px;position:absolute;right:20px;top:-1px}.item-controls a{text-decoration:none}.item-controls a:hover{cursor:pointer}.item-controls .item-order{padding-right:10px}.nav-menus-php .item-edit{position:absolute;right:-20px;top:0;display:block;width:30px;height:40px;outline:0}.no-js.nav-menus-php .item-edit{position:static;float:right;width:auto;height:auto;margin:12px -10px 12px 0;padding:0;color:#2271b1;text-decoration:underline;font-size:12px;line-height:1.5}.no-js.nav-menus-php .item-edit .screen-reader-text{position:static;-webkit-clip-path:none;clip-path:none;width:auto;height:auto;margin:0}.nav-menus-php .item-edit:before{margin-top:10px;margin-left:4px;width:20px;border-radius:50%;text-indent:-1px}.no-js.nav-menus-php .item-edit:before{display:none}.rtl .nav-menus-php .item-edit:before{text-indent:1px}.js.nav-menus-php .item-edit:focus{box-shadow:none}.nav-menus-php .item-edit:focus:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.menu-instructions-inactive{display:none}.menu-item-settings{display:block;max-width:392px;padding:10px;position:relative;z-index:10;border:1px solid #c3c4c7;border-top:none;box-shadow:0 1px 1px rgba(0,0,0,.04)}.menu-item-settings .field-move{margin:3px 0 5px;line-height:1.5}.field-move-visual-label{float:left;margin-right:4px}.menu-item-settings .field-move .button-link{display:none;margin:0 2px}.menu-item-edit-active .menu-item-settings{display:block}.menu-item-edit-inactive .menu-item-settings{display:none}.add-menu-item-pagelinks{margin:.5em -10px;text-align:center}.add-menu-item-pagelinks .page-numbers{display:inline-block;min-width:20px}.add-menu-item-pagelinks .page-numbers.dots{min-width:0}.link-to-original{display:block;margin:0 0 15px;padding:3px 5px 5px;border:1px solid #dcdcde;color:#646970;font-size:12px}.link-to-original a{padding-left:4px;font-style:normal}.hidden-field{display:none}.menu-item-settings .description-thin,.menu-item-settings .description-wide{margin-right:10px;float:left}.description-thin{width:calc(50% - 5px)}.menu-item-settings .description-thin+.description-thin{margin-right:0}.description-wide{width:100%}.menu-item-actions{padding-top:15px;padding-bottom:7px}#cancel-save{cursor:pointer}.nav-menus-php .major-publishing-actions{clear:both;padding:10px 0;line-height:2.15384615}.nav-menus-php .major-publishing-actions .publishing-action{text-align:right;float:right}.nav-menus-php .delete-action{float:left;line-height:2.1}.nav-menus-php .major-publishing-actions .form-invalid{padding-left:4px;margin-left:-4px}#menu-item-name-wrap,#menu-item-url-wrap,#nav-menus-frame,.button-controls{display:block}@media only screen and (min-width:769px) and (max-width:1000px){body.menu-max-depth-0{min-width:0!important}#menu-management-liquid{width:100%}.nav-menus-php #post-body-content{min-width:0}}@media screen and (max-width:782px){body.nav-menus-php,body.wp-customizer{min-width:0!important}#nav-menus-frame{margin-left:0;float:none;width:100%}#wpbody-content #menu-settings-column{display:block;width:100%;float:none;margin-left:0}#side-sortables .add-menu-item-tabs{margin:15px 0 14px}ul.add-menu-item-tabs li.tabs{padding:13px 15px 14px}.nav-menus-php .customlinkdiv .howto input{width:65%}.nav-menus-php .quick-search{width:85%}#menu-management-liquid{margin-top:25px}.nav-menus-php .menu-name-label.howto span{margin-top:13px}#menu-name{width:100%}.nav-menus-php #nav-menu-header .major-publishing-actions .publishing-action{padding-top:1em}.nav-menus-php .delete-action{font-size:14px;line-height:2.14285714}.description-wide,.menu-item-bar .menu-item-handle,.menu-item-settings{width:auto}.menu-item-settings{padding:10px}.menu-item-settings .description-thin,.menu-item-settings .description-wide{width:100%}.menu-item-settings input{width:100%}.menu-item-settings input[type=checkbox],.menu-item-settings input[type=radio]{width:25px}.menu-settings-group{padding-left:0;overflow:visible}.menu-settings-group-name{float:none;width:auto;margin-left:0;margin-bottom:15px}.menu-settings-input{float:none;margin-bottom:15px}.menu-edit .checkbox-input{margin-top:0}.manage-menus select{margin:.5em 0}.wp-core-ui .manage-menus .button{margin-bottom:0}.widefat .menu-locations .menu-location-title{padding-top:16px}}@media only screen and (min-width:783px){@supports (position:sticky) and (scroll-margin-bottom:130px){#nav-menu-footer{position:sticky;bottom:0;z-index:10;box-shadow:0 -1px 0 0 #ddd}#save_menu_header{display:none}}}@media only screen and (max-width:768px){#menu-locations-wrap .widefat{width:100%}.bulk-select-button{padding:5px 10px}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/revisions-rtl.css b/tools/storybook/wordpress/css/revisions-rtl.css new file mode 100644 index 00000000000..8edb7dc5379 --- /dev/null +++ b/tools/storybook/wordpress/css/revisions-rtl.css @@ -0,0 +1,603 @@ +/*! This file is auto-generated */ +/*------------------------------------------------------------------------------ + 11.2 - Post Revisions +------------------------------------------------------------------------------*/ +.revisions-control-frame, +.revisions-diff-frame { + position: relative; +} + +.revisions-diff-frame { + top: 10px; +} + +.revisions-controls { + padding-top: 40px; + z-index: 1; +} + +.revisions-controls input[type="checkbox"] { + position: relative; + top: -1px; + vertical-align: text-bottom; +} + +.revisions.pinned .revisions-controls { + position: fixed; + top: 0; + height: 82px; + background: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.revisions-tickmarks { + position: relative; + margin: 0 auto; + height: 0.7em; + top: 7px; + max-width: 70%; + box-sizing: border-box; + background-color: #fff; +} + +.revisions-tickmarks > div { + position: absolute; + height: 100%; + border-right: 1px solid #a7aaad; + box-sizing: border-box; +} + +.revisions-tickmarks > div:first-child { + border-width: 0; +} + +.comparing-two-revisions .revisions-controls { + height: 140px; +} + +.comparing-two-revisions.pinned .revisions-controls { + height: 124px; +} + +.revisions .diff-error { + position: absolute; + text-align: center; + margin: 0 auto; + width: 100%; + display: none; +} + +.revisions.diff-error .diff-error { + display: block; +} + +.revisions .loading-indicator { + position: absolute; + vertical-align: middle; + opacity: 0; + width: 100%; + width: calc( 100% - 30px ); + top: 50%; + top: calc( 50% - 10px ); + transition: opacity 0.5s; +} + +body.folded .revisions .loading-indicator { + margin-right: -32px; +} + +.revisions .loading-indicator span.spinner { + display: block; + margin: 0 auto; + float: none; +} + +.revisions.loading .loading-indicator { + opacity: 1; +} + +.revisions .diff { + transition: opacity 0.5s; +} + +.revisions.loading .diff { + opacity: 0.5; +} + +.revisions.diff-error .diff { + visibility: hidden; +} + +.revisions-meta { + margin-top: 20px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.revisions.pinned .revisions-meta { + box-shadow: none; +} + +.revision-toggle-compare-mode { + position: absolute; + top: 0; + left: 0; +} + +.comparing-two-revisions .revisions-previous, +.comparing-two-revisions .revisions-next, +.revisions-meta .diff-meta-to strong { + display: none; +} + +.revisions-controls .author-card .date { + color: #646970; +} + +.revisions-controls .author-card.autosave { + color: #d63638; +} + +.revisions-controls .author-card .author-name { + font-weight: 600; +} + +.comparing-two-revisions .diff-meta-to strong { + display: block; +} + +.revisions.pinned .revisions-buttons { + padding: 0 11px; +} + +.revisions-previous, +.revisions-next { + position: relative; + z-index: 1; +} + +.revisions-previous { + float: right; +} + +.revisions-next { + float: left; +} + +.revisions-controls .wp-slider { + max-width: 70%; + margin: 0 auto; + top: -3px; +} + +.revisions-diff { + padding: 15px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.revisions-diff h3:first-child { + margin-top: 0; +} + +/* Revision meta box */ +.post-revisions li img, +#revisions-meta-restored img { + vertical-align: middle; +} + +table.diff { + table-layout: fixed; + width: 100%; + white-space: pre-wrap; +} + +table.diff col.content { + width: auto; +} + +table.diff col.content.diffsplit { + width: 48%; +} + +table.diff col.diffsplit.middle { + width: auto; +} + +table.diff col.ltype { + width: 30px; +} + +table.diff tr { + background-color: transparent; +} + +table.diff td, +table.diff th { + font-family: Consolas, Monaco, monospace; + font-size: 14px; + line-height: 1.57142857; + padding: 0.5em 2em 0.5em 0.5em; + vertical-align: top; + word-wrap: break-word; +} + +table.diff td h1, +table.diff td h2, +table.diff td h3, +table.diff td h4, +table.diff td h5, +table.diff td h6 { + margin: 0; +} + +table.diff .diff-deletedline del, +table.diff .diff-addedline ins { + text-decoration: none; +} + +table.diff .diff-deletedline { + position: relative; + background-color: #fcf0f1; +} + +table.diff .diff-deletedline del { + background-color: #ffabaf; +} + +table.diff .diff-addedline { + position: relative; + background-color: #edfaef; +} + +table.diff .diff-deletedline .dashicons, +table.diff .diff-addedline .dashicons { + position: absolute; + top: 0.85714286em; + right: 0.5em; + width: 1em; + height: 1em; + font-size: 1em; + line-height: 1; +} + +table.diff .diff-addedline .dashicons { + /* Compensate the vertically non-centered plus glyph. */ + top: 0.92857143em; +} + +table.diff .diff-addedline ins { + background-color: #68de7c; +} + +.diff-meta { + padding: 5px; + clear: both; + min-height: 32px; +} + +.diff-title strong { + line-height: 2.46153846; + min-width: 60px; + text-align: left; + float: right; + margin-left: 5px; +} + +.revisions-controls .author-card .author-info { + font-size: 12px; + line-height: 1.33333333; +} + +.revisions-controls .author-card .avatar, +.revisions-controls .author-card .author-info { + float: right; + margin-right: 6px; + margin-left: 6px; +} + +.revisions-controls .author-card .byline { + display: block; + font-size: 12px; +} + +.revisions-controls .author-card .avatar { + vertical-align: middle; +} + +.diff-meta input.restore-revision { + float: left; + margin-right: 6px; + margin-left: 6px; + margin-top: 2px; +} + +.diff-meta-from { + display: none; +} + +.comparing-two-revisions .diff-meta-from { + display: block; +} + +.revisions-tooltip { + position: absolute; + bottom: 105px; + margin-left: 0; + margin-right: -69px; + z-index: 0; + max-width: 350px; + min-width: 130px; + padding: 8px 4px; + display: none; + opacity: 0; +} + +.revisions-tooltip.flipped { + margin-right: 0; + margin-left: -70px; +} + +.revisions.pinned .revisions-tooltip { + display: none !important; +} + +.comparing-two-revisions .revisions-tooltip { + bottom: 145px; +} + +.revisions-tooltip-arrow { + width: 70px; + height: 15px; + overflow: hidden; + position: absolute; + right: 0; + margin-right: 35px; + bottom: -15px; +} + +.revisions-tooltip.flipped .revisions-tooltip-arrow { + margin-right: 0; + margin-left: 35px; + right: auto; + left: 0; +} + +.revisions-tooltip-arrow > span { + content: ""; + position: absolute; + right: 20px; + top: -20px; + width: 25px; + height: 25px; + transform: rotate(-45deg); +} + +.revisions-tooltip.flipped .revisions-tooltip-arrow > span { + right: auto; + left: 20px; +} + +.revisions-tooltip, +.revisions-tooltip-arrow > span { + border: 1px solid #dcdcde; + background-color: #fff; +} + +.revisions-tooltip { + display: none; +} + +.arrow { + width: 70px; + height: 16px; + overflow: hidden; + position: absolute; + right: 0; + margin-right: -35px; + bottom: 90px; + z-index: 10000; +} + +.arrow:after { + z-index: 9999; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.arrow.top { + top: -16px; + bottom: auto; +} + +.arrow.left { + right: 20%; +} + +.arrow:after { + content: ""; + position: absolute; + right: 20px; + top: -20px; + width: 25px; + height: 25px; + transform: rotate(-45deg); +} + +.revisions-tooltip, +.revisions-tooltip-arrow:after { + border-width: 1px; + border-style: solid; +} + +div.revisions-controls > .wp-slider > .ui-slider-handle { + margin-right: -10px; +} + +.rtl div.revisions-controls > .wp-slider > .ui-slider-handle { + margin-left: -10px; +} + +/* jQuery UI Slider */ +.wp-slider.ui-slider { + position: relative; + border: 1px solid #dcdcde; + text-align: right; + cursor: pointer; +} + +.wp-slider .ui-slider-handle { + border-radius: 50%; + height: 18px; + margin-top: -5px; + outline: none; + padding: 2px; + position: absolute; + width: 18px; + z-index: 2; + touch-action: none; +} + +.wp-slider .ui-slider-handle, +.wp-slider .ui-slider-handle.focus { + background: #f6f7f7; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 0 #c3c4c7; +} + +.wp-slider .ui-slider-handle:hover, +.wp-slider .ui-slider-handle.ui-state-hover { + background: #f6f7f7; + border-color: #8c8f94; +} + +.wp-slider .ui-slider-handle:active, +.wp-slider .ui-slider-handle.ui-state-active { + background: #f0f0f1; + border-color: #8c8f94; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + transform: translateY(1px); +} + +.wp-slider .ui-slider-handle:before { + background: none; + position: absolute; + top: 2px; + right: 2px; + color: #50575e; + content: "\f229"; + font: normal 18px/1 dashicons; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wp-slider .ui-slider-handle:hover:before, +.wp-slider .ui-slider-handle.ui-state-hover:before { + color: #1d2327; +} + +.wp-slider .ui-slider-handle.from-handle:before, +.wp-slider .ui-slider-handle.to-handle:before { + font-size: 20px !important; + margin: -1px -1px 0 0; +} + +.wp-slider .ui-slider-handle.from-handle:before { + content: "\f141"; +} + +.wp-slider .ui-slider-handle.to-handle:before { + content: "\f139"; +} + +.rtl .wp-slider .ui-slider-handle.from-handle:before { + content: "\f139"; +} + +.rtl .wp-slider .ui-slider-handle.to-handle:before { + content: "\f141"; + left: -1px; +} + +.wp-slider .ui-slider-range { + position: absolute; + font-size: 0.7em; + display: block; + border: 0; + background-color: transparent; + background-image: none; +} + +.wp-slider.ui-slider-horizontal { + height: 0.7em; +} + +.wp-slider.ui-slider-horizontal .ui-slider-handle { + top: -.25em; + margin-right: -.6em; +} + +.wp-slider.ui-slider-horizontal .ui-slider-range { + top: 0; + height: 100%; +} + +.wp-slider.ui-slider-horizontal .ui-slider-range-min { + right: 0; +} + +.wp-slider.ui-slider-horizontal .ui-slider-range-max { + left: 0; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + .revision-tick.completed-false { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + #diff-next-revision, + #diff-previous-revision { + margin-top: -1em; + } + + .revisions-buttons { + overflow: hidden; + margin-bottom: 15px; + } + + .revisions-controls, + .comparing-two-revisions .revisions-controls { + height: 170px; + } + + .revisions-tooltip { + bottom: 130px; + z-index: 2; + } + + .diff-meta { + overflow: hidden; + } + + table.diff { + -ms-word-break: break-all; + word-break: break-all; + word-wrap: break-word; + } + + .diff-meta input.restore-revision { + margin-top: 0; + } +} diff --git a/tools/storybook/wordpress/css/revisions-rtl.min.css b/tools/storybook/wordpress/css/revisions-rtl.min.css new file mode 100644 index 00000000000..41857127746 --- /dev/null +++ b/tools/storybook/wordpress/css/revisions-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.revisions-control-frame,.revisions-diff-frame{position:relative}.revisions-diff-frame{top:10px}.revisions-controls{padding-top:40px;z-index:1}.revisions-controls input[type=checkbox]{position:relative;top:-1px;vertical-align:text-bottom}.revisions.pinned .revisions-controls{position:fixed;top:0;height:82px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.revisions-tickmarks{position:relative;margin:0 auto;height:.7em;top:7px;max-width:70%;box-sizing:border-box;background-color:#fff}.revisions-tickmarks>div{position:absolute;height:100%;border-right:1px solid #a7aaad;box-sizing:border-box}.revisions-tickmarks>div:first-child{border-width:0}.comparing-two-revisions .revisions-controls{height:140px}.comparing-two-revisions.pinned .revisions-controls{height:124px}.revisions .diff-error{position:absolute;text-align:center;margin:0 auto;width:100%;display:none}.revisions.diff-error .diff-error{display:block}.revisions .loading-indicator{position:absolute;vertical-align:middle;opacity:0;width:100%;width:calc(100% - 30px);top:50%;top:calc(50% - 10px);transition:opacity .5s}body.folded .revisions .loading-indicator{margin-right:-32px}.revisions .loading-indicator span.spinner{display:block;margin:0 auto;float:none}.revisions.loading .loading-indicator{opacity:1}.revisions .diff{transition:opacity .5s}.revisions.loading .diff{opacity:.5}.revisions.diff-error .diff{visibility:hidden}.revisions-meta{margin-top:20px;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}.revisions.pinned .revisions-meta{box-shadow:none}.revision-toggle-compare-mode{position:absolute;top:0;left:0}.comparing-two-revisions .revisions-next,.comparing-two-revisions .revisions-previous,.revisions-meta .diff-meta-to strong{display:none}.revisions-controls .author-card .date{color:#646970}.revisions-controls .author-card.autosave{color:#d63638}.revisions-controls .author-card .author-name{font-weight:600}.comparing-two-revisions .diff-meta-to strong{display:block}.revisions.pinned .revisions-buttons{padding:0 11px}.revisions-next,.revisions-previous{position:relative;z-index:1}.revisions-previous{float:right}.revisions-next{float:left}.revisions-controls .wp-slider{max-width:70%;margin:0 auto;top:-3px}.revisions-diff{padding:15px;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.revisions-diff h3:first-child{margin-top:0}#revisions-meta-restored img,.post-revisions li img{vertical-align:middle}table.diff{table-layout:fixed;width:100%;white-space:pre-wrap}table.diff col.content{width:auto}table.diff col.content.diffsplit{width:48%}table.diff col.diffsplit.middle{width:auto}table.diff col.ltype{width:30px}table.diff tr{background-color:transparent}table.diff td,table.diff th{font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.57142857;padding:.5em 2em .5em .5em;vertical-align:top;word-wrap:break-word}table.diff td h1,table.diff td h2,table.diff td h3,table.diff td h4,table.diff td h5,table.diff td h6{margin:0}table.diff .diff-addedline ins,table.diff .diff-deletedline del{text-decoration:none}table.diff .diff-deletedline{position:relative;background-color:#fcf0f1}table.diff .diff-deletedline del{background-color:#ffabaf}table.diff .diff-addedline{position:relative;background-color:#edfaef}table.diff .diff-addedline .dashicons,table.diff .diff-deletedline .dashicons{position:absolute;top:.85714286em;right:.5em;width:1em;height:1em;font-size:1em;line-height:1}table.diff .diff-addedline .dashicons{top:.92857143em}table.diff .diff-addedline ins{background-color:#68de7c}.diff-meta{padding:5px;clear:both;min-height:32px}.diff-title strong{line-height:2.46153846;min-width:60px;text-align:left;float:right;margin-left:5px}.revisions-controls .author-card .author-info{font-size:12px;line-height:1.33333333}.revisions-controls .author-card .author-info,.revisions-controls .author-card .avatar{float:right;margin-right:6px;margin-left:6px}.revisions-controls .author-card .byline{display:block;font-size:12px}.revisions-controls .author-card .avatar{vertical-align:middle}.diff-meta input.restore-revision{float:left;margin-right:6px;margin-left:6px;margin-top:2px}.diff-meta-from{display:none}.comparing-two-revisions .diff-meta-from{display:block}.revisions-tooltip{position:absolute;bottom:105px;margin-left:0;margin-right:-69px;z-index:0;max-width:350px;min-width:130px;padding:8px 4px;display:none;opacity:0}.revisions-tooltip.flipped{margin-right:0;margin-left:-70px}.revisions.pinned .revisions-tooltip{display:none!important}.comparing-two-revisions .revisions-tooltip{bottom:145px}.revisions-tooltip-arrow{width:70px;height:15px;overflow:hidden;position:absolute;right:0;margin-right:35px;bottom:-15px}.revisions-tooltip.flipped .revisions-tooltip-arrow{margin-right:0;margin-left:35px;right:auto;left:0}.revisions-tooltip-arrow>span{content:"";position:absolute;right:20px;top:-20px;width:25px;height:25px;transform:rotate(-45deg)}.revisions-tooltip.flipped .revisions-tooltip-arrow>span{right:auto;left:20px}.revisions-tooltip,.revisions-tooltip-arrow>span{border:1px solid #dcdcde;background-color:#fff}.revisions-tooltip{display:none}.arrow{width:70px;height:16px;overflow:hidden;position:absolute;right:0;margin-right:-35px;bottom:90px;z-index:10000}.arrow:after{z-index:9999;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.arrow.top{top:-16px;bottom:auto}.arrow.left{right:20%}.arrow:after{content:"";position:absolute;right:20px;top:-20px;width:25px;height:25px;transform:rotate(-45deg)}.revisions-tooltip,.revisions-tooltip-arrow:after{border-width:1px;border-style:solid}div.revisions-controls>.wp-slider>.ui-slider-handle{margin-right:-10px}.rtl div.revisions-controls>.wp-slider>.ui-slider-handle{margin-left:-10px}.wp-slider.ui-slider{position:relative;border:1px solid #dcdcde;text-align:right;cursor:pointer}.wp-slider .ui-slider-handle{border-radius:50%;height:18px;margin-top:-5px;outline:0;padding:2px;position:absolute;width:18px;z-index:2;touch-action:none}.wp-slider .ui-slider-handle,.wp-slider .ui-slider-handle.focus{background:#f6f7f7;border:1px solid #c3c4c7;box-shadow:0 1px 0 #c3c4c7}.wp-slider .ui-slider-handle.ui-state-hover,.wp-slider .ui-slider-handle:hover{background:#f6f7f7;border-color:#8c8f94}.wp-slider .ui-slider-handle.ui-state-active,.wp-slider .ui-slider-handle:active{background:#f0f0f1;border-color:#8c8f94;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.wp-slider .ui-slider-handle:before{background:0 0;position:absolute;top:2px;right:2px;color:#50575e;content:"\f229";font:normal 18px/1 dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-slider .ui-slider-handle.ui-state-hover:before,.wp-slider .ui-slider-handle:hover:before{color:#1d2327}.wp-slider .ui-slider-handle.from-handle:before,.wp-slider .ui-slider-handle.to-handle:before{font-size:20px!important;margin:-1px -1px 0 0}.wp-slider .ui-slider-handle.from-handle:before{content:"\f141"}.wp-slider .ui-slider-handle.to-handle:before{content:"\f139"}.rtl .wp-slider .ui-slider-handle.from-handle:before{content:"\f139"}.rtl .wp-slider .ui-slider-handle.to-handle:before{content:"\f141";left:-1px}.wp-slider .ui-slider-range{position:absolute;font-size:.7em;display:block;border:0;background-color:transparent;background-image:none}.wp-slider.ui-slider-horizontal{height:.7em}.wp-slider.ui-slider-horizontal .ui-slider-handle{top:-.25em;margin-right:-.6em}.wp-slider.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.wp-slider.ui-slider-horizontal .ui-slider-range-min{right:0}.wp-slider.ui-slider-horizontal .ui-slider-range-max{left:0}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.revision-tick.completed-false{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){#diff-next-revision,#diff-previous-revision{margin-top:-1em}.revisions-buttons{overflow:hidden;margin-bottom:15px}.comparing-two-revisions .revisions-controls,.revisions-controls{height:170px}.revisions-tooltip{bottom:130px;z-index:2}.diff-meta{overflow:hidden}table.diff{-ms-word-break:break-all;word-break:break-all;word-wrap:break-word}.diff-meta input.restore-revision{margin-top:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/revisions.css b/tools/storybook/wordpress/css/revisions.css new file mode 100644 index 00000000000..e523ee431ce --- /dev/null +++ b/tools/storybook/wordpress/css/revisions.css @@ -0,0 +1,602 @@ +/*------------------------------------------------------------------------------ + 11.2 - Post Revisions +------------------------------------------------------------------------------*/ +.revisions-control-frame, +.revisions-diff-frame { + position: relative; +} + +.revisions-diff-frame { + top: 10px; +} + +.revisions-controls { + padding-top: 40px; + z-index: 1; +} + +.revisions-controls input[type="checkbox"] { + position: relative; + top: -1px; + vertical-align: text-bottom; +} + +.revisions.pinned .revisions-controls { + position: fixed; + top: 0; + height: 82px; + background: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.revisions-tickmarks { + position: relative; + margin: 0 auto; + height: 0.7em; + top: 7px; + max-width: 70%; + box-sizing: border-box; + background-color: #fff; +} + +.revisions-tickmarks > div { + position: absolute; + height: 100%; + border-left: 1px solid #a7aaad; + box-sizing: border-box; +} + +.revisions-tickmarks > div:first-child { + border-width: 0; +} + +.comparing-two-revisions .revisions-controls { + height: 140px; +} + +.comparing-two-revisions.pinned .revisions-controls { + height: 124px; +} + +.revisions .diff-error { + position: absolute; + text-align: center; + margin: 0 auto; + width: 100%; + display: none; +} + +.revisions.diff-error .diff-error { + display: block; +} + +.revisions .loading-indicator { + position: absolute; + vertical-align: middle; + opacity: 0; + width: 100%; + width: calc( 100% - 30px ); + top: 50%; + top: calc( 50% - 10px ); + transition: opacity 0.5s; +} + +body.folded .revisions .loading-indicator { + margin-left: -32px; +} + +.revisions .loading-indicator span.spinner { + display: block; + margin: 0 auto; + float: none; +} + +.revisions.loading .loading-indicator { + opacity: 1; +} + +.revisions .diff { + transition: opacity 0.5s; +} + +.revisions.loading .diff { + opacity: 0.5; +} + +.revisions.diff-error .diff { + visibility: hidden; +} + +.revisions-meta { + margin-top: 20px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.revisions.pinned .revisions-meta { + box-shadow: none; +} + +.revision-toggle-compare-mode { + position: absolute; + top: 0; + right: 0; +} + +.comparing-two-revisions .revisions-previous, +.comparing-two-revisions .revisions-next, +.revisions-meta .diff-meta-to strong { + display: none; +} + +.revisions-controls .author-card .date { + color: #646970; +} + +.revisions-controls .author-card.autosave { + color: #d63638; +} + +.revisions-controls .author-card .author-name { + font-weight: 600; +} + +.comparing-two-revisions .diff-meta-to strong { + display: block; +} + +.revisions.pinned .revisions-buttons { + padding: 0 11px; +} + +.revisions-previous, +.revisions-next { + position: relative; + z-index: 1; +} + +.revisions-previous { + float: left; +} + +.revisions-next { + float: right; +} + +.revisions-controls .wp-slider { + max-width: 70%; + margin: 0 auto; + top: -3px; +} + +.revisions-diff { + padding: 15px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.revisions-diff h3:first-child { + margin-top: 0; +} + +/* Revision meta box */ +.post-revisions li img, +#revisions-meta-restored img { + vertical-align: middle; +} + +table.diff { + table-layout: fixed; + width: 100%; + white-space: pre-wrap; +} + +table.diff col.content { + width: auto; +} + +table.diff col.content.diffsplit { + width: 48%; +} + +table.diff col.diffsplit.middle { + width: auto; +} + +table.diff col.ltype { + width: 30px; +} + +table.diff tr { + background-color: transparent; +} + +table.diff td, +table.diff th { + font-family: Consolas, Monaco, monospace; + font-size: 14px; + line-height: 1.57142857; + padding: 0.5em 0.5em 0.5em 2em; + vertical-align: top; + word-wrap: break-word; +} + +table.diff td h1, +table.diff td h2, +table.diff td h3, +table.diff td h4, +table.diff td h5, +table.diff td h6 { + margin: 0; +} + +table.diff .diff-deletedline del, +table.diff .diff-addedline ins { + text-decoration: none; +} + +table.diff .diff-deletedline { + position: relative; + background-color: #fcf0f1; +} + +table.diff .diff-deletedline del { + background-color: #ffabaf; +} + +table.diff .diff-addedline { + position: relative; + background-color: #edfaef; +} + +table.diff .diff-deletedline .dashicons, +table.diff .diff-addedline .dashicons { + position: absolute; + top: 0.85714286em; + left: 0.5em; + width: 1em; + height: 1em; + font-size: 1em; + line-height: 1; +} + +table.diff .diff-addedline .dashicons { + /* Compensate the vertically non-centered plus glyph. */ + top: 0.92857143em; +} + +table.diff .diff-addedline ins { + background-color: #68de7c; +} + +.diff-meta { + padding: 5px; + clear: both; + min-height: 32px; +} + +.diff-title strong { + line-height: 2.46153846; + min-width: 60px; + text-align: right; + float: left; + margin-right: 5px; +} + +.revisions-controls .author-card .author-info { + font-size: 12px; + line-height: 1.33333333; +} + +.revisions-controls .author-card .avatar, +.revisions-controls .author-card .author-info { + float: left; + margin-left: 6px; + margin-right: 6px; +} + +.revisions-controls .author-card .byline { + display: block; + font-size: 12px; +} + +.revisions-controls .author-card .avatar { + vertical-align: middle; +} + +.diff-meta input.restore-revision { + float: right; + margin-left: 6px; + margin-right: 6px; + margin-top: 2px; +} + +.diff-meta-from { + display: none; +} + +.comparing-two-revisions .diff-meta-from { + display: block; +} + +.revisions-tooltip { + position: absolute; + bottom: 105px; + margin-right: 0; + margin-left: -69px; + z-index: 0; + max-width: 350px; + min-width: 130px; + padding: 8px 4px; + display: none; + opacity: 0; +} + +.revisions-tooltip.flipped { + margin-left: 0; + margin-right: -70px; +} + +.revisions.pinned .revisions-tooltip { + display: none !important; +} + +.comparing-two-revisions .revisions-tooltip { + bottom: 145px; +} + +.revisions-tooltip-arrow { + width: 70px; + height: 15px; + overflow: hidden; + position: absolute; + left: 0; + margin-left: 35px; + bottom: -15px; +} + +.revisions-tooltip.flipped .revisions-tooltip-arrow { + margin-left: 0; + margin-right: 35px; + left: auto; + right: 0; +} + +.revisions-tooltip-arrow > span { + content: ""; + position: absolute; + left: 20px; + top: -20px; + width: 25px; + height: 25px; + transform: rotate(45deg); +} + +.revisions-tooltip.flipped .revisions-tooltip-arrow > span { + left: auto; + right: 20px; +} + +.revisions-tooltip, +.revisions-tooltip-arrow > span { + border: 1px solid #dcdcde; + background-color: #fff; +} + +.revisions-tooltip { + display: none; +} + +.arrow { + width: 70px; + height: 16px; + overflow: hidden; + position: absolute; + left: 0; + margin-left: -35px; + bottom: 90px; + z-index: 10000; +} + +.arrow:after { + z-index: 9999; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.arrow.top { + top: -16px; + bottom: auto; +} + +.arrow.left { + left: 20%; +} + +.arrow:after { + content: ""; + position: absolute; + left: 20px; + top: -20px; + width: 25px; + height: 25px; + transform: rotate(45deg); +} + +.revisions-tooltip, +.revisions-tooltip-arrow:after { + border-width: 1px; + border-style: solid; +} + +div.revisions-controls > .wp-slider > .ui-slider-handle { + margin-left: -10px; +} + +.rtl div.revisions-controls > .wp-slider > .ui-slider-handle { + margin-right: -10px; +} + +/* jQuery UI Slider */ +.wp-slider.ui-slider { + position: relative; + border: 1px solid #dcdcde; + text-align: left; + cursor: pointer; +} + +.wp-slider .ui-slider-handle { + border-radius: 50%; + height: 18px; + margin-top: -5px; + outline: none; + padding: 2px; + position: absolute; + width: 18px; + z-index: 2; + touch-action: none; +} + +.wp-slider .ui-slider-handle, +.wp-slider .ui-slider-handle.focus { + background: #f6f7f7; + border: 1px solid #c3c4c7; + box-shadow: 0 1px 0 #c3c4c7; +} + +.wp-slider .ui-slider-handle:hover, +.wp-slider .ui-slider-handle.ui-state-hover { + background: #f6f7f7; + border-color: #8c8f94; +} + +.wp-slider .ui-slider-handle:active, +.wp-slider .ui-slider-handle.ui-state-active { + background: #f0f0f1; + border-color: #8c8f94; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + transform: translateY(1px); +} + +.wp-slider .ui-slider-handle:before { + background: none; + position: absolute; + top: 2px; + left: 2px; + color: #50575e; + content: "\f229"; + font: normal 18px/1 dashicons; + speak: never; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wp-slider .ui-slider-handle:hover:before, +.wp-slider .ui-slider-handle.ui-state-hover:before { + color: #1d2327; +} + +.wp-slider .ui-slider-handle.from-handle:before, +.wp-slider .ui-slider-handle.to-handle:before { + font-size: 20px !important; + margin: -1px 0 0 -1px; +} + +.wp-slider .ui-slider-handle.from-handle:before { + content: "\f139"; +} + +.wp-slider .ui-slider-handle.to-handle:before { + content: "\f141"; +} + +.rtl .wp-slider .ui-slider-handle.from-handle:before { + content: "\f141"; +} + +.rtl .wp-slider .ui-slider-handle.to-handle:before { + content: "\f139"; + right: -1px; +} + +.wp-slider .ui-slider-range { + position: absolute; + font-size: 0.7em; + display: block; + border: 0; + background-color: transparent; + background-image: none; +} + +.wp-slider.ui-slider-horizontal { + height: 0.7em; +} + +.wp-slider.ui-slider-horizontal .ui-slider-handle { + top: -.25em; + margin-left: -.6em; +} + +.wp-slider.ui-slider-horizontal .ui-slider-range { + top: 0; + height: 100%; +} + +.wp-slider.ui-slider-horizontal .ui-slider-range-min { + left: 0; +} + +.wp-slider.ui-slider-horizontal .ui-slider-range-max { + right: 0; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + .revision-tick.completed-false { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + #diff-next-revision, + #diff-previous-revision { + margin-top: -1em; + } + + .revisions-buttons { + overflow: hidden; + margin-bottom: 15px; + } + + .revisions-controls, + .comparing-two-revisions .revisions-controls { + height: 170px; + } + + .revisions-tooltip { + bottom: 130px; + z-index: 2; + } + + .diff-meta { + overflow: hidden; + } + + table.diff { + -ms-word-break: break-all; + word-break: break-all; + word-wrap: break-word; + } + + .diff-meta input.restore-revision { + margin-top: 0; + } +} diff --git a/tools/storybook/wordpress/css/revisions.min.css b/tools/storybook/wordpress/css/revisions.min.css new file mode 100644 index 00000000000..07cdf1db01c --- /dev/null +++ b/tools/storybook/wordpress/css/revisions.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.revisions-control-frame,.revisions-diff-frame{position:relative}.revisions-diff-frame{top:10px}.revisions-controls{padding-top:40px;z-index:1}.revisions-controls input[type=checkbox]{position:relative;top:-1px;vertical-align:text-bottom}.revisions.pinned .revisions-controls{position:fixed;top:0;height:82px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.revisions-tickmarks{position:relative;margin:0 auto;height:.7em;top:7px;max-width:70%;box-sizing:border-box;background-color:#fff}.revisions-tickmarks>div{position:absolute;height:100%;border-left:1px solid #a7aaad;box-sizing:border-box}.revisions-tickmarks>div:first-child{border-width:0}.comparing-two-revisions .revisions-controls{height:140px}.comparing-two-revisions.pinned .revisions-controls{height:124px}.revisions .diff-error{position:absolute;text-align:center;margin:0 auto;width:100%;display:none}.revisions.diff-error .diff-error{display:block}.revisions .loading-indicator{position:absolute;vertical-align:middle;opacity:0;width:100%;width:calc(100% - 30px);top:50%;top:calc(50% - 10px);transition:opacity .5s}body.folded .revisions .loading-indicator{margin-left:-32px}.revisions .loading-indicator span.spinner{display:block;margin:0 auto;float:none}.revisions.loading .loading-indicator{opacity:1}.revisions .diff{transition:opacity .5s}.revisions.loading .diff{opacity:.5}.revisions.diff-error .diff{visibility:hidden}.revisions-meta{margin-top:20px;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}.revisions.pinned .revisions-meta{box-shadow:none}.revision-toggle-compare-mode{position:absolute;top:0;right:0}.comparing-two-revisions .revisions-next,.comparing-two-revisions .revisions-previous,.revisions-meta .diff-meta-to strong{display:none}.revisions-controls .author-card .date{color:#646970}.revisions-controls .author-card.autosave{color:#d63638}.revisions-controls .author-card .author-name{font-weight:600}.comparing-two-revisions .diff-meta-to strong{display:block}.revisions.pinned .revisions-buttons{padding:0 11px}.revisions-next,.revisions-previous{position:relative;z-index:1}.revisions-previous{float:left}.revisions-next{float:right}.revisions-controls .wp-slider{max-width:70%;margin:0 auto;top:-3px}.revisions-diff{padding:15px;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.revisions-diff h3:first-child{margin-top:0}#revisions-meta-restored img,.post-revisions li img{vertical-align:middle}table.diff{table-layout:fixed;width:100%;white-space:pre-wrap}table.diff col.content{width:auto}table.diff col.content.diffsplit{width:48%}table.diff col.diffsplit.middle{width:auto}table.diff col.ltype{width:30px}table.diff tr{background-color:transparent}table.diff td,table.diff th{font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.57142857;padding:.5em .5em .5em 2em;vertical-align:top;word-wrap:break-word}table.diff td h1,table.diff td h2,table.diff td h3,table.diff td h4,table.diff td h5,table.diff td h6{margin:0}table.diff .diff-addedline ins,table.diff .diff-deletedline del{text-decoration:none}table.diff .diff-deletedline{position:relative;background-color:#fcf0f1}table.diff .diff-deletedline del{background-color:#ffabaf}table.diff .diff-addedline{position:relative;background-color:#edfaef}table.diff .diff-addedline .dashicons,table.diff .diff-deletedline .dashicons{position:absolute;top:.85714286em;left:.5em;width:1em;height:1em;font-size:1em;line-height:1}table.diff .diff-addedline .dashicons{top:.92857143em}table.diff .diff-addedline ins{background-color:#68de7c}.diff-meta{padding:5px;clear:both;min-height:32px}.diff-title strong{line-height:2.46153846;min-width:60px;text-align:right;float:left;margin-right:5px}.revisions-controls .author-card .author-info{font-size:12px;line-height:1.33333333}.revisions-controls .author-card .author-info,.revisions-controls .author-card .avatar{float:left;margin-left:6px;margin-right:6px}.revisions-controls .author-card .byline{display:block;font-size:12px}.revisions-controls .author-card .avatar{vertical-align:middle}.diff-meta input.restore-revision{float:right;margin-left:6px;margin-right:6px;margin-top:2px}.diff-meta-from{display:none}.comparing-two-revisions .diff-meta-from{display:block}.revisions-tooltip{position:absolute;bottom:105px;margin-right:0;margin-left:-69px;z-index:0;max-width:350px;min-width:130px;padding:8px 4px;display:none;opacity:0}.revisions-tooltip.flipped{margin-left:0;margin-right:-70px}.revisions.pinned .revisions-tooltip{display:none!important}.comparing-two-revisions .revisions-tooltip{bottom:145px}.revisions-tooltip-arrow{width:70px;height:15px;overflow:hidden;position:absolute;left:0;margin-left:35px;bottom:-15px}.revisions-tooltip.flipped .revisions-tooltip-arrow{margin-left:0;margin-right:35px;left:auto;right:0}.revisions-tooltip-arrow>span{content:"";position:absolute;left:20px;top:-20px;width:25px;height:25px;transform:rotate(45deg)}.revisions-tooltip.flipped .revisions-tooltip-arrow>span{left:auto;right:20px}.revisions-tooltip,.revisions-tooltip-arrow>span{border:1px solid #dcdcde;background-color:#fff}.revisions-tooltip{display:none}.arrow{width:70px;height:16px;overflow:hidden;position:absolute;left:0;margin-left:-35px;bottom:90px;z-index:10000}.arrow:after{z-index:9999;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.arrow.top{top:-16px;bottom:auto}.arrow.left{left:20%}.arrow:after{content:"";position:absolute;left:20px;top:-20px;width:25px;height:25px;transform:rotate(45deg)}.revisions-tooltip,.revisions-tooltip-arrow:after{border-width:1px;border-style:solid}div.revisions-controls>.wp-slider>.ui-slider-handle{margin-left:-10px}.rtl div.revisions-controls>.wp-slider>.ui-slider-handle{margin-right:-10px}.wp-slider.ui-slider{position:relative;border:1px solid #dcdcde;text-align:left;cursor:pointer}.wp-slider .ui-slider-handle{border-radius:50%;height:18px;margin-top:-5px;outline:0;padding:2px;position:absolute;width:18px;z-index:2;touch-action:none}.wp-slider .ui-slider-handle,.wp-slider .ui-slider-handle.focus{background:#f6f7f7;border:1px solid #c3c4c7;box-shadow:0 1px 0 #c3c4c7}.wp-slider .ui-slider-handle.ui-state-hover,.wp-slider .ui-slider-handle:hover{background:#f6f7f7;border-color:#8c8f94}.wp-slider .ui-slider-handle.ui-state-active,.wp-slider .ui-slider-handle:active{background:#f0f0f1;border-color:#8c8f94;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.wp-slider .ui-slider-handle:before{background:0 0;position:absolute;top:2px;left:2px;color:#50575e;content:"\f229";font:normal 18px/1 dashicons;speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-slider .ui-slider-handle.ui-state-hover:before,.wp-slider .ui-slider-handle:hover:before{color:#1d2327}.wp-slider .ui-slider-handle.from-handle:before,.wp-slider .ui-slider-handle.to-handle:before{font-size:20px!important;margin:-1px 0 0 -1px}.wp-slider .ui-slider-handle.from-handle:before{content:"\f139"}.wp-slider .ui-slider-handle.to-handle:before{content:"\f141"}.rtl .wp-slider .ui-slider-handle.from-handle:before{content:"\f141"}.rtl .wp-slider .ui-slider-handle.to-handle:before{content:"\f139";right:-1px}.wp-slider .ui-slider-range{position:absolute;font-size:.7em;display:block;border:0;background-color:transparent;background-image:none}.wp-slider.ui-slider-horizontal{height:.7em}.wp-slider.ui-slider-horizontal .ui-slider-handle{top:-.25em;margin-left:-.6em}.wp-slider.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.wp-slider.ui-slider-horizontal .ui-slider-range-min{left:0}.wp-slider.ui-slider-horizontal .ui-slider-range-max{right:0}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.revision-tick.completed-false{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){#diff-next-revision,#diff-previous-revision{margin-top:-1em}.revisions-buttons{overflow:hidden;margin-bottom:15px}.comparing-two-revisions .revisions-controls,.revisions-controls{height:170px}.revisions-tooltip{bottom:130px;z-index:2}.diff-meta{overflow:hidden}table.diff{-ms-word-break:break-all;word-break:break-all;word-wrap:break-word}.diff-meta input.restore-revision{margin-top:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/site-health-rtl.css b/tools/storybook/wordpress/css/site-health-rtl.css new file mode 100644 index 00000000000..ccfff2a515e --- /dev/null +++ b/tools/storybook/wordpress/css/site-health-rtl.css @@ -0,0 +1,360 @@ +/*! This file is auto-generated */ +/* Note: Any Site Health selectors that use +duplicate styling from the Privacy settings screen +are styled in the Privacy section of edit.css */ + +.health-check-body h2 { + line-height: 1.4; +} + +.health-check-body h3 { + padding: 0; + font-weight: 400; +} + +.health-check-widget-title-section { + text-align: center; +} + +.site-health-progress-wrapper { + margin-bottom: 1rem; +} + +.site-health-progress { + display: inline-block; + height: 20px; + width: 20px; + margin: 0; + border-radius: 100%; + position: relative; + font-weight: 600; + font-size: 0.4rem; +} + +.site-health-progress-count { + position: absolute; + display: block; + height: 80px; + width: 80px; + right: 50%; + top: 50%; + margin-top: -40px; + margin-right: -40px; + border-radius: 100%; + line-height: 6.3; + font-size: 2em; +} + +.loading .site-health-progress svg #bar { + stroke-dashoffset: 0; + stroke: #c3c4c7; + animation: loadingPulse 3s infinite ease-in-out; +} + +.site-health-progress svg circle { + stroke-dashoffset: 0; + transition: stroke-dashoffset 1s linear; + stroke: #c3c4c7; + stroke-width: 2em; +} + +.site-health-progress svg #bar { + stroke-dashoffset: 565; + stroke: #d63638; +} + +.green .site-health-progress #bar { + stroke: #00a32a; +} +.green .site-health-progress .site-health-progress-label { + color: #00a32a; +} + +.orange .site-health-progress #bar { + stroke: #dba617; +} +.orange .site-health-progress .site-health-progress-label { + color: #dba617; +} + +.site-health-progress-label { + font-weight: 600; + line-height: 20px; + margin-right: 0.3rem; +} + +@keyframes loadingPulse { + 0% { + stroke: #c3c4c7; + } + 50% { + stroke: #72aee6; + } + 100% { + stroke: #c3c4c7; + } +} + +.health-check-tabs-wrapper { + /* IE 11 */ + display: -ms-inline-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr; + vertical-align: top; + /* modern browsers */ + display: inline-grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.health-check-tabs-wrapper.tab-count-1 { + grid-template-columns: 1fr; +} +.health-check-tabs-wrapper.tab-count-2 { + grid-template-columns: 1fr 1fr; +} +.health-check-tabs-wrapper.tab-count-3 { + grid-template-columns: 1fr 1fr 1fr; +} + +.health-check-tab { + display: block; /* IE 11 */ + text-decoration: none; + color: inherit; + padding: 0.5rem 1rem 1rem; + margin: 0 1rem; + transition: box-shadow 0.5s ease-in-out; +} + +.health-check-offscreen-nav-wrapper { + position: relative; + background: transparent; + border: none; +} +.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { + right: initial; +} + +.health-check-offscreen-nav { + display: none; + position: absolute; + padding-top: 10px; + left: 0; + top: 100%; + width: 13rem; +} +.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { + display: inline-block; +} +.health-check-offscreen-nav:before { + position: absolute; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 5px; + border-color: transparent transparent #ffffff; + left: 20px; + top: 5px; +} + +.health-check-offscreen-nav .health-check-tab { + background: #fff; + box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); +} + +.health-check-offscreen-nav .health-check-tab.active { + box-shadow: inset -3px 0 #3582c4; + font-weight: 600; +} + +.health-check-body { + max-width: 800px; + margin: 0 auto; +} + +.health-check-table td:first-child { + width: 30%; +} + +.health-check-table td { + width: 70%; +} + +.health-check-table ul, +.health-check-table ol { + margin: 0; +} + +.health-check-body li { + line-height: 1.5; +} + +.health-check-body .pass::before, +.health-check-body .good::before { + content: "\f147"; + color: #00a32a; +} + +.health-check-body .warning::before { + content: "\f460"; + color: #dba617; +} + +.health-check-body .info::before { + content: "\f348"; + color: #72aee6; +} + +.health-check-body .fail::before, +.health-check-body .error::before { + content: "\f335"; + color: #d63638; +} + +.site-health-copy-buttons { + margin: 1rem 0; +} + +.site-health-copy-buttons .copy-button-wrapper { + display: inline-flex; + align-items: center; + margin: 0.5rem 0 1rem; +} + +.site-health-copy-buttons .success { + color: #008a20; + margin-right: 0.5rem; +} + +.site-status-has-issues.hide { + display: none; +} + +.site-health-view-more { + text-align: center; +} + +.site-health-issues-wrapper:first-of-type { + margin-top: 3rem; +} + +.site-health-issues-wrapper { + margin-bottom: 3rem; + margin-top: 2rem; +} + +.site-status-all-clear { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + height: 100%; + width: 100%; + margin: 0 0 3rem; +} + +@media all and (min-width: 784px) { + .site-status-all-clear { + margin: 2rem 0 5rem; + } +} + +.site-status-all-clear.hide { + display: none; +} + +.site-status-all-clear .dashicons { + font-size: 150px; + height: 150px; + margin-bottom: 2rem; + width: 150px; +} + +.site-status-all-clear .encouragement { + font-size: 1.5rem; + font-weight: 600; +} + +.site-status-all-clear p { + margin: 0; +} + +.wp-core-ui .button.site-health-view-passed { + position: relative; + padding-left: 40px; + padding-right: 20px; +} + + +/* Better position for the WordPress admin notices and update nag. */ +.site-health .notice { + margin: 5px 22px 15px 20px; +} + +.site-health .update-nag { + margin-bottom: 20px; + margin-right: 22px; +} + +.health-check-wp-paths-sizes.spinner { + visibility: visible; + float: none; + margin: 0 4px; + flex-shrink: 0; +} + +/* Styling unique to the dashboard widget. */ +#dashboard_site_health .site-health-details { + padding-right: 16px; +} + +#dashboard_site_health .health-check-widget { + display: grid; + grid-template-columns: 1fr 2fr; + grid-auto-rows: minmax(64px, auto); + column-gap: 16px; + align-items: center; +} +#dashboard_site_health .site-health-progress-label { + margin-right: 0; +} + +@media screen and (max-width: 480px) { + #dashboard_site_health .health-check-widget { + grid-template-columns: 100%; + } +} + +@media screen and (max-width: 782px) { + + .site-health-issues-wrapper .health-check-accordion-trigger { + flex-direction: column; + align-items: flex-start; + } + + .health-check-accordion-trigger .badge { + margin: 1em 0 0; + } + + .health-check-table { + table-layout: fixed; + } + + .health-check-table td { + box-sizing: border-box; + display: block; + width: 100%; + word-wrap: break-word; + } + + .health-check-table td:first-child { + width: 100%; + padding-bottom: 0; + font-weight: 600; + } + + .wp-core-ui .site-health-copy-buttons .copy-button { + margin-bottom: 0; + } +} + diff --git a/tools/storybook/wordpress/css/site-health-rtl.min.css b/tools/storybook/wordpress/css/site-health-rtl.min.css new file mode 100644 index 00000000000..852814b4dcf --- /dev/null +++ b/tools/storybook/wordpress/css/site-health-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.health-check-body h2{line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-widget-title-section{text-align:center}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;right:50%;top:50%;margin-top:-40px;margin-right:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#c3c4c7;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#c3c4c7;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#d63638}.green .site-health-progress #bar{stroke:#00a32a}.green .site-health-progress .site-health-progress-label{color:#00a32a}.orange .site-health-progress #bar{stroke:#dba617}.orange .site-health-progress .site-health-progress-label{color:#dba617}.site-health-progress-label{font-weight:600;line-height:20px;margin-right:.3rem}@keyframes loadingPulse{0%{stroke:#c3c4c7}50%{stroke:#72aee6}100%{stroke:#c3c4c7}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr 1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr 1fr 1fr}.health-check-tabs-wrapper.tab-count-1{grid-template-columns:1fr}.health-check-tabs-wrapper.tab-count-2{grid-template-columns:1fr 1fr}.health-check-tabs-wrapper.tab-count-3{grid-template-columns:1fr 1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-offscreen-nav-wrapper{position:relative;background:0 0;border:none}.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav{right:initial}.health-check-offscreen-nav{display:none;position:absolute;padding-top:10px;left:0;top:100%;width:13rem}.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav{display:inline-block}.health-check-offscreen-nav:before{position:absolute;content:"";width:0;height:0;border-style:solid;border-width:0 10px 5px;border-color:transparent transparent #fff;left:20px;top:5px}.health-check-offscreen-nav .health-check-tab{background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.75)}.health-check-offscreen-nav .health-check-tab.active{box-shadow:inset -3px 0 #3582c4;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#00a32a}.health-check-body .warning::before{content:"\f460";color:#dba617}.health-check-body .info::before{content:"\f348";color:#72aee6}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#d63638}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#008a20;margin-right:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin:0 0 3rem}@media all and (min-width:784px){.site-status-all-clear{margin:2rem 0 5rem}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:150px;margin-bottom:2rem;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.wp-core-ui .button.site-health-view-passed{position:relative;padding-left:40px;padding-right:20px}.site-health .notice{margin:5px 22px 15px 20px}.site-health .update-nag{margin-bottom:20px;margin-right:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}#dashboard_site_health .site-health-details{padding-right:16px}#dashboard_site_health .health-check-widget{display:grid;grid-template-columns:1fr 2fr;grid-auto-rows:minmax(64px,auto);column-gap:16px;align-items:center}#dashboard_site_health .site-health-progress-label{margin-right:0}@media screen and (max-width:480px){#dashboard_site_health .health-check-widget{grid-template-columns:100%}}@media screen and (max-width:782px){.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/site-health.css b/tools/storybook/wordpress/css/site-health.css new file mode 100644 index 00000000000..ed539d33ae2 --- /dev/null +++ b/tools/storybook/wordpress/css/site-health.css @@ -0,0 +1,359 @@ +/* Note: Any Site Health selectors that use +duplicate styling from the Privacy settings screen +are styled in the Privacy section of edit.css */ + +.health-check-body h2 { + line-height: 1.4; +} + +.health-check-body h3 { + padding: 0; + font-weight: 400; +} + +.health-check-widget-title-section { + text-align: center; +} + +.site-health-progress-wrapper { + margin-bottom: 1rem; +} + +.site-health-progress { + display: inline-block; + height: 20px; + width: 20px; + margin: 0; + border-radius: 100%; + position: relative; + font-weight: 600; + font-size: 0.4rem; +} + +.site-health-progress-count { + position: absolute; + display: block; + height: 80px; + width: 80px; + left: 50%; + top: 50%; + margin-top: -40px; + margin-left: -40px; + border-radius: 100%; + line-height: 6.3; + font-size: 2em; +} + +.loading .site-health-progress svg #bar { + stroke-dashoffset: 0; + stroke: #c3c4c7; + animation: loadingPulse 3s infinite ease-in-out; +} + +.site-health-progress svg circle { + stroke-dashoffset: 0; + transition: stroke-dashoffset 1s linear; + stroke: #c3c4c7; + stroke-width: 2em; +} + +.site-health-progress svg #bar { + stroke-dashoffset: 565; + stroke: #d63638; +} + +.green .site-health-progress #bar { + stroke: #00a32a; +} +.green .site-health-progress .site-health-progress-label { + color: #00a32a; +} + +.orange .site-health-progress #bar { + stroke: #dba617; +} +.orange .site-health-progress .site-health-progress-label { + color: #dba617; +} + +.site-health-progress-label { + font-weight: 600; + line-height: 20px; + margin-left: 0.3rem; +} + +@keyframes loadingPulse { + 0% { + stroke: #c3c4c7; + } + 50% { + stroke: #72aee6; + } + 100% { + stroke: #c3c4c7; + } +} + +.health-check-tabs-wrapper { + /* IE 11 */ + display: -ms-inline-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr; + vertical-align: top; + /* modern browsers */ + display: inline-grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.health-check-tabs-wrapper.tab-count-1 { + grid-template-columns: 1fr; +} +.health-check-tabs-wrapper.tab-count-2 { + grid-template-columns: 1fr 1fr; +} +.health-check-tabs-wrapper.tab-count-3 { + grid-template-columns: 1fr 1fr 1fr; +} + +.health-check-tab { + display: block; /* IE 11 */ + text-decoration: none; + color: inherit; + padding: 0.5rem 1rem 1rem; + margin: 0 1rem; + transition: box-shadow 0.5s ease-in-out; +} + +.health-check-offscreen-nav-wrapper { + position: relative; + background: transparent; + border: none; +} +.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { + left: initial; +} + +.health-check-offscreen-nav { + display: none; + position: absolute; + padding-top: 10px; + right: 0; + top: 100%; + width: 13rem; +} +.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { + display: inline-block; +} +.health-check-offscreen-nav:before { + position: absolute; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 5px; + border-color: transparent transparent #ffffff; + right: 20px; + top: 5px; +} + +.health-check-offscreen-nav .health-check-tab { + background: #fff; + box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); +} + +.health-check-offscreen-nav .health-check-tab.active { + box-shadow: inset 3px 0 #3582c4; + font-weight: 600; +} + +.health-check-body { + max-width: 800px; + margin: 0 auto; +} + +.health-check-table td:first-child { + width: 30%; +} + +.health-check-table td { + width: 70%; +} + +.health-check-table ul, +.health-check-table ol { + margin: 0; +} + +.health-check-body li { + line-height: 1.5; +} + +.health-check-body .pass::before, +.health-check-body .good::before { + content: "\f147"; + color: #00a32a; +} + +.health-check-body .warning::before { + content: "\f460"; + color: #dba617; +} + +.health-check-body .info::before { + content: "\f348"; + color: #72aee6; +} + +.health-check-body .fail::before, +.health-check-body .error::before { + content: "\f335"; + color: #d63638; +} + +.site-health-copy-buttons { + margin: 1rem 0; +} + +.site-health-copy-buttons .copy-button-wrapper { + display: inline-flex; + align-items: center; + margin: 0.5rem 0 1rem; +} + +.site-health-copy-buttons .success { + color: #008a20; + margin-left: 0.5rem; +} + +.site-status-has-issues.hide { + display: none; +} + +.site-health-view-more { + text-align: center; +} + +.site-health-issues-wrapper:first-of-type { + margin-top: 3rem; +} + +.site-health-issues-wrapper { + margin-bottom: 3rem; + margin-top: 2rem; +} + +.site-status-all-clear { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + height: 100%; + width: 100%; + margin: 0 0 3rem; +} + +@media all and (min-width: 784px) { + .site-status-all-clear { + margin: 2rem 0 5rem; + } +} + +.site-status-all-clear.hide { + display: none; +} + +.site-status-all-clear .dashicons { + font-size: 150px; + height: 150px; + margin-bottom: 2rem; + width: 150px; +} + +.site-status-all-clear .encouragement { + font-size: 1.5rem; + font-weight: 600; +} + +.site-status-all-clear p { + margin: 0; +} + +.wp-core-ui .button.site-health-view-passed { + position: relative; + padding-right: 40px; + padding-left: 20px; +} + + +/* Better position for the WordPress admin notices and update nag. */ +.site-health .notice { + margin: 5px 20px 15px 22px; +} + +.site-health .update-nag { + margin-bottom: 20px; + margin-left: 22px; +} + +.health-check-wp-paths-sizes.spinner { + visibility: visible; + float: none; + margin: 0 4px; + flex-shrink: 0; +} + +/* Styling unique to the dashboard widget. */ +#dashboard_site_health .site-health-details { + padding-left: 16px; +} + +#dashboard_site_health .health-check-widget { + display: grid; + grid-template-columns: 1fr 2fr; + grid-auto-rows: minmax(64px, auto); + column-gap: 16px; + align-items: center; +} +#dashboard_site_health .site-health-progress-label { + margin-left: 0; +} + +@media screen and (max-width: 480px) { + #dashboard_site_health .health-check-widget { + grid-template-columns: 100%; + } +} + +@media screen and (max-width: 782px) { + + .site-health-issues-wrapper .health-check-accordion-trigger { + flex-direction: column; + align-items: flex-start; + } + + .health-check-accordion-trigger .badge { + margin: 1em 0 0; + } + + .health-check-table { + table-layout: fixed; + } + + .health-check-table td { + box-sizing: border-box; + display: block; + width: 100%; + word-wrap: break-word; + } + + .health-check-table td:first-child { + width: 100%; + padding-bottom: 0; + font-weight: 600; + } + + .wp-core-ui .site-health-copy-buttons .copy-button { + margin-bottom: 0; + } +} + diff --git a/tools/storybook/wordpress/css/site-health.min.css b/tools/storybook/wordpress/css/site-health.min.css new file mode 100644 index 00000000000..f8b08a3a72e --- /dev/null +++ b/tools/storybook/wordpress/css/site-health.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.health-check-body h2{line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-widget-title-section{text-align:center}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;left:50%;top:50%;margin-top:-40px;margin-left:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#c3c4c7;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#c3c4c7;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#d63638}.green .site-health-progress #bar{stroke:#00a32a}.green .site-health-progress .site-health-progress-label{color:#00a32a}.orange .site-health-progress #bar{stroke:#dba617}.orange .site-health-progress .site-health-progress-label{color:#dba617}.site-health-progress-label{font-weight:600;line-height:20px;margin-left:.3rem}@keyframes loadingPulse{0%{stroke:#c3c4c7}50%{stroke:#72aee6}100%{stroke:#c3c4c7}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr 1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr 1fr 1fr}.health-check-tabs-wrapper.tab-count-1{grid-template-columns:1fr}.health-check-tabs-wrapper.tab-count-2{grid-template-columns:1fr 1fr}.health-check-tabs-wrapper.tab-count-3{grid-template-columns:1fr 1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-offscreen-nav-wrapper{position:relative;background:0 0;border:none}.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav{left:initial}.health-check-offscreen-nav{display:none;position:absolute;padding-top:10px;right:0;top:100%;width:13rem}.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav{display:inline-block}.health-check-offscreen-nav:before{position:absolute;content:"";width:0;height:0;border-style:solid;border-width:0 10px 5px;border-color:transparent transparent #fff;right:20px;top:5px}.health-check-offscreen-nav .health-check-tab{background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.75)}.health-check-offscreen-nav .health-check-tab.active{box-shadow:inset 3px 0 #3582c4;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#00a32a}.health-check-body .warning::before{content:"\f460";color:#dba617}.health-check-body .info::before{content:"\f348";color:#72aee6}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#d63638}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#008a20;margin-left:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin:0 0 3rem}@media all and (min-width:784px){.site-status-all-clear{margin:2rem 0 5rem}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:150px;margin-bottom:2rem;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.wp-core-ui .button.site-health-view-passed{position:relative;padding-right:40px;padding-left:20px}.site-health .notice{margin:5px 20px 15px 22px}.site-health .update-nag{margin-bottom:20px;margin-left:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}#dashboard_site_health .site-health-details{padding-left:16px}#dashboard_site_health .health-check-widget{display:grid;grid-template-columns:1fr 2fr;grid-auto-rows:minmax(64px,auto);column-gap:16px;align-items:center}#dashboard_site_health .site-health-progress-label{margin-left:0}@media screen and (max-width:480px){#dashboard_site_health .health-check-widget{grid-template-columns:100%}}@media screen and (max-width:782px){.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/site-icon-rtl.css b/tools/storybook/wordpress/css/site-icon-rtl.css new file mode 100644 index 00000000000..06293b92e2d --- /dev/null +++ b/tools/storybook/wordpress/css/site-icon-rtl.css @@ -0,0 +1,55 @@ +/*! This file is auto-generated */ +/*------------------------------------------------------------------------------ + 28.0 - Site Icon +------------------------------------------------------------------------------*/ + +.site-icon-preview .favicon-preview { + margin: 5px 0 20px; + overflow: hidden; + position: relative; + max-width: 180px; +} + +.site-icon-preview .favicon, +.site-icon-preview .browser-title { + height: 16px; + right: 88px; + overflow: hidden; + position: absolute; + top: 16px; +} + +.site-icon-preview .favicon { + width: 16px; +} + +.site-icon-preview .browser-title { + right: 109px; + width: 72px; + white-space: nowrap; +} + +.site-icon-preview .app-icon-preview { + background-color: #000; + border-radius: 16px; + height: 64px; + overflow: hidden; + width: 64px; + margin-top: 5px; +} + +/* rtl:ignore */ +.site-icon-preview .favicon, +.site-icon-preview .app-icon-preview { + direction: ltr; +} + +.customize-control-site_icon .favicon-preview { + float: right; + margin-left: 12px; + margin-bottom: 0; +} + +.customize-control-site_icon .app-icon-preview { + margin-top: 9px; +} diff --git a/tools/storybook/wordpress/css/site-icon-rtl.min.css b/tools/storybook/wordpress/css/site-icon-rtl.min.css new file mode 100644 index 00000000000..901a1eb6525 --- /dev/null +++ b/tools/storybook/wordpress/css/site-icon-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;right:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{right:109px;width:72px;white-space:nowrap}.site-icon-preview .app-icon-preview{background-color:#000;border-radius:16px;height:64px;overflow:hidden;width:64px;margin-top:5px}.site-icon-preview .app-icon-preview,.site-icon-preview .favicon{direction:ltr}.customize-control-site_icon .favicon-preview{float:right;margin-left:12px;margin-bottom:0}.customize-control-site_icon .app-icon-preview{margin-top:9px} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/site-icon.css b/tools/storybook/wordpress/css/site-icon.css new file mode 100644 index 00000000000..eae9a576357 --- /dev/null +++ b/tools/storybook/wordpress/css/site-icon.css @@ -0,0 +1,54 @@ +/*------------------------------------------------------------------------------ + 28.0 - Site Icon +------------------------------------------------------------------------------*/ + +.site-icon-preview .favicon-preview { + margin: 5px 0 20px; + overflow: hidden; + position: relative; + max-width: 180px; +} + +.site-icon-preview .favicon, +.site-icon-preview .browser-title { + height: 16px; + left: 88px; + overflow: hidden; + position: absolute; + top: 16px; +} + +.site-icon-preview .favicon { + width: 16px; +} + +.site-icon-preview .browser-title { + left: 109px; + width: 72px; + white-space: nowrap; +} + +.site-icon-preview .app-icon-preview { + background-color: #000; + border-radius: 16px; + height: 64px; + overflow: hidden; + width: 64px; + margin-top: 5px; +} + +/* rtl:ignore */ +.site-icon-preview .favicon, +.site-icon-preview .app-icon-preview { + direction: ltr; +} + +.customize-control-site_icon .favicon-preview { + float: left; + margin-right: 12px; + margin-bottom: 0; +} + +.customize-control-site_icon .app-icon-preview { + margin-top: 9px; +} diff --git a/tools/storybook/wordpress/css/site-icon.min.css b/tools/storybook/wordpress/css/site-icon.min.css new file mode 100644 index 00000000000..5287d07f955 --- /dev/null +++ b/tools/storybook/wordpress/css/site-icon.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;left:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{left:109px;width:72px;white-space:nowrap}.site-icon-preview .app-icon-preview{background-color:#000;border-radius:16px;height:64px;overflow:hidden;width:64px;margin-top:5px}.site-icon-preview .app-icon-preview,.site-icon-preview .favicon{direction:ltr}.customize-control-site_icon .favicon-preview{float:left;margin-right:12px;margin-bottom:0}.customize-control-site_icon .app-icon-preview{margin-top:9px} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/themes-rtl.css b/tools/storybook/wordpress/css/themes-rtl.css new file mode 100644 index 00000000000..4e847251c9c --- /dev/null +++ b/tools/storybook/wordpress/css/themes-rtl.css @@ -0,0 +1,2005 @@ +/*! This file is auto-generated */ +/*------------------------------------------------------------------------------ + 16.0 - Themes +------------------------------------------------------------------------------*/ + + +/*------------------------------------------------------------------------------ + 16.1 - Manage Themes +------------------------------------------------------------------------------*/ + +.themes-php { + overflow-y: scroll; +} + +body.js .theme-browser.search-loading { + display: none; +} + +.theme-browser .themes { + clear: both; +} + +.themes-php:not(.network-admin) .wrap h1 { + margin-bottom: 15px; +} + +.themes-php .wrap h1 .button { + margin-right: 20px; +} + +/* Search form */ +.themes-php .search-form { + display: inline; +} + +.themes-php .wp-filter-search { + position: relative; + top: -2px; + right: 20px; + margin: 0; + width: 280px; +} + +/* Position admin messages */ +.theme .notice, +.theme .notice.is-dismissible { + right: 0; + margin: 0; + position: absolute; + left: 0; + top: 0; +} + +/** + * Main theme element + * (has flexible margins) + */ +.theme-browser .theme { + cursor: pointer; + float: right; + margin: 0 0 4% 4%; + position: relative; + width: 30.6%; + border: 1px solid #dcdcde; + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + box-sizing: border-box; +} + +.theme-browser .theme:nth-child(3n) { + margin-left: 0; +} + +.theme-browser .theme:hover, +.theme-browser .theme.focus { + cursor: pointer; +} + +.theme-browser .theme .theme-name { + font-size: 15px; + font-weight: 600; + height: 18px; + margin: 0; + padding: 15px; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + background: #fff; + background: rgba(255, 255, 255, 0.65); +} + +/* Activate and Customize buttons, shown on hover and focus */ +.theme-browser .theme .theme-actions { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + opacity: 0; + transition: opacity 0.1s ease-in-out; + height: auto; + background: rgba(246, 247, 247, 0.7); + border-right: 1px solid rgba(0, 0, 0, 0.05); +} + +.theme-browser .theme:hover .theme-actions, +.theme-browser .theme.focus .theme-actions { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} + +.theme-browser .theme .theme-actions .button-primary { + margin-left: 3px; +} + +.theme-browser .theme .theme-actions .button { + float: none; + margin-right: 3px; +} + +/** + * Theme Screenshot + * + * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size + * It is also responsive. + */ +.theme-browser .theme .theme-screenshot { + display: block; + overflow: hidden; + position: relative; + -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */ + transition: opacity 0.2s ease-in-out; +} + +.theme-browser .theme .theme-screenshot:after { + content: ""; + display: block; + padding-top: 66.66666%; /* using a 3/2 aspect ratio */ +} + +.theme-browser .theme .theme-screenshot img { + height: auto; + position: absolute; + right: 0; + top: 0; + width: 100%; + transition: opacity 0.2s ease-in-out; +} + +.theme-browser .theme:hover .theme-screenshot, +.theme-browser .theme.focus .theme-screenshot { + background: #fff; +} + +.theme-browser.rendered .theme:hover .theme-screenshot img, +.theme-browser.rendered .theme.focus .theme-screenshot img { + opacity: 0.4; +} + +.theme-browser .theme .more-details { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + opacity: 0; + position: absolute; + top: 35%; + left: 20%; + right: 20%; + width: 60%; + background: #1d2327; + background: rgba(0, 0, 0, 0.7); + color: #fff; + font-size: 15px; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); + -webkit-font-smoothing: antialiased; + font-weight: 600; + padding: 15px 12px; + text-align: center; + border-radius: 3px; + border: none; + transition: opacity 0.1s ease-in-out; + cursor: pointer; +} + +.theme-browser .theme .more-details:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1; +} + +.theme-browser .theme.focus { + border-color: #4f94d4; + box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); +} + +.theme-browser .theme.focus .more-details { + opacity: 1; +} + +/* Current theme needs to have its action always on view */ +.theme-browser .theme.active.focus .theme-actions { + display: block; +} + +.theme-browser.rendered .theme:hover .more-details, +.theme-browser.rendered .theme.focus .more-details { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} + +/** + * The currently active theme + */ +.theme-browser .theme.active .theme-name { + background: #1d2327; + color: #fff; + padding-left: 110px; + font-weight: 300; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); +} + +.theme-browser .customize-control .theme.active .theme-name { + padding-left: 15px; +} + +.theme-browser .theme.active .theme-name span { + font-weight: 600; +} + +.theme-browser .theme.active .theme-actions { + background: rgba(44, 51, 56, 0.7); + border-right: none; + opacity: 1; +} + +.theme-id-container { + position: relative; +} + +.theme-browser .theme.active .theme-actions, +.theme-browser .theme .theme-actions { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + padding: 9px 15px; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); +} + +.theme-browser .theme.active .theme-actions .button-primary { + margin-left: 0; +} + +.theme-browser .theme .theme-author { + background: #1d2327; + color: #f0f0f1; + display: none; + font-size: 14px; + margin: 0 10px; + padding: 5px 10px; + position: absolute; + bottom: 56px; +} + +.theme-browser .theme.display-author .theme-author { + display: block; +} + +.theme-browser .theme.display-author .theme-author a { + color: inherit; +} + +/** + * Add new theme + */ +.theme-browser .theme.add-new-theme { + border: none; + box-shadow: none; +} + +.theme-browser .theme.add-new-theme a { + text-decoration: none; + display: block; + position: relative; + z-index: 1; +} + +.theme-browser .theme.add-new-theme a:after { + display: block; + content: ""; + background: transparent; + background: rgba(0, 0, 0, 0); + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + padding: 0; + text-shadow: none; + border: 5px dashed #dcdcde; + border: 5px dashed rgba(0, 0, 0, 0.1); + box-sizing: border-box; +} + +.theme-browser .theme.add-new-theme span:after { + background: #dcdcde; + background: rgba(140, 143, 148, 0.1); + border-radius: 50%; + display: inline-block; + content: "\f132"; + -webkit-font-smoothing: antialiased; + font: normal 74px/115px dashicons; + width: 100px; + height: 100px; + vertical-align: middle; + text-align: center; + color: #8c8f94; + position: absolute; + top: 30%; + right: 50%; + margin-right: -50px; + text-indent: -4px; + padding: 0; + text-shadow: none; + z-index: 4; +} + +.rtl .theme-browser .theme.add-new-theme span:after { + text-indent: 4px; +} + +.theme-browser .theme.add-new-theme a:hover .theme-screenshot, +.theme-browser .theme.add-new-theme a:focus .theme-screenshot { + background: none; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + background: #fff; + color: #2271b1; +} + +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + border-color: transparent; + color: #fff; + background: #2271b1; + content: ""; +} + +.theme-browser .theme.add-new-theme .theme-name { + background: none; + text-align: center; + box-shadow: none; + font-weight: 400; + position: relative; + top: 0; + margin-top: -18px; + padding-top: 0; + padding-bottom: 48px; +} + +.theme-browser .theme.add-new-theme a:hover .theme-name, +.theme-browser .theme.add-new-theme a:focus .theme-name { + color: #fff; + z-index: 2; +} + +/** + * Theme Overlay + * Shown when clicking a theme + */ +.theme-overlay .theme-backdrop { + position: absolute; + right: -20px; + left: 0; + top: 0; + bottom: 0; + background: #f0f0f1; + background: rgba(240, 240, 241, 0.9); + z-index: 10000; /* Over WP Pointers. */ +} + +.theme-overlay .theme-header { + position: absolute; + top: 0; + right: 0; + left: 0; + height: 48px; + border-bottom: 1px solid #dcdcde; +} + +.theme-overlay .theme-header button { + padding: 0; +} + +.theme-overlay .theme-header .close { + cursor: pointer; + height: 48px; + width: 50px; + text-align: center; + float: left; + border: 0; + border-right: 1px solid #dcdcde; + background-color: transparent; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.theme-overlay .theme-header .close:before { + font: normal 22px/50px dashicons !important; + color: #787c82; + display: inline-block; + content: "\f335"; + font-weight: 300; +} + +/* Left and right navigation */ +.theme-overlay .theme-header .right, +.theme-overlay .theme-header .left { + cursor: pointer; + color: #787c82; + background-color: transparent; + height: 48px; + width: 54px; + float: right; + text-align: center; + border: 0; + border-left: 1px solid #dcdcde; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.theme-overlay .theme-header .close:focus, +.theme-overlay .theme-header .close:hover, +.theme-overlay .theme-header .right:focus, +.theme-overlay .theme-header .right:hover, +.theme-overlay .theme-header .left:focus, +.theme-overlay .theme-header .left:hover { + background: #dcdcde; + border-color: #c3c4c7; + color: #000; +} + +.theme-overlay .theme-header .close:focus:before, +.theme-overlay .theme-header .close:hover:before { + color: #000; +} + +.theme-overlay .theme-header .close:focus, +.theme-overlay .theme-header .right:focus, +.theme-overlay .theme-header .left:focus { + box-shadow: none; + outline: none; +} + +.theme-overlay .theme-header .left.disabled, +.theme-overlay .theme-header .right.disabled, +.theme-overlay .theme-header .left.disabled:hover, +.theme-overlay .theme-header .right.disabled:hover { + color: #c3c4c7; + background: inherit; + cursor: inherit; +} + +.theme-overlay .theme-header .right:before, +.theme-overlay .theme-header .left:before { + font: normal 20px/50px dashicons !important; + display: inline; + font-weight: 300; +} + +.theme-overlay .theme-header .left:before { + content: "\f345"; +} + +.theme-overlay .theme-header .right:before { + content: "\f341"; +} + +.theme-overlay .theme-wrap { + clear: both; + position: fixed; + top: 9%; + right: 190px; + left: 30px; + bottom: 3%; + background: #fff; + box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); + z-index: 10000; /* Over WP Pointers. */ + box-sizing: border-box; + -webkit-overflow-scrolling: touch; +} + +body.folded .theme-browser ~ .theme-overlay .theme-wrap { + right: 70px; +} + +.theme-overlay .theme-about { + position: absolute; + top: 49px; + bottom: 57px; + right: 0; + left: 0; + overflow: auto; + padding: 2% 4%; +} + +.theme-overlay .theme-actions { + position: absolute; + text-align: center; + bottom: 0; + right: 0; + left: 0; + padding: 10px 25px 5px; + background: #f6f7f7; + z-index: 30; + box-sizing: border-box; + border-top: 1px solid #f0f0f1; +} + +.theme-overlay .theme-actions a { + margin-left: 5px; + margin-bottom: 5px; +} + +/* Hide-if-customize for items we can't add classes to */ +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"], +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] { + display: none; +} + +.broken-themes a.delete-theme, +.theme-overlay .theme-actions .delete-theme { + color: #d63638; + text-decoration: none; + border-color: transparent; + box-shadow: none; + background: transparent; +} + +.theme-overlay .theme-actions .delete-theme { + position: absolute; + left: 10px; + bottom: 5px; +} + +.broken-themes a.delete-theme:hover, +.broken-themes a.delete-theme:focus, +.theme-overlay .theme-actions .delete-theme:hover, +.theme-overlay .theme-actions .delete-theme:focus { + background: #d63638; + color: #fff; + border-color: #d63638; +} + +.theme-overlay .theme-actions .active-theme, +.theme-overlay.active .theme-actions .inactive-theme { + display: none; +} + +.theme-overlay .theme-actions .inactive-theme, +.theme-overlay.active .theme-actions .active-theme { + display: block; +} + +/** + * Theme Screenshots gallery + */ +.theme-overlay .theme-screenshots { + float: right; + margin: 0 0 0 30px; + width: 55%; + max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */ + text-align: center; +} + +/* First screenshot, shown big */ +.theme-overlay .screenshot { + border: 1px solid #fff; + box-sizing: border-box; + overflow: hidden; + position: relative; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); +} + +.theme-overlay .screenshot:after { + content: ""; + display: block; + padding-top: 75%; /* using a 4/3 aspect ratio */ +} + +.theme-overlay .screenshot img { + height: auto; + position: absolute; + right: 0; + top: 0; + width: 100%; +} +/* Handles old 300px screenshots */ +.theme-overlay.small-screenshot .theme-screenshots { + position: absolute; + width: 302px; +} +.theme-overlay.small-screenshot .theme-info { + margin-right: 350px; + width: auto; +} + +/* Other screenshots, shown small and square */ +.theme-overlay .screenshot.thumb { + background: #c3c4c7; + border: 1px solid #f0f0f1; + float: none; + display: inline-block; + margin: 10px 5px 0; + width: 140px; + height: 80px; + cursor: pointer; +} + +.theme-overlay .screenshot.thumb:after { + content: ""; + display: block; + padding-top: 100%; /* using a 1/1 aspect ratio */ +} + +.theme-overlay .screenshot.thumb img { + cursor: pointer; + height: auto; + position: absolute; + right: 0; + top: 0; + width: 100%; + height: auto; +} + +.theme-overlay .screenshot.selected { + background: transparent; + border: 2px solid #72aee6; +} + +.theme-overlay .screenshot.selected img { + opacity: 0.8; +} + +/* No screenshot placeholder */ +.theme-browser .theme .theme-screenshot.blank, +.theme-overlay .screenshot.blank { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); +} + +/** + * Theme heading information + */ +.theme-overlay .theme-info { + width: 40%; + float: right; +} + +.theme-overlay .current-label { + background: #2c3338; + color: #fff; + font-size: 11px; + display: inline-block; + padding: 2px 8px; + border-radius: 2px; + margin: 0 0 -10px; + -webkit-user-select: none; + user-select: none; +} + +.theme-overlay .theme-name { + color: #1d2327; + font-size: 32px; + font-weight: 100; + margin: 10px 0 0; + line-height: 1.3; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.theme-overlay .theme-version { + color: #646970; + font-size: 13px; + font-weight: 400; + float: none; + display: inline-block; + margin-right: 10px; +} + +.theme-overlay .theme-author { + margin: 15px 0 25px; + color: #646970; + font-size: 16px; + font-weight: 400; + line-height: inherit; +} + +.theme-overlay .toggle-auto-update { + /* Better align spin icon and text. */ + display: inline-flex; + align-items: center; + /* Prevents content after the auto-update toggler from jumping down and up. */ + min-height: 20px; /* Same height as the spinning dashicon. */ + vertical-align: top; +} + +.theme-overlay .theme-autoupdate .toggle-auto-update { + text-decoration: none; +} + +.theme-overlay .theme-autoupdate .toggle-auto-update .label { + text-decoration: underline; +} + +.theme-overlay .theme-description { + color: #50575e; + font-size: 15px; + font-weight: 400; + line-height: 1.5; + margin: 30px 0 0; +} + +.theme-overlay .theme-tags { + border-top: 3px solid #f0f0f1; + color: #646970; + font-size: 13px; + font-weight: 400; + margin: 30px 0 0; + padding-top: 20px; +} + +.theme-overlay .theme-tags span { + color: #3c434a; + font-weight: 600; + margin-left: 5px; +} + +.theme-overlay .parent-theme { + background: #fff; + border: 1px solid #f0f0f1; + border-right: 4px solid #72aee6; + font-size: 14px; + font-weight: 400; + margin-top: 30px; + padding: 10px 20px 10px 10px; +} + +.theme-overlay .parent-theme strong { + font-weight: 600; +} + +/** + * Single Theme Mode + * Displays detailed view inline when a user has no switch capabilities + */ +.single-theme .theme-overlay .theme-backdrop, +.single-theme .theme-overlay .theme-header, +.single-theme .theme { + display: none; +} + +.single-theme .theme-overlay .theme-wrap { + clear: both; + min-height: 330px; + position: relative; + right: auto; + left: auto; + top: auto; + bottom: auto; + z-index: 10; +} + +.single-theme .theme-overlay .theme-about { + padding: 30px 30px 70px; + position: static; +} + +.single-theme .theme-overlay .theme-actions { + position: absolute; +} + +/** + * Basic Responsive structure... + * + * Shuffles theme columns around based on screen width + */ + +@media only screen and (min-width: 2000px) { + #wpwrap .theme-browser .theme { + width: 17.6%; + margin: 0 0 3% 3%; + } + + #wpwrap .theme-browser .theme:nth-child(3n), + #wpwrap .theme-browser .theme:nth-child(4n) { + margin-left: 3%; + } + + #wpwrap .theme-browser .theme:nth-child(5n) { + margin-left: 0; + } +} + +@media only screen and (min-width: 1680px) { + .theme-overlay .theme-wrap { + width: 1450px; + margin: 0 auto; + } +} + +/* Maximum screenshot width reaches 440px */ +@media only screen and (min-width: 1640px) { + .theme-browser .theme { + width: 22.7%; + margin: 0 0 3% 3%; + } + .theme-browser .theme .theme-screenshot:after { + padding-top: 75%; /* using a 4/3 aspect ratio */ + } + + .theme-browser .theme:nth-child(3n) { + margin-left: 3%; + } + + .theme-browser .theme:nth-child(4n) { + margin-left: 0; + } +} +/* Maximum screenshot width reaches 440px */ +@media only screen and (max-width: 1120px) { + .theme-browser .theme { + width: 47.5%; + margin-left: 0; + } + + .theme-browser .theme:nth-child(even) { + margin-left: 0; + } + + .theme-browser .theme:nth-child(odd) { + margin-left: 5%; + } +} + +/* Admin menu is folded */ +@media only screen and (max-width: 960px) { + .theme-overlay .theme-wrap { + right: 65px; + } +} + +@media only screen and (max-width: 780px) { + body.folded .theme-overlay .theme-wrap, + .theme-overlay .theme-wrap { + top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */ + left: 0; + bottom: 0; + right: 0; + padding: 70px 20px 20px; + border: none; + z-index: 100000; /* should overlap #wpadminbar. */ + position: fixed; + } + + .theme-browser .theme.active .theme-name span { + /* Hide the "Active: " label on smaller screens. */ + display: none; + } + + .theme-overlay .theme-screenshots { + width: 40%; + } + + .theme-overlay .theme-info { + width: 50%; + } + .single-theme .theme-wrap { + padding: 10px; + } + + .theme-browser .theme .theme-actions { + padding: 5px 10px 4px; + } + + .theme-overlay.small-screenshot .theme-screenshots { + position: static; + float: none; + max-width: 302px; + } + + .theme-overlay.small-screenshot .theme-info { + margin-right: 0; + width: auto; + } + + .theme:not(.active):hover .theme-actions, + .theme:not(.active):focus .theme-actions, + .theme:hover .more-details, + .theme.focus .more-details { + display: none; + } + + .theme-browser.rendered .theme:hover .theme-screenshot img, + .theme-browser.rendered .theme.focus .theme-screenshot img { + opacity: 1.0; + } +} + +@media only screen and (max-width: 480px) { + .theme-browser .theme { + width: 100%; + margin-left: 0; + } + + .theme-browser .theme:nth-child(2n), + .theme-browser .theme:nth-child(3n) { + margin-left: 0; + } + + .theme-overlay .theme-about { + bottom: 105px; + } + + .theme-overlay .theme-actions { + padding-right: 4%; + padding-left: 4%; + } +} + +@media only screen and (max-width: 650px) { + .theme-overlay .theme-description { + margin-right: 0; + } + + .theme-overlay .theme-actions .delete-theme { + position: relative; + left: auto; + bottom: auto; + } + + .theme-overlay .theme-actions .inactive-theme { + display: inline; + } + + .theme-overlay .theme-screenshots { + width: 100%; + float: none; + } + + .theme-overlay .theme-info { + width: 100%; + } + + .theme-overlay .theme-author { + margin: 5px 0 15px; + } + + .theme-overlay .current-label { + margin-top: 10px; + font-size: 13px; + } + + .themes-php .wp-filter-search { + float: none; + clear: both; + right: 0; + left: 0; + margin: -5px 0 20px; + width: 100%; + max-width: 280px; + } + + .theme-browser .theme.add-new-theme span:after { + font: normal 60px/90px dashicons; + width: 80px; + height: 80px; + top: 30%; + right: 50%; + text-indent: 0; + margin-right: -40px; + } + + .single-theme .theme-wrap { + margin: 0 -10px 0 -12px; + padding: 10px; + } + .single-theme .theme-overlay .theme-about { + padding: 10px; + overflow: visible; + } + .single-theme .current-label { + display: none; + } + .single-theme .theme-overlay .theme-actions { + position: static; + } +} + +.broken-themes { + clear: both; +} + +.broken-themes table { + text-align: right; + width: 50%; + border-spacing: 3px; + padding: 3px; +} + + +/*------------------------------------------------------------------------------ + 16.2 - Install Themes +------------------------------------------------------------------------------*/ + +.update-php .wrap { + max-width: 40rem; +} + +/* Already installed theme */ +.theme-browser .theme .theme-installed { + background: #2271b1; +} + +.theme-browser .theme .notice-success p:before { + color: #68de7c; + content: "\f147"; + display: inline-block; + font: normal 20px/1 'dashicons'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.theme-install.updated-message:before { + content: ""; +} + +.theme-install-php .wp-filter { + padding-right: 20px; +} + +.theme-install-php a.upload, +.theme-install-php a.browse-themes { + cursor: pointer; +} + +.upload-view-toggle .browse, +.plugin-install-tab-upload .upload-view-toggle .upload { + display: none; +} + +.plugin-install-tab-upload .upload-view-toggle .browse { + display: inline; +} + +.upload-theme, +.upload-plugin { + box-sizing: border-box; + display: none; + margin: 0; + padding: 50px 0; + width: 100%; + overflow: hidden; + position: relative; + top: 10px; + text-align: center; +} + +.show-upload-view .upload-theme, +.show-upload-view .upload-plugin, +.show-upload-view .upload-plugin-wrap, +.plugin-install-tab-upload .upload-plugin { + display: block; +} + +.upload-theme .wp-upload-form, +.upload-plugin .wp-upload-form { + background: #f6f7f7; + border: 1px solid #c3c4c7; + padding: 30px; + margin: 30px auto; + display: inline-flex; + justify-content: space-between; + align-items: center; +} + +.upload-theme .wp-upload-form input[type="file"], +.upload-plugin .wp-upload-form input[type="file"] { + margin-left: 10px; +} + +.upload-theme .install-help, +.upload-plugin .install-help { + color: #50575e; /* #f1f1f1 background */ + font-size: 18px; + font-style: normal; + margin: 0; + padding: 0; + text-align: center; +} + +p.no-themes, +p.no-themes-local { + clear: both; + color: #646970; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0; + text-align: center; + display: none; +} + +.no-results p.no-themes { + display: block; +} + +.theme-install-php .add-new-theme { + display: none !important; +} + +@media only screen and (max-width: 1120px) { + .upload-theme .wp-upload-form { + margin: 20px 0; + max-width: 100%; + } + .upload-theme .install-help { + font-size: 15px; + padding: 20px 0 0; + } +} + +.theme-details .theme-rating { + line-height: 1.9; +} + +.theme-details .star-rating { + display: inline; +} + +.theme-details .num-ratings, +.theme-details .no-rating { + font-size: 11px; + color: #646970; +} + +.theme-details .no-rating { + display: block; + line-height: 1.9; +} + +.update-from-upload-comparison { + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #dcdcde; + text-align: right; + margin: 1rem 0 1.4rem; + border-collapse: collapse; + width: 100%; +} + +.update-from-upload-comparison tr:last-child td { + height: 1.4rem; + vertical-align: top; +} + +.update-from-upload-comparison tr:first-child th { + font-weight: bold; + height: 1.4rem; + vertical-align: bottom; +} + +.update-from-upload-comparison td.name-label { + text-align: left; +} + +.update-from-upload-comparison td, +.update-from-upload-comparison th { + padding: 0.4rem 1.4rem; +} + +.update-from-upload-comparison td.warning { + color: #d63638; +} + +.update-from-upload-actions { + margin-top: 1.4rem; +} + +/*------------------------------------------------------------------------------ + 16.3 - Custom Header Screen +------------------------------------------------------------------------------*/ + +.appearance_page_custom-header #headimg { + border: 1px solid #dcdcde; + overflow: hidden; + width: 100%; +} + +.appearance_page_custom-header #upload-form p label { + font-size: 12px; +} + +.appearance_page_custom-header .available-headers .default-header { + float: right; + margin: 0 0 20px 20px; +} + +.appearance_page_custom-header .random-header { + clear: both; + margin: 0 0 20px 20px; + vertical-align: middle; +} + +.appearance_page_custom-header .available-headers label input, +.appearance_page_custom-header .random-header label input { + margin-left: 10px; +} + +.appearance_page_custom-header .available-headers label img { + vertical-align: middle; +} + + +/*------------------------------------------------------------------------------ + 16.4 - Custom Background Screen +------------------------------------------------------------------------------*/ + +div#custom-background-image { + min-height: 100px; + border: 1px solid #dcdcde; +} + +div#custom-background-image img { + max-width: 400px; + max-height: 300px; +} + +.background-position-control input[type="radio"]:checked ~ .button { + background: #f0f0f1; + border-color: #8c8f94; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + z-index: 1; +} + +.background-position-control input[type="radio"]:focus ~ .button { + border-color: #4f94d4; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(34, 113, 177, 0.8); + color: #1d2327; +} + +.background-position-control .background-position-center-icon, +.background-position-control .background-position-center-icon:before { + display: inline-block; + line-height: 1; + text-align: center; + transition: background-color .1s ease-in; +} + +.background-position-control .background-position-center-icon { + height: 20px; + margin-top: 13px; + vertical-align: top; + width: 20px; +} + +.background-position-control .background-position-center-icon:before { + background-color: #50575e; + border-radius: 50%; + content: ""; + height: 12px; + width: 12px; +} + +.background-position-control .button:hover .background-position-center-icon:before, +.background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before { + background-color: #1d2327; +} + +.background-position-control .button-group { + display: block; +} + +.background-position-control .button-group .button { + border-radius: 0; + box-shadow: none; + /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ + height: 40px !important; + line-height: 2.9 !important; + margin: 0 0 0 -1px !important; + padding: 0 10px 1px !important; + position: relative; +} + +.background-position-control .button-group .button:active, +.background-position-control .button-group .button:hover, +.background-position-control .button-group .button:focus { + z-index: 1; +} + +.background-position-control .button-group:last-child .button { + box-shadow: 0 1px 0 #c3c4c7; +} + +.background-position-control .button-group > label { + margin: 0 !important; +} + +.background-position-control .button-group:first-child > label:first-child .button { + border-radius: 0 3px 0 0; +} + +.background-position-control .button-group:first-child > label:first-child .dashicons { + transform: rotate( -45deg ); +} + +.background-position-control .button-group:first-child > label:last-child .button { + border-radius: 3px 0 0 0; +} + +.background-position-control .button-group:first-child > label:last-child .dashicons { + transform: rotate( 45deg ); +} + +.background-position-control .button-group:last-child > label:first-child .button { + border-radius: 0 0 3px 0; +} + +.background-position-control .button-group:last-child > label:first-child .dashicons { + transform: rotate( 45deg ); +} + +.background-position-control .button-group:last-child > label:last-child .button { + border-radius: 0 0 0 3px; +} + +.background-position-control .button-group:last-child > label:last-child .dashicons { + transform: rotate( -45deg ); +} + +.background-position-control .button-group .dashicons { + margin-top: 9px; +} + +.background-position-control .button-group + .button-group { + margin-top: -1px; +} + +/*------------------------------------------------------------------------------ + 23.0 - Full Overlay w/ Sidebar +------------------------------------------------------------------------------*/ + +body.full-overlay-active { + overflow: hidden; + /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */ + visibility: hidden; +} + +.wp-full-overlay { + background: transparent; + z-index: 500000; + position: fixed; + overflow: visible; + top: 0; + bottom: 0; + right: 0; + left: 0; + height: 100%; + min-width: 0; +} + +.wp-full-overlay-sidebar { + box-sizing: border-box; + position: fixed; + min-width: 300px; + max-width: 600px; + width: 18%; + height: 100%; + top: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + z-index: 10; + background: #f0f0f1; + border-left: none; +} + +.wp-full-overlay.collapsed .wp-full-overlay-sidebar { + overflow: visible; +} + +.wp-full-overlay.collapsed, +.wp-full-overlay.expanded .wp-full-overlay-sidebar { + margin-right: 0 !important; +} + +.wp-full-overlay.expanded { + margin-right: 300px; +} + +.wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-right: -300px; +} + +@media screen and (min-width: 1667px) { + .wp-full-overlay.expanded { + margin-right: 18%; + } + + .wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-right: -18%; + } +} + +@media screen and (min-width: 3333px) { + .wp-full-overlay.expanded { + margin-right: 600px; + } + + .wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-right: -600px; + } +} + +.wp-full-overlay-sidebar:after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 3px; + z-index: 1000; +} + +.wp-full-overlay-main { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + height: 100%; +} + +.wp-full-overlay-sidebar .wp-full-overlay-header { + position: absolute; + right: 0; + left: 0; + height: 45px; + padding: 0 15px; + line-height: 3.2; + z-index: 10; + margin: 0; + border-top: none; + box-shadow: none; +} + +.wp-full-overlay-sidebar .wp-full-overlay-header a.back { + margin-top: 9px; +} + +.wp-full-overlay-sidebar .wp-full-overlay-footer { + bottom: 0; + border-bottom: none; + border-top: none; + box-shadow: none; +} + +.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { + position: absolute; + top: 45px; + bottom: 45px; + right: 0; + left: 0; + overflow: auto; +} + +/* Close & Navigation Links */ +.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header { + padding: 0; +} + +.theme-install-overlay .close-full-overlay, +.theme-install-overlay .previous-theme, +.theme-install-overlay .next-theme { + display: block; + position: relative; + float: right; + width: 45px; + height: 45px; + background: #f0f0f1; + border-left: 1px solid #dcdcde; + color: #3c434a; + cursor: pointer; + text-decoration: none; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.theme-install-overlay .close-full-overlay:hover, +.theme-install-overlay .close-full-overlay:focus, +.theme-install-overlay .previous-theme:hover, +.theme-install-overlay .previous-theme:focus, +.theme-install-overlay .next-theme:hover, +.theme-install-overlay .next-theme:focus { + background: #dcdcde; + border-color: #c3c4c7; + color: #000; + outline: none; + box-shadow: none; +} + +.theme-install-overlay .close-full-overlay:before { + font: normal 22px/1 dashicons; + content: "\f335"; + position: relative; + top: 7px; + right: 13px; +} + +.theme-install-overlay .previous-theme:before { + font: normal 20px/1 dashicons; + content: "\f345"; + position: relative; + top: 6px; + right: 14px; +} + +.theme-install-overlay .next-theme:before { + font: normal 20px/1 dashicons; + content: "\f341"; + position: relative; + top: 6px; + right: 13px; +} + +.theme-install-overlay .previous-theme.disabled, +.theme-install-overlay .next-theme.disabled, +.theme-install-overlay .previous-theme.disabled:hover, +.theme-install-overlay .previous-theme.disabled:focus, +.theme-install-overlay .next-theme.disabled:hover, +.theme-install-overlay .next-theme.disabled:focus { + color: #c3c4c7; + background: #f0f0f1; + cursor: default; + pointer-events: none; +} + +.theme-install-overlay .close-full-overlay, +.theme-install-overlay .previous-theme, +.theme-install-overlay .next-theme { + border-right: 0; + border-top: 0; + border-bottom: 0; +} + +.theme-install-overlay .close-full-overlay:before, +.theme-install-overlay .previous-theme:before, +.theme-install-overlay .next-theme:before { + top: 2px; + right: 0; +} + +/* Collapse Button */ +.wp-core-ui .wp-full-overlay .collapse-sidebar { + position: fixed; + bottom: 0; + right: 0; + padding: 9px 10px 9px 0; + height: 45px; + color: #646970; + outline: 0; + line-height: 1; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; + border-radius: 0 !important; +} + +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #2271b1; +} + +.wp-full-overlay .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar-label { + display: inline-block; + vertical-align: middle; + line-height: 1.6; +} + +.wp-full-overlay .collapse-sidebar-arrow { + width: 20px; + height: 20px; + margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ + border-radius: 50%; + overflow: hidden; +} + +.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.wp-full-overlay .collapse-sidebar-label { + margin-right: 3px; +} + +.wp-full-overlay.collapsed .collapse-sidebar-label { + display: none; +} + +.wp-full-overlay .collapse-sidebar-arrow:before { + display: block; + content: "\f148"; + background: #f0f0f1; + font: normal 20px/1 dashicons; + speak: never; + padding: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar { + padding: 9px 10px; +} + +/* rtl:ignore */ +.wp-full-overlay.collapsed .collapse-sidebar-arrow:before, +.rtl .wp-full-overlay .collapse-sidebar-arrow:before { + transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ +} + +.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { + transform: none; +} + +/* Animations */ +.wp-full-overlay, +.wp-full-overlay-sidebar, +.wp-full-overlay .collapse-sidebar, +.wp-full-overlay-main { + transition-property: right, left, top, bottom, width, margin; + transition-duration: 0.2s; +} + +/* Device/preview size toggles */ + +.wp-full-overlay { + background: #1d2327; +} + +.wp-full-overlay-main { + background-color: #f0f0f1; +} + +.expanded .wp-full-overlay-footer { + position: fixed; + bottom: 0; + right: 0; + min-width: 299px; + max-width: 599px; + width: 18%; + width: calc( 18% - 1px ); + height: 45px; + border-top: 1px solid #dcdcde; + background: #f0f0f1; +} + +.wp-full-overlay-footer .devices-wrapper { + float: left; +} + +.wp-full-overlay-footer .devices { + position: relative; + background: #f0f0f1; + box-shadow: 20px 0 10px -5px #f0f0f1; +} + +.wp-full-overlay-footer .devices button { + cursor: pointer; + background: transparent; + border: none; + height: 45px; + padding: 0 3px; + margin: 0 -4px 0 0; + box-shadow: none; + border-top: 1px solid transparent; + border-bottom: 4px solid transparent; + transition: + .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; +} + +.wp-full-overlay-footer .devices button:focus { + box-shadow: none; + outline: none; +} + +.wp-full-overlay-footer .devices button:before { + display: inline-block; + -webkit-font-smoothing: antialiased; + font: normal 20px/30px "dashicons"; + vertical-align: top; + margin: 3px 0; + padding: 4px 8px; + color: #646970; +} + +.wp-full-overlay-footer .devices button.active { + border-bottom-color: #1d2327; +} + +.wp-full-overlay-footer .devices button:hover, +.wp-full-overlay-footer .devices button:focus { + background-color: #fff; +} + +.wp-full-overlay-footer .devices button:focus, +.wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #2271b1; +} + +.wp-full-overlay-footer .devices button.active:before { + color: #1d2327; +} + +.wp-full-overlay-footer .devices button:hover:before, +.wp-full-overlay-footer .devices button:focus:before { + color: #2271b1; +} + +.wp-full-overlay-footer .devices .preview-desktop:before { + content: "\f472"; +} + +.wp-full-overlay-footer .devices .preview-tablet:before { + content: "\f471"; +} + +.wp-full-overlay-footer .devices .preview-mobile:before { + content: "\f470"; +} + +@media screen and (max-width: 1024px) { + .wp-full-overlay-footer .devices { + display: none; + } +} + +.collapsed .wp-full-overlay-footer .devices button:before { + display: none; +} + +.preview-mobile .wp-full-overlay-main { + margin: auto -160px auto 0; + width: 320px; + height: 480px; + max-height: 100%; + max-width: 100%; + right: 50%; +} + +.preview-tablet .wp-full-overlay-main { + margin: auto -360px auto 0; + width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */ + height: 1080px; + max-height: 100%; + max-width: 100%; + right: 50%; +} + + +/*------------------------------------------------------------------------------ + 24.0 - Customize Loader +------------------------------------------------------------------------------*/ + +.no-customize-support .hide-if-no-customize, +.customize-support .hide-if-customize, +.no-customize-support.wp-core-ui .hide-if-no-customize, +.no-customize-support .wp-core-ui .hide-if-no-customize, +.customize-support.wp-core-ui .hide-if-customize, +.customize-support .wp-core-ui .hide-if-customize { + display: none; +} + +#customize-container, +#customize-controls .notice.notification-overlay { + background: #f0f0f1; + z-index: 500000; + position: fixed; + overflow: visible; + top: 0; + bottom: 0; + right: 0; + left: 0; + height: 100%; +} +#customize-container { + display: none; +} + +/* Make the Customizer and Theme installer overlays the only available content. */ +#customize-container, +.theme-install-overlay { + visibility: visible; +} + +.customize-loading #customize-container iframe { + opacity: 0; +} + +#customize-container iframe, +.theme-install-overlay iframe { + height: 100%; + width: 100vw; + z-index: 20; + transition: opacity 0.3s; +} + +#customize-controls { + margin-top: 0; +} + +.theme-install-overlay { + display: none; +} + +.theme-install-overlay.single-theme { + display: block; +} + +.install-theme-info { + display: none; + padding: 10px 20px 60px; +} + +.single-theme .install-theme-info { + padding-top: 15px; +} + +.theme-install-overlay .install-theme-info { + display: block; +} + +.install-theme-info .theme-install { + float: left; + margin-top: 18px; +} + +.install-theme-info .theme-name { + font-size: 16px; + line-height: 1.5; + margin-bottom: 0; + margin-top: 0; +} + +.install-theme-info .theme-screenshot { + margin: 15px 0; + width: 258px; + border: 1px solid #c3c4c7; + position: relative; + overflow: hidden; +} + +.install-theme-info .theme-screenshot > img { + width: 100%; + height: auto; + position: absolute; + right: 0; + top: 0; +} + +.install-theme-info .theme-screenshot:after { + content: ""; + display: block; + padding-top: 66.66666666%; +} + +.install-theme-info .theme-details { + overflow: hidden; +} + +.theme-details .theme-version { + margin: 15px 0; +} + +.theme-details .theme-description { + float: right; + color: #646970; + line-height: 1.6; + max-width: 100%; +} + +.theme-install-overlay .wp-full-overlay-header .button { + float: left; + margin: 8px 0 0 10px; +} + +.theme-install-overlay .wp-full-overlay-sidebar { + background: #f0f0f1; + border-left: 1px solid #dcdcde; +} + +.theme-install-overlay .wp-full-overlay-sidebar-content { + background: #fff; + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #dcdcde; +} + +.theme-install-overlay .wp-full-overlay-main { + position: absolute; + z-index: 0; + background-color: #f0f0f1; +} + +.customize-loading #customize-container { + background-color: #f0f0f1; +} + +#customize-preview.wp-full-overlay-main:before, +.customize-loading #customize-container:before, +#customize-controls .notice.notification-overlay.notification-loading:before, +.theme-install-overlay .wp-full-overlay-main:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + right: 50%; + top: 50%; + z-index: -1; + margin: -10px -10px 0 0; + transform: translateZ(0); + background: transparent url(../images/spinner.gif) no-repeat center center; + background-size: 20px 20px; +} + +#customize-preview.wp-full-overlay-main.iframe-ready:before, +.theme-install-overlay.iframe-ready .wp-full-overlay-main:before { + background-image: none; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + .wp-full-overlay .collapse-sidebar-arrow { + background-image: url(../images/arrows-2x.png); + background-size: 15px 123px; + } + + #customize-preview.wp-full-overlay-main:before, + .customize-loading #customize-container:before, + #customize-controls .notice.notification-overlay.notification-loading:before, + .theme-install-overlay .wp-full-overlay-main:before { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + .available-theme .action-links .delete-theme { + float: none; + margin: 0; + padding: 0; + clear: both; + } + + .available-theme .action-links .delete-theme a { + padding: 0; + } + + .broken-themes table { + width: 100%; + } + + .theme-install-overlay .wp-full-overlay-header .button { + font-size: 13px; + line-height: 2.15384615; + min-height: 30px; + } + + .theme-browser .theme .theme-actions .button { + margin-bottom: 0; + } + + .theme-browser .theme.active .theme-actions, + .theme-browser .theme .theme-actions { + padding-top: 4px; + padding-bottom: 4px; + } + + .upload-theme .wp-upload-form, + .upload-plugin .wp-upload-form { + display: block; + } +} + +@media aural { + .theme .notice:before, + .theme-info .updating-message:before, + .theme-info .updated-message:before, + .theme-install.updating-message:before { + speak: never; + } +} diff --git a/tools/storybook/wordpress/css/themes-rtl.min.css b/tools/storybook/wordpress/css/themes-rtl.min.css new file mode 100644 index 00000000000..bf1f6540fc4 --- /dev/null +++ b/tools/storybook/wordpress/css/themes-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.themes-php{overflow-y:scroll}body.js .theme-browser.search-loading{display:none}.theme-browser .themes{clear:both}.themes-php:not(.network-admin) .wrap h1{margin-bottom:15px}.themes-php .wrap h1 .button{margin-right:20px}.themes-php .search-form{display:inline}.themes-php .wp-filter-search{position:relative;top:-2px;right:20px;margin:0;width:280px}.theme .notice,.theme .notice.is-dismissible{right:0;margin:0;position:absolute;left:0;top:0}.theme-browser .theme{cursor:pointer;float:right;margin:0 0 4% 4%;position:relative;width:30.6%;border:1px solid #dcdcde;box-shadow:0 1px 1px -1px rgba(0,0,0,.1);box-sizing:border-box}.theme-browser .theme:nth-child(3n){margin-left:0}.theme-browser .theme.focus,.theme-browser .theme:hover{cursor:pointer}.theme-browser .theme .theme-name{font-size:15px;font-weight:600;height:18px;margin:0;padding:15px;box-shadow:inset 0 1px 0 rgba(0,0,0,.1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#fff;background:rgba(255,255,255,.65)}.theme-browser .theme .theme-actions{opacity:0;transition:opacity .1s ease-in-out;height:auto;background:rgba(246,247,247,.7);border-right:1px solid rgba(0,0,0,.05)}.theme-browser .theme.focus .theme-actions,.theme-browser .theme:hover .theme-actions{opacity:1}.theme-browser .theme .theme-actions .button-primary{margin-left:3px}.theme-browser .theme .theme-actions .button{float:none;margin-right:3px}.theme-browser .theme .theme-screenshot{display:block;overflow:hidden;position:relative;-webkit-backface-visibility:hidden;transition:opacity .2s ease-in-out}.theme-browser .theme .theme-screenshot:after{content:"";display:block;padding-top:66.66666%}.theme-browser .theme .theme-screenshot img{height:auto;position:absolute;right:0;top:0;width:100%;transition:opacity .2s ease-in-out}.theme-browser .theme.focus .theme-screenshot,.theme-browser .theme:hover .theme-screenshot{background:#fff}.theme-browser.rendered .theme.focus .theme-screenshot img,.theme-browser.rendered .theme:hover .theme-screenshot img{opacity:.4}.theme-browser .theme .more-details{opacity:0;position:absolute;top:35%;left:20%;right:20%;width:60%;background:#1d2327;background:rgba(0,0,0,.7);color:#fff;font-size:15px;text-shadow:0 1px 0 rgba(0,0,0,.6);-webkit-font-smoothing:antialiased;font-weight:600;padding:15px 12px;text-align:center;border-radius:3px;border:none;transition:opacity .1s ease-in-out;cursor:pointer}.theme-browser .theme .more-details:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #2271b1}.theme-browser .theme.focus{border-color:#4f94d4;box-shadow:0 0 2px rgba(79,148,212,.8)}.theme-browser .theme.focus .more-details{opacity:1}.theme-browser .theme.active.focus .theme-actions{display:block}.theme-browser.rendered .theme.focus .more-details,.theme-browser.rendered .theme:hover .more-details{opacity:1}.theme-browser .theme.active .theme-name{background:#1d2327;color:#fff;padding-left:110px;font-weight:300;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}.theme-browser .customize-control .theme.active .theme-name{padding-left:15px}.theme-browser .theme.active .theme-name span{font-weight:600}.theme-browser .theme.active .theme-actions{background:rgba(44,51,56,.7);border-right:none;opacity:1}.theme-id-container{position:relative}.theme-browser .theme .theme-actions,.theme-browser .theme.active .theme-actions{position:absolute;top:50%;transform:translateY(-50%);left:0;padding:9px 15px;box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}.theme-browser .theme.active .theme-actions .button-primary{margin-left:0}.theme-browser .theme .theme-author{background:#1d2327;color:#f0f0f1;display:none;font-size:14px;margin:0 10px;padding:5px 10px;position:absolute;bottom:56px}.theme-browser .theme.display-author .theme-author{display:block}.theme-browser .theme.display-author .theme-author a{color:inherit}.theme-browser .theme.add-new-theme{border:none;box-shadow:none}.theme-browser .theme.add-new-theme a{text-decoration:none;display:block;position:relative;z-index:1}.theme-browser .theme.add-new-theme a:after{display:block;content:"";background:0 0;background:rgba(0,0,0,0);position:absolute;top:0;right:0;left:0;bottom:0;padding:0;text-shadow:none;border:5px dashed #dcdcde;border:5px dashed rgba(0,0,0,.1);box-sizing:border-box}.theme-browser .theme.add-new-theme span:after{background:#dcdcde;background:rgba(140,143,148,.1);border-radius:50%;display:inline-block;content:"\f132";-webkit-font-smoothing:antialiased;font:normal 74px/115px dashicons;width:100px;height:100px;vertical-align:middle;text-align:center;color:#8c8f94;position:absolute;top:30%;right:50%;margin-right:-50px;text-indent:-4px;padding:0;text-shadow:none;z-index:4}.rtl .theme-browser .theme.add-new-theme span:after{text-indent:4px}.theme-browser .theme.add-new-theme a:focus .theme-screenshot,.theme-browser .theme.add-new-theme a:hover .theme-screenshot{background:0 0}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{background:#fff;color:#2271b1}.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{border-color:transparent;color:#fff;background:#2271b1;content:""}.theme-browser .theme.add-new-theme .theme-name{background:0 0;text-align:center;box-shadow:none;font-weight:400;position:relative;top:0;margin-top:-18px;padding-top:0;padding-bottom:48px}.theme-browser .theme.add-new-theme a:focus .theme-name,.theme-browser .theme.add-new-theme a:hover .theme-name{color:#fff;z-index:2}.theme-overlay .theme-backdrop{position:absolute;right:-20px;left:0;top:0;bottom:0;background:#f0f0f1;background:rgba(240,240,241,.9);z-index:10000}.theme-overlay .theme-header{position:absolute;top:0;right:0;left:0;height:48px;border-bottom:1px solid #dcdcde}.theme-overlay .theme-header button{padding:0}.theme-overlay .theme-header .close{cursor:pointer;height:48px;width:50px;text-align:center;float:left;border:0;border-right:1px solid #dcdcde;background-color:transparent;transition:color .1s ease-in-out,background .1s ease-in-out}.theme-overlay .theme-header .close:before{font:normal 22px/50px dashicons!important;color:#787c82;display:inline-block;content:"\f335";font-weight:300}.theme-overlay .theme-header .left,.theme-overlay .theme-header .right{cursor:pointer;color:#787c82;background-color:transparent;height:48px;width:54px;float:right;text-align:center;border:0;border-left:1px solid #dcdcde;transition:color .1s ease-in-out,background .1s ease-in-out}.theme-overlay .theme-header .close:focus,.theme-overlay .theme-header .close:hover,.theme-overlay .theme-header .left:focus,.theme-overlay .theme-header .left:hover,.theme-overlay .theme-header .right:focus,.theme-overlay .theme-header .right:hover{background:#dcdcde;border-color:#c3c4c7;color:#000}.theme-overlay .theme-header .close:focus:before,.theme-overlay .theme-header .close:hover:before{color:#000}.theme-overlay .theme-header .close:focus,.theme-overlay .theme-header .left:focus,.theme-overlay .theme-header .right:focus{box-shadow:none;outline:0}.theme-overlay .theme-header .left.disabled,.theme-overlay .theme-header .left.disabled:hover,.theme-overlay .theme-header .right.disabled,.theme-overlay .theme-header .right.disabled:hover{color:#c3c4c7;background:inherit;cursor:inherit}.theme-overlay .theme-header .left:before,.theme-overlay .theme-header .right:before{font:normal 20px/50px dashicons!important;display:inline;font-weight:300}.theme-overlay .theme-header .left:before{content:"\f345"}.theme-overlay .theme-header .right:before{content:"\f341"}.theme-overlay .theme-wrap{clear:both;position:fixed;top:9%;right:190px;left:30px;bottom:3%;background:#fff;box-shadow:0 1px 20px 5px rgba(0,0,0,.1);z-index:10000;box-sizing:border-box;-webkit-overflow-scrolling:touch}body.folded .theme-browser~.theme-overlay .theme-wrap{right:70px}.theme-overlay .theme-about{position:absolute;top:49px;bottom:57px;right:0;left:0;overflow:auto;padding:2% 4%}.theme-overlay .theme-actions{position:absolute;text-align:center;bottom:0;right:0;left:0;padding:10px 25px 5px;background:#f6f7f7;z-index:30;box-sizing:border-box;border-top:1px solid #f0f0f1}.theme-overlay .theme-actions a{margin-left:5px;margin-bottom:5px}.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"],.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"]{display:none}.broken-themes a.delete-theme,.theme-overlay .theme-actions .delete-theme{color:#d63638;text-decoration:none;border-color:transparent;box-shadow:none;background:0 0}.theme-overlay .theme-actions .delete-theme{position:absolute;left:10px;bottom:5px}.broken-themes a.delete-theme:focus,.broken-themes a.delete-theme:hover,.theme-overlay .theme-actions .delete-theme:focus,.theme-overlay .theme-actions .delete-theme:hover{background:#d63638;color:#fff;border-color:#d63638}.theme-overlay .theme-actions .active-theme,.theme-overlay.active .theme-actions .inactive-theme{display:none}.theme-overlay .theme-actions .inactive-theme,.theme-overlay.active .theme-actions .active-theme{display:block}.theme-overlay .theme-screenshots{float:right;margin:0 0 0 30px;width:55%;max-width:1200px;text-align:center}.theme-overlay .screenshot{border:1px solid #fff;box-sizing:border-box;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.2)}.theme-overlay .screenshot:after{content:"";display:block;padding-top:75%}.theme-overlay .screenshot img{height:auto;position:absolute;right:0;top:0;width:100%}.theme-overlay.small-screenshot .theme-screenshots{position:absolute;width:302px}.theme-overlay.small-screenshot .theme-info{margin-right:350px;width:auto}.theme-overlay .screenshot.thumb{background:#c3c4c7;border:1px solid #f0f0f1;float:none;display:inline-block;margin:10px 5px 0;width:140px;height:80px;cursor:pointer}.theme-overlay .screenshot.thumb:after{content:"";display:block;padding-top:100%}.theme-overlay .screenshot.thumb img{cursor:pointer;height:auto;position:absolute;right:0;top:0;width:100%;height:auto}.theme-overlay .screenshot.selected{background:0 0;border:2px solid #72aee6}.theme-overlay .screenshot.selected img{opacity:.8}.theme-browser .theme .theme-screenshot.blank,.theme-overlay .screenshot.blank{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=)}.theme-overlay .theme-info{width:40%;float:right}.theme-overlay .current-label{background:#2c3338;color:#fff;font-size:11px;display:inline-block;padding:2px 8px;border-radius:2px;margin:0 0 -10px;-webkit-user-select:none;user-select:none}.theme-overlay .theme-name{color:#1d2327;font-size:32px;font-weight:100;margin:10px 0 0;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word}.theme-overlay .theme-version{color:#646970;font-size:13px;font-weight:400;float:none;display:inline-block;margin-right:10px}.theme-overlay .theme-author{margin:15px 0 25px;color:#646970;font-size:16px;font-weight:400;line-height:inherit}.theme-overlay .toggle-auto-update{display:inline-flex;align-items:center;min-height:20px;vertical-align:top}.theme-overlay .theme-autoupdate .toggle-auto-update{text-decoration:none}.theme-overlay .theme-autoupdate .toggle-auto-update .label{text-decoration:underline}.theme-overlay .theme-description{color:#50575e;font-size:15px;font-weight:400;line-height:1.5;margin:30px 0 0}.theme-overlay .theme-tags{border-top:3px solid #f0f0f1;color:#646970;font-size:13px;font-weight:400;margin:30px 0 0;padding-top:20px}.theme-overlay .theme-tags span{color:#3c434a;font-weight:600;margin-left:5px}.theme-overlay .parent-theme{background:#fff;border:1px solid #f0f0f1;border-right:4px solid #72aee6;font-size:14px;font-weight:400;margin-top:30px;padding:10px 20px 10px 10px}.theme-overlay .parent-theme strong{font-weight:600}.single-theme .theme,.single-theme .theme-overlay .theme-backdrop,.single-theme .theme-overlay .theme-header{display:none}.single-theme .theme-overlay .theme-wrap{clear:both;min-height:330px;position:relative;right:auto;left:auto;top:auto;bottom:auto;z-index:10}.single-theme .theme-overlay .theme-about{padding:30px 30px 70px;position:static}.single-theme .theme-overlay .theme-actions{position:absolute}@media only screen and (min-width:2000px){#wpwrap .theme-browser .theme{width:17.6%;margin:0 0 3% 3%}#wpwrap .theme-browser .theme:nth-child(3n),#wpwrap .theme-browser .theme:nth-child(4n){margin-left:3%}#wpwrap .theme-browser .theme:nth-child(5n){margin-left:0}}@media only screen and (min-width:1680px){.theme-overlay .theme-wrap{width:1450px;margin:0 auto}}@media only screen and (min-width:1640px){.theme-browser .theme{width:22.7%;margin:0 0 3% 3%}.theme-browser .theme .theme-screenshot:after{padding-top:75%}.theme-browser .theme:nth-child(3n){margin-left:3%}.theme-browser .theme:nth-child(4n){margin-left:0}}@media only screen and (max-width:1120px){.theme-browser .theme{width:47.5%;margin-left:0}.theme-browser .theme:nth-child(even){margin-left:0}.theme-browser .theme:nth-child(odd){margin-left:5%}}@media only screen and (max-width:960px){.theme-overlay .theme-wrap{right:65px}}@media only screen and (max-width:780px){.theme-overlay .theme-wrap,body.folded .theme-overlay .theme-wrap{top:0;left:0;bottom:0;right:0;padding:70px 20px 20px;border:none;z-index:100000;position:fixed}.theme-browser .theme.active .theme-name span{display:none}.theme-overlay .theme-screenshots{width:40%}.theme-overlay .theme-info{width:50%}.single-theme .theme-wrap{padding:10px}.theme-browser .theme .theme-actions{padding:5px 10px 4px}.theme-overlay.small-screenshot .theme-screenshots{position:static;float:none;max-width:302px}.theme-overlay.small-screenshot .theme-info{margin-right:0;width:auto}.theme.focus .more-details,.theme:hover .more-details,.theme:not(.active):focus .theme-actions,.theme:not(.active):hover .theme-actions{display:none}.theme-browser.rendered .theme.focus .theme-screenshot img,.theme-browser.rendered .theme:hover .theme-screenshot img{opacity:1}}@media only screen and (max-width:480px){.theme-browser .theme{width:100%;margin-left:0}.theme-browser .theme:nth-child(2n),.theme-browser .theme:nth-child(3n){margin-left:0}.theme-overlay .theme-about{bottom:105px}.theme-overlay .theme-actions{padding-right:4%;padding-left:4%}}@media only screen and (max-width:650px){.theme-overlay .theme-description{margin-right:0}.theme-overlay .theme-actions .delete-theme{position:relative;left:auto;bottom:auto}.theme-overlay .theme-actions .inactive-theme{display:inline}.theme-overlay .theme-screenshots{width:100%;float:none}.theme-overlay .theme-info{width:100%}.theme-overlay .theme-author{margin:5px 0 15px}.theme-overlay .current-label{margin-top:10px;font-size:13px}.themes-php .wp-filter-search{float:none;clear:both;right:0;left:0;margin:-5px 0 20px;width:100%;max-width:280px}.theme-browser .theme.add-new-theme span:after{font:normal 60px/90px dashicons;width:80px;height:80px;top:30%;right:50%;text-indent:0;margin-right:-40px}.single-theme .theme-wrap{margin:0 -10px 0 -12px;padding:10px}.single-theme .theme-overlay .theme-about{padding:10px;overflow:visible}.single-theme .current-label{display:none}.single-theme .theme-overlay .theme-actions{position:static}}.broken-themes{clear:both}.broken-themes table{text-align:right;width:50%;border-spacing:3px;padding:3px}.update-php .wrap{max-width:40rem}.theme-browser .theme .theme-installed{background:#2271b1}.theme-browser .theme .notice-success p:before{color:#68de7c;content:"\f147";display:inline-block;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.theme-install.updated-message:before{content:""}.theme-install-php .wp-filter{padding-right:20px}.theme-install-php a.browse-themes,.theme-install-php a.upload{cursor:pointer}.plugin-install-tab-upload .upload-view-toggle .upload,.upload-view-toggle .browse{display:none}.plugin-install-tab-upload .upload-view-toggle .browse{display:inline}.upload-plugin,.upload-theme{box-sizing:border-box;display:none;margin:0;padding:50px 0;width:100%;overflow:hidden;position:relative;top:10px;text-align:center}.plugin-install-tab-upload .upload-plugin,.show-upload-view .upload-plugin,.show-upload-view .upload-plugin-wrap,.show-upload-view .upload-theme{display:block}.upload-plugin .wp-upload-form,.upload-theme .wp-upload-form{background:#f6f7f7;border:1px solid #c3c4c7;padding:30px;margin:30px auto;display:inline-flex;justify-content:space-between;align-items:center}.upload-plugin .wp-upload-form input[type=file],.upload-theme .wp-upload-form input[type=file]{margin-left:10px}.upload-plugin .install-help,.upload-theme .install-help{color:#50575e;font-size:18px;font-style:normal;margin:0;padding:0;text-align:center}p.no-themes,p.no-themes-local{clear:both;color:#646970;font-size:18px;font-style:normal;margin:0;padding:100px 0;text-align:center;display:none}.no-results p.no-themes{display:block}.theme-install-php .add-new-theme{display:none!important}@media only screen and (max-width:1120px){.upload-theme .wp-upload-form{margin:20px 0;max-width:100%}.upload-theme .install-help{font-size:15px;padding:20px 0 0}}.theme-details .theme-rating{line-height:1.9}.theme-details .star-rating{display:inline}.theme-details .no-rating,.theme-details .num-ratings{font-size:11px;color:#646970}.theme-details .no-rating{display:block;line-height:1.9}.update-from-upload-comparison{border-top:1px solid #dcdcde;border-bottom:1px solid #dcdcde;text-align:right;margin:1rem 0 1.4rem;border-collapse:collapse;width:100%}.update-from-upload-comparison tr:last-child td{height:1.4rem;vertical-align:top}.update-from-upload-comparison tr:first-child th{font-weight:700;height:1.4rem;vertical-align:bottom}.update-from-upload-comparison td.name-label{text-align:left}.update-from-upload-comparison td,.update-from-upload-comparison th{padding:.4rem 1.4rem}.update-from-upload-comparison td.warning{color:#d63638}.update-from-upload-actions{margin-top:1.4rem}.appearance_page_custom-header #headimg{border:1px solid #dcdcde;overflow:hidden;width:100%}.appearance_page_custom-header #upload-form p label{font-size:12px}.appearance_page_custom-header .available-headers .default-header{float:right;margin:0 0 20px 20px}.appearance_page_custom-header .random-header{clear:both;margin:0 0 20px 20px;vertical-align:middle}.appearance_page_custom-header .available-headers label input,.appearance_page_custom-header .random-header label input{margin-left:10px}.appearance_page_custom-header .available-headers label img{vertical-align:middle}div#custom-background-image{min-height:100px;border:1px solid #dcdcde}div#custom-background-image img{max-width:400px;max-height:300px}.background-position-control input[type=radio]:checked~.button{background:#f0f0f1;border-color:#8c8f94;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);z-index:1}.background-position-control input[type=radio]:focus~.button{border-color:#4f94d4;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(34,113,177,.8);color:#1d2327}.background-position-control .background-position-center-icon,.background-position-control .background-position-center-icon:before{display:inline-block;line-height:1;text-align:center;transition:background-color .1s ease-in}.background-position-control .background-position-center-icon{height:20px;margin-top:13px;vertical-align:top;width:20px}.background-position-control .background-position-center-icon:before{background-color:#50575e;border-radius:50%;content:"";height:12px;width:12px}.background-position-control .button:hover .background-position-center-icon:before,.background-position-control input[type=radio]:focus~.button .background-position-center-icon:before{background-color:#1d2327}.background-position-control .button-group{display:block}.background-position-control .button-group .button{border-radius:0;box-shadow:none;height:40px!important;line-height:2.9!important;margin:0 0 0 -1px!important;padding:0 10px 1px!important;position:relative}.background-position-control .button-group .button:active,.background-position-control .button-group .button:focus,.background-position-control .button-group .button:hover{z-index:1}.background-position-control .button-group:last-child .button{box-shadow:0 1px 0 #c3c4c7}.background-position-control .button-group>label{margin:0!important}.background-position-control .button-group:first-child>label:first-child .button{border-radius:0 3px 0 0}.background-position-control .button-group:first-child>label:first-child .dashicons{transform:rotate(-45deg)}.background-position-control .button-group:first-child>label:last-child .button{border-radius:3px 0 0 0}.background-position-control .button-group:first-child>label:last-child .dashicons{transform:rotate(45deg)}.background-position-control .button-group:last-child>label:first-child .button{border-radius:0 0 3px 0}.background-position-control .button-group:last-child>label:first-child .dashicons{transform:rotate(45deg)}.background-position-control .button-group:last-child>label:last-child .button{border-radius:0 0 0 3px}.background-position-control .button-group:last-child>label:last-child .dashicons{transform:rotate(-45deg)}.background-position-control .button-group .dashicons{margin-top:9px}.background-position-control .button-group+.button-group{margin-top:-1px}body.full-overlay-active{overflow:hidden;visibility:hidden}.wp-full-overlay{background:0 0;z-index:500000;position:fixed;overflow:visible;top:0;bottom:0;right:0;left:0;height:100%;min-width:0}.wp-full-overlay-sidebar{box-sizing:border-box;position:fixed;min-width:300px;max-width:600px;width:18%;height:100%;top:0;bottom:0;right:0;padding:0;margin:0;z-index:10;background:#f0f0f1;border-left:none}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{overflow:visible}.wp-full-overlay.collapsed,.wp-full-overlay.expanded .wp-full-overlay-sidebar{margin-right:0!important}.wp-full-overlay.expanded{margin-right:300px}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{margin-right:-300px}@media screen and (min-width:1667px){.wp-full-overlay.expanded{margin-right:18%}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{margin-right:-18%}}@media screen and (min-width:3333px){.wp-full-overlay.expanded{margin-right:600px}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{margin-right:-600px}}.wp-full-overlay-sidebar:after{content:"";display:block;position:absolute;top:0;bottom:0;left:0;width:3px;z-index:1000}.wp-full-overlay-main{position:absolute;right:0;left:0;top:0;bottom:0;height:100%}.wp-full-overlay-sidebar .wp-full-overlay-header{position:absolute;right:0;left:0;height:45px;padding:0 15px;line-height:3.2;z-index:10;margin:0;border-top:none;box-shadow:none}.wp-full-overlay-sidebar .wp-full-overlay-header a.back{margin-top:9px}.wp-full-overlay-sidebar .wp-full-overlay-footer{bottom:0;border-bottom:none;border-top:none;box-shadow:none}.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content{position:absolute;top:45px;bottom:45px;right:0;left:0;overflow:auto}.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header{padding:0}.theme-install-overlay .close-full-overlay,.theme-install-overlay .next-theme,.theme-install-overlay .previous-theme{display:block;position:relative;float:right;width:45px;height:45px;background:#f0f0f1;border-left:1px solid #dcdcde;color:#3c434a;cursor:pointer;text-decoration:none;transition:color .1s ease-in-out,background .1s ease-in-out}.theme-install-overlay .close-full-overlay:focus,.theme-install-overlay .close-full-overlay:hover,.theme-install-overlay .next-theme:focus,.theme-install-overlay .next-theme:hover,.theme-install-overlay .previous-theme:focus,.theme-install-overlay .previous-theme:hover{background:#dcdcde;border-color:#c3c4c7;color:#000;outline:0;box-shadow:none}.theme-install-overlay .close-full-overlay:before{font:normal 22px/1 dashicons;content:"\f335";position:relative;top:7px;right:13px}.theme-install-overlay .previous-theme:before{font:normal 20px/1 dashicons;content:"\f345";position:relative;top:6px;right:14px}.theme-install-overlay .next-theme:before{font:normal 20px/1 dashicons;content:"\f341";position:relative;top:6px;right:13px}.theme-install-overlay .next-theme.disabled,.theme-install-overlay .next-theme.disabled:focus,.theme-install-overlay .next-theme.disabled:hover,.theme-install-overlay .previous-theme.disabled,.theme-install-overlay .previous-theme.disabled:focus,.theme-install-overlay .previous-theme.disabled:hover{color:#c3c4c7;background:#f0f0f1;cursor:default;pointer-events:none}.theme-install-overlay .close-full-overlay,.theme-install-overlay .next-theme,.theme-install-overlay .previous-theme{border-right:0;border-top:0;border-bottom:0}.theme-install-overlay .close-full-overlay:before,.theme-install-overlay .next-theme:before,.theme-install-overlay .previous-theme:before{top:2px;right:0}.wp-core-ui .wp-full-overlay .collapse-sidebar{position:fixed;bottom:0;right:0;padding:9px 10px 9px 0;height:45px;color:#646970;outline:0;line-height:1;background-color:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#2271b1}.wp-full-overlay .collapse-sidebar-arrow,.wp-full-overlay .collapse-sidebar-label{display:inline-block;vertical-align:middle;line-height:1.6}.wp-full-overlay .collapse-sidebar-arrow{width:20px;height:20px;margin:0 2px;border-radius:50%;overflow:hidden}.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.wp-full-overlay .collapse-sidebar-label{margin-right:3px}.wp-full-overlay.collapsed .collapse-sidebar-label{display:none}.wp-full-overlay .collapse-sidebar-arrow:before{display:block;content:"\f148";background:#f0f0f1;font:normal 20px/1 dashicons;speak:never;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar{padding:9px 10px}.rtl .wp-full-overlay .collapse-sidebar-arrow:before,.wp-full-overlay.collapsed .collapse-sidebar-arrow:before{transform:rotate(180.001deg)}.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before{transform:none}.wp-full-overlay,.wp-full-overlay .collapse-sidebar,.wp-full-overlay-main,.wp-full-overlay-sidebar{transition-property:right,left,top,bottom,width,margin;transition-duration:.2s}.wp-full-overlay{background:#1d2327}.wp-full-overlay-main{background-color:#f0f0f1}.expanded .wp-full-overlay-footer{position:fixed;bottom:0;right:0;min-width:299px;max-width:599px;width:18%;width:calc(18% - 1px);height:45px;border-top:1px solid #dcdcde;background:#f0f0f1}.wp-full-overlay-footer .devices-wrapper{float:left}.wp-full-overlay-footer .devices{position:relative;background:#f0f0f1;box-shadow:20px 0 10px -5px #f0f0f1}.wp-full-overlay-footer .devices button{cursor:pointer;background:0 0;border:none;height:45px;padding:0 3px;margin:0 -4px 0 0;box-shadow:none;border-top:1px solid transparent;border-bottom:4px solid transparent;transition:.15s color ease-in-out,.15s background-color ease-in-out,.15s border-color ease-in-out}.wp-full-overlay-footer .devices button:focus{box-shadow:none;outline:0}.wp-full-overlay-footer .devices button:before{display:inline-block;-webkit-font-smoothing:antialiased;font:normal 20px/30px dashicons;vertical-align:top;margin:3px 0;padding:4px 8px;color:#646970}.wp-full-overlay-footer .devices button.active{border-bottom-color:#1d2327}.wp-full-overlay-footer .devices button:focus,.wp-full-overlay-footer .devices button:hover{background-color:#fff}.wp-full-overlay-footer .devices button.active:hover,.wp-full-overlay-footer .devices button:focus{border-bottom-color:#2271b1}.wp-full-overlay-footer .devices button.active:before{color:#1d2327}.wp-full-overlay-footer .devices button:focus:before,.wp-full-overlay-footer .devices button:hover:before{color:#2271b1}.wp-full-overlay-footer .devices .preview-desktop:before{content:"\f472"}.wp-full-overlay-footer .devices .preview-tablet:before{content:"\f471"}.wp-full-overlay-footer .devices .preview-mobile:before{content:"\f470"}@media screen and (max-width:1024px){.wp-full-overlay-footer .devices{display:none}}.collapsed .wp-full-overlay-footer .devices button:before{display:none}.preview-mobile .wp-full-overlay-main{margin:auto -160px auto 0;width:320px;height:480px;max-height:100%;max-width:100%;right:50%}.preview-tablet .wp-full-overlay-main{margin:auto -360px auto 0;width:720px;height:1080px;max-height:100%;max-width:100%;right:50%}.customize-support .hide-if-customize,.customize-support .wp-core-ui .hide-if-customize,.customize-support.wp-core-ui .hide-if-customize,.no-customize-support .hide-if-no-customize,.no-customize-support .wp-core-ui .hide-if-no-customize,.no-customize-support.wp-core-ui .hide-if-no-customize{display:none}#customize-container,#customize-controls .notice.notification-overlay{background:#f0f0f1;z-index:500000;position:fixed;overflow:visible;top:0;bottom:0;right:0;left:0;height:100%}#customize-container{display:none}#customize-container,.theme-install-overlay{visibility:visible}.customize-loading #customize-container iframe{opacity:0}#customize-container iframe,.theme-install-overlay iframe{height:100%;width:100vw;z-index:20;transition:opacity .3s}#customize-controls{margin-top:0}.theme-install-overlay{display:none}.theme-install-overlay.single-theme{display:block}.install-theme-info{display:none;padding:10px 20px 60px}.single-theme .install-theme-info{padding-top:15px}.theme-install-overlay .install-theme-info{display:block}.install-theme-info .theme-install{float:left;margin-top:18px}.install-theme-info .theme-name{font-size:16px;line-height:1.5;margin-bottom:0;margin-top:0}.install-theme-info .theme-screenshot{margin:15px 0;width:258px;border:1px solid #c3c4c7;position:relative;overflow:hidden}.install-theme-info .theme-screenshot>img{width:100%;height:auto;position:absolute;right:0;top:0}.install-theme-info .theme-screenshot:after{content:"";display:block;padding-top:66.66666666%}.install-theme-info .theme-details{overflow:hidden}.theme-details .theme-version{margin:15px 0}.theme-details .theme-description{float:right;color:#646970;line-height:1.6;max-width:100%}.theme-install-overlay .wp-full-overlay-header .button{float:left;margin:8px 0 0 10px}.theme-install-overlay .wp-full-overlay-sidebar{background:#f0f0f1;border-left:1px solid #dcdcde}.theme-install-overlay .wp-full-overlay-sidebar-content{background:#fff;border-top:1px solid #dcdcde;border-bottom:1px solid #dcdcde}.theme-install-overlay .wp-full-overlay-main{position:absolute;z-index:0;background-color:#f0f0f1}.customize-loading #customize-container{background-color:#f0f0f1}#customize-controls .notice.notification-overlay.notification-loading:before,#customize-preview.wp-full-overlay-main:before,.customize-loading #customize-container:before,.theme-install-overlay .wp-full-overlay-main:before{content:"";display:block;width:20px;height:20px;position:absolute;right:50%;top:50%;z-index:-1;margin:-10px -10px 0 0;transform:translateZ(0);background:transparent url(../images/spinner.gif) no-repeat center center;background-size:20px 20px}#customize-preview.wp-full-overlay-main.iframe-ready:before,.theme-install-overlay.iframe-ready .wp-full-overlay-main:before{background-image:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.wp-full-overlay .collapse-sidebar-arrow{background-image:url(../images/arrows-2x.png);background-size:15px 123px}#customize-controls .notice.notification-overlay.notification-loading:before,#customize-preview.wp-full-overlay-main:before,.customize-loading #customize-container:before,.theme-install-overlay .wp-full-overlay-main:before{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){.available-theme .action-links .delete-theme{float:none;margin:0;padding:0;clear:both}.available-theme .action-links .delete-theme a{padding:0}.broken-themes table{width:100%}.theme-install-overlay .wp-full-overlay-header .button{font-size:13px;line-height:2.15384615;min-height:30px}.theme-browser .theme .theme-actions .button{margin-bottom:0}.theme-browser .theme .theme-actions,.theme-browser .theme.active .theme-actions{padding-top:4px;padding-bottom:4px}.upload-plugin .wp-upload-form,.upload-theme .wp-upload-form{display:block}}@media aural{.theme .notice:before,.theme-info .updated-message:before,.theme-info .updating-message:before,.theme-install.updating-message:before{speak:never}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/themes.css b/tools/storybook/wordpress/css/themes.css new file mode 100644 index 00000000000..6b598013a0a --- /dev/null +++ b/tools/storybook/wordpress/css/themes.css @@ -0,0 +1,2004 @@ +/*------------------------------------------------------------------------------ + 16.0 - Themes +------------------------------------------------------------------------------*/ + + +/*------------------------------------------------------------------------------ + 16.1 - Manage Themes +------------------------------------------------------------------------------*/ + +.themes-php { + overflow-y: scroll; +} + +body.js .theme-browser.search-loading { + display: none; +} + +.theme-browser .themes { + clear: both; +} + +.themes-php:not(.network-admin) .wrap h1 { + margin-bottom: 15px; +} + +.themes-php .wrap h1 .button { + margin-left: 20px; +} + +/* Search form */ +.themes-php .search-form { + display: inline; +} + +.themes-php .wp-filter-search { + position: relative; + top: -2px; + left: 20px; + margin: 0; + width: 280px; +} + +/* Position admin messages */ +.theme .notice, +.theme .notice.is-dismissible { + left: 0; + margin: 0; + position: absolute; + right: 0; + top: 0; +} + +/** + * Main theme element + * (has flexible margins) + */ +.theme-browser .theme { + cursor: pointer; + float: left; + margin: 0 4% 4% 0; + position: relative; + width: 30.6%; + border: 1px solid #dcdcde; + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + box-sizing: border-box; +} + +.theme-browser .theme:nth-child(3n) { + margin-right: 0; +} + +.theme-browser .theme:hover, +.theme-browser .theme.focus { + cursor: pointer; +} + +.theme-browser .theme .theme-name { + font-size: 15px; + font-weight: 600; + height: 18px; + margin: 0; + padding: 15px; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + background: #fff; + background: rgba(255, 255, 255, 0.65); +} + +/* Activate and Customize buttons, shown on hover and focus */ +.theme-browser .theme .theme-actions { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + opacity: 0; + transition: opacity 0.1s ease-in-out; + height: auto; + background: rgba(246, 247, 247, 0.7); + border-left: 1px solid rgba(0, 0, 0, 0.05); +} + +.theme-browser .theme:hover .theme-actions, +.theme-browser .theme.focus .theme-actions { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} + +.theme-browser .theme .theme-actions .button-primary { + margin-right: 3px; +} + +.theme-browser .theme .theme-actions .button { + float: none; + margin-left: 3px; +} + +/** + * Theme Screenshot + * + * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size + * It is also responsive. + */ +.theme-browser .theme .theme-screenshot { + display: block; + overflow: hidden; + position: relative; + -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */ + transition: opacity 0.2s ease-in-out; +} + +.theme-browser .theme .theme-screenshot:after { + content: ""; + display: block; + padding-top: 66.66666%; /* using a 3/2 aspect ratio */ +} + +.theme-browser .theme .theme-screenshot img { + height: auto; + position: absolute; + left: 0; + top: 0; + width: 100%; + transition: opacity 0.2s ease-in-out; +} + +.theme-browser .theme:hover .theme-screenshot, +.theme-browser .theme.focus .theme-screenshot { + background: #fff; +} + +.theme-browser.rendered .theme:hover .theme-screenshot img, +.theme-browser.rendered .theme.focus .theme-screenshot img { + opacity: 0.4; +} + +.theme-browser .theme .more-details { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + opacity: 0; + position: absolute; + top: 35%; + right: 20%; + left: 20%; + width: 60%; + background: #1d2327; + background: rgba(0, 0, 0, 0.7); + color: #fff; + font-size: 15px; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); + -webkit-font-smoothing: antialiased; + font-weight: 600; + padding: 15px 12px; + text-align: center; + border-radius: 3px; + border: none; + transition: opacity 0.1s ease-in-out; + cursor: pointer; +} + +.theme-browser .theme .more-details:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1; +} + +.theme-browser .theme.focus { + border-color: #4f94d4; + box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); +} + +.theme-browser .theme.focus .more-details { + opacity: 1; +} + +/* Current theme needs to have its action always on view */ +.theme-browser .theme.active.focus .theme-actions { + display: block; +} + +.theme-browser.rendered .theme:hover .more-details, +.theme-browser.rendered .theme.focus .more-details { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} + +/** + * The currently active theme + */ +.theme-browser .theme.active .theme-name { + background: #1d2327; + color: #fff; + padding-right: 110px; + font-weight: 300; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); +} + +.theme-browser .customize-control .theme.active .theme-name { + padding-right: 15px; +} + +.theme-browser .theme.active .theme-name span { + font-weight: 600; +} + +.theme-browser .theme.active .theme-actions { + background: rgba(44, 51, 56, 0.7); + border-left: none; + opacity: 1; +} + +.theme-id-container { + position: relative; +} + +.theme-browser .theme.active .theme-actions, +.theme-browser .theme .theme-actions { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + padding: 9px 15px; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); +} + +.theme-browser .theme.active .theme-actions .button-primary { + margin-right: 0; +} + +.theme-browser .theme .theme-author { + background: #1d2327; + color: #f0f0f1; + display: none; + font-size: 14px; + margin: 0 10px; + padding: 5px 10px; + position: absolute; + bottom: 56px; +} + +.theme-browser .theme.display-author .theme-author { + display: block; +} + +.theme-browser .theme.display-author .theme-author a { + color: inherit; +} + +/** + * Add new theme + */ +.theme-browser .theme.add-new-theme { + border: none; + box-shadow: none; +} + +.theme-browser .theme.add-new-theme a { + text-decoration: none; + display: block; + position: relative; + z-index: 1; +} + +.theme-browser .theme.add-new-theme a:after { + display: block; + content: ""; + background: transparent; + background: rgba(0, 0, 0, 0); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0; + text-shadow: none; + border: 5px dashed #dcdcde; + border: 5px dashed rgba(0, 0, 0, 0.1); + box-sizing: border-box; +} + +.theme-browser .theme.add-new-theme span:after { + background: #dcdcde; + background: rgba(140, 143, 148, 0.1); + border-radius: 50%; + display: inline-block; + content: "\f132"; + -webkit-font-smoothing: antialiased; + font: normal 74px/115px dashicons; + width: 100px; + height: 100px; + vertical-align: middle; + text-align: center; + color: #8c8f94; + position: absolute; + top: 30%; + left: 50%; + margin-left: -50px; + text-indent: -4px; + padding: 0; + text-shadow: none; + z-index: 4; +} + +.rtl .theme-browser .theme.add-new-theme span:after { + text-indent: 4px; +} + +.theme-browser .theme.add-new-theme a:hover .theme-screenshot, +.theme-browser .theme.add-new-theme a:focus .theme-screenshot { + background: none; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + background: #fff; + color: #2271b1; +} + +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + border-color: transparent; + color: #fff; + background: #2271b1; + content: ""; +} + +.theme-browser .theme.add-new-theme .theme-name { + background: none; + text-align: center; + box-shadow: none; + font-weight: 400; + position: relative; + top: 0; + margin-top: -18px; + padding-top: 0; + padding-bottom: 48px; +} + +.theme-browser .theme.add-new-theme a:hover .theme-name, +.theme-browser .theme.add-new-theme a:focus .theme-name { + color: #fff; + z-index: 2; +} + +/** + * Theme Overlay + * Shown when clicking a theme + */ +.theme-overlay .theme-backdrop { + position: absolute; + left: -20px; + right: 0; + top: 0; + bottom: 0; + background: #f0f0f1; + background: rgba(240, 240, 241, 0.9); + z-index: 10000; /* Over WP Pointers. */ +} + +.theme-overlay .theme-header { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 48px; + border-bottom: 1px solid #dcdcde; +} + +.theme-overlay .theme-header button { + padding: 0; +} + +.theme-overlay .theme-header .close { + cursor: pointer; + height: 48px; + width: 50px; + text-align: center; + float: right; + border: 0; + border-left: 1px solid #dcdcde; + background-color: transparent; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.theme-overlay .theme-header .close:before { + font: normal 22px/50px dashicons !important; + color: #787c82; + display: inline-block; + content: "\f335"; + font-weight: 300; +} + +/* Left and right navigation */ +.theme-overlay .theme-header .right, +.theme-overlay .theme-header .left { + cursor: pointer; + color: #787c82; + background-color: transparent; + height: 48px; + width: 54px; + float: left; + text-align: center; + border: 0; + border-right: 1px solid #dcdcde; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.theme-overlay .theme-header .close:focus, +.theme-overlay .theme-header .close:hover, +.theme-overlay .theme-header .right:focus, +.theme-overlay .theme-header .right:hover, +.theme-overlay .theme-header .left:focus, +.theme-overlay .theme-header .left:hover { + background: #dcdcde; + border-color: #c3c4c7; + color: #000; +} + +.theme-overlay .theme-header .close:focus:before, +.theme-overlay .theme-header .close:hover:before { + color: #000; +} + +.theme-overlay .theme-header .close:focus, +.theme-overlay .theme-header .right:focus, +.theme-overlay .theme-header .left:focus { + box-shadow: none; + outline: none; +} + +.theme-overlay .theme-header .left.disabled, +.theme-overlay .theme-header .right.disabled, +.theme-overlay .theme-header .left.disabled:hover, +.theme-overlay .theme-header .right.disabled:hover { + color: #c3c4c7; + background: inherit; + cursor: inherit; +} + +.theme-overlay .theme-header .right:before, +.theme-overlay .theme-header .left:before { + font: normal 20px/50px dashicons !important; + display: inline; + font-weight: 300; +} + +.theme-overlay .theme-header .left:before { + content: "\f341"; +} + +.theme-overlay .theme-header .right:before { + content: "\f345"; +} + +.theme-overlay .theme-wrap { + clear: both; + position: fixed; + top: 9%; + left: 190px; + right: 30px; + bottom: 3%; + background: #fff; + box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); + z-index: 10000; /* Over WP Pointers. */ + box-sizing: border-box; + -webkit-overflow-scrolling: touch; +} + +body.folded .theme-browser ~ .theme-overlay .theme-wrap { + left: 70px; +} + +.theme-overlay .theme-about { + position: absolute; + top: 49px; + bottom: 57px; + left: 0; + right: 0; + overflow: auto; + padding: 2% 4%; +} + +.theme-overlay .theme-actions { + position: absolute; + text-align: center; + bottom: 0; + left: 0; + right: 0; + padding: 10px 25px 5px; + background: #f6f7f7; + z-index: 30; + box-sizing: border-box; + border-top: 1px solid #f0f0f1; +} + +.theme-overlay .theme-actions a { + margin-right: 5px; + margin-bottom: 5px; +} + +/* Hide-if-customize for items we can't add classes to */ +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"], +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] { + display: none; +} + +.broken-themes a.delete-theme, +.theme-overlay .theme-actions .delete-theme { + color: #d63638; + text-decoration: none; + border-color: transparent; + box-shadow: none; + background: transparent; +} + +.theme-overlay .theme-actions .delete-theme { + position: absolute; + right: 10px; + bottom: 5px; +} + +.broken-themes a.delete-theme:hover, +.broken-themes a.delete-theme:focus, +.theme-overlay .theme-actions .delete-theme:hover, +.theme-overlay .theme-actions .delete-theme:focus { + background: #d63638; + color: #fff; + border-color: #d63638; +} + +.theme-overlay .theme-actions .active-theme, +.theme-overlay.active .theme-actions .inactive-theme { + display: none; +} + +.theme-overlay .theme-actions .inactive-theme, +.theme-overlay.active .theme-actions .active-theme { + display: block; +} + +/** + * Theme Screenshots gallery + */ +.theme-overlay .theme-screenshots { + float: left; + margin: 0 30px 0 0; + width: 55%; + max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */ + text-align: center; +} + +/* First screenshot, shown big */ +.theme-overlay .screenshot { + border: 1px solid #fff; + box-sizing: border-box; + overflow: hidden; + position: relative; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); +} + +.theme-overlay .screenshot:after { + content: ""; + display: block; + padding-top: 75%; /* using a 4/3 aspect ratio */ +} + +.theme-overlay .screenshot img { + height: auto; + position: absolute; + left: 0; + top: 0; + width: 100%; +} +/* Handles old 300px screenshots */ +.theme-overlay.small-screenshot .theme-screenshots { + position: absolute; + width: 302px; +} +.theme-overlay.small-screenshot .theme-info { + margin-left: 350px; + width: auto; +} + +/* Other screenshots, shown small and square */ +.theme-overlay .screenshot.thumb { + background: #c3c4c7; + border: 1px solid #f0f0f1; + float: none; + display: inline-block; + margin: 10px 5px 0; + width: 140px; + height: 80px; + cursor: pointer; +} + +.theme-overlay .screenshot.thumb:after { + content: ""; + display: block; + padding-top: 100%; /* using a 1/1 aspect ratio */ +} + +.theme-overlay .screenshot.thumb img { + cursor: pointer; + height: auto; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: auto; +} + +.theme-overlay .screenshot.selected { + background: transparent; + border: 2px solid #72aee6; +} + +.theme-overlay .screenshot.selected img { + opacity: 0.8; +} + +/* No screenshot placeholder */ +.theme-browser .theme .theme-screenshot.blank, +.theme-overlay .screenshot.blank { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); +} + +/** + * Theme heading information + */ +.theme-overlay .theme-info { + width: 40%; + float: left; +} + +.theme-overlay .current-label { + background: #2c3338; + color: #fff; + font-size: 11px; + display: inline-block; + padding: 2px 8px; + border-radius: 2px; + margin: 0 0 -10px; + -webkit-user-select: none; + user-select: none; +} + +.theme-overlay .theme-name { + color: #1d2327; + font-size: 32px; + font-weight: 100; + margin: 10px 0 0; + line-height: 1.3; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.theme-overlay .theme-version { + color: #646970; + font-size: 13px; + font-weight: 400; + float: none; + display: inline-block; + margin-left: 10px; +} + +.theme-overlay .theme-author { + margin: 15px 0 25px; + color: #646970; + font-size: 16px; + font-weight: 400; + line-height: inherit; +} + +.theme-overlay .toggle-auto-update { + /* Better align spin icon and text. */ + display: inline-flex; + align-items: center; + /* Prevents content after the auto-update toggler from jumping down and up. */ + min-height: 20px; /* Same height as the spinning dashicon. */ + vertical-align: top; +} + +.theme-overlay .theme-autoupdate .toggle-auto-update { + text-decoration: none; +} + +.theme-overlay .theme-autoupdate .toggle-auto-update .label { + text-decoration: underline; +} + +.theme-overlay .theme-description { + color: #50575e; + font-size: 15px; + font-weight: 400; + line-height: 1.5; + margin: 30px 0 0; +} + +.theme-overlay .theme-tags { + border-top: 3px solid #f0f0f1; + color: #646970; + font-size: 13px; + font-weight: 400; + margin: 30px 0 0; + padding-top: 20px; +} + +.theme-overlay .theme-tags span { + color: #3c434a; + font-weight: 600; + margin-right: 5px; +} + +.theme-overlay .parent-theme { + background: #fff; + border: 1px solid #f0f0f1; + border-left: 4px solid #72aee6; + font-size: 14px; + font-weight: 400; + margin-top: 30px; + padding: 10px 10px 10px 20px; +} + +.theme-overlay .parent-theme strong { + font-weight: 600; +} + +/** + * Single Theme Mode + * Displays detailed view inline when a user has no switch capabilities + */ +.single-theme .theme-overlay .theme-backdrop, +.single-theme .theme-overlay .theme-header, +.single-theme .theme { + display: none; +} + +.single-theme .theme-overlay .theme-wrap { + clear: both; + min-height: 330px; + position: relative; + left: auto; + right: auto; + top: auto; + bottom: auto; + z-index: 10; +} + +.single-theme .theme-overlay .theme-about { + padding: 30px 30px 70px; + position: static; +} + +.single-theme .theme-overlay .theme-actions { + position: absolute; +} + +/** + * Basic Responsive structure... + * + * Shuffles theme columns around based on screen width + */ + +@media only screen and (min-width: 2000px) { + #wpwrap .theme-browser .theme { + width: 17.6%; + margin: 0 3% 3% 0; + } + + #wpwrap .theme-browser .theme:nth-child(3n), + #wpwrap .theme-browser .theme:nth-child(4n) { + margin-right: 3%; + } + + #wpwrap .theme-browser .theme:nth-child(5n) { + margin-right: 0; + } +} + +@media only screen and (min-width: 1680px) { + .theme-overlay .theme-wrap { + width: 1450px; + margin: 0 auto; + } +} + +/* Maximum screenshot width reaches 440px */ +@media only screen and (min-width: 1640px) { + .theme-browser .theme { + width: 22.7%; + margin: 0 3% 3% 0; + } + .theme-browser .theme .theme-screenshot:after { + padding-top: 75%; /* using a 4/3 aspect ratio */ + } + + .theme-browser .theme:nth-child(3n) { + margin-right: 3%; + } + + .theme-browser .theme:nth-child(4n) { + margin-right: 0; + } +} +/* Maximum screenshot width reaches 440px */ +@media only screen and (max-width: 1120px) { + .theme-browser .theme { + width: 47.5%; + margin-right: 0; + } + + .theme-browser .theme:nth-child(even) { + margin-right: 0; + } + + .theme-browser .theme:nth-child(odd) { + margin-right: 5%; + } +} + +/* Admin menu is folded */ +@media only screen and (max-width: 960px) { + .theme-overlay .theme-wrap { + left: 65px; + } +} + +@media only screen and (max-width: 780px) { + body.folded .theme-overlay .theme-wrap, + .theme-overlay .theme-wrap { + top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */ + right: 0; + bottom: 0; + left: 0; + padding: 70px 20px 20px; + border: none; + z-index: 100000; /* should overlap #wpadminbar. */ + position: fixed; + } + + .theme-browser .theme.active .theme-name span { + /* Hide the "Active: " label on smaller screens. */ + display: none; + } + + .theme-overlay .theme-screenshots { + width: 40%; + } + + .theme-overlay .theme-info { + width: 50%; + } + .single-theme .theme-wrap { + padding: 10px; + } + + .theme-browser .theme .theme-actions { + padding: 5px 10px 4px; + } + + .theme-overlay.small-screenshot .theme-screenshots { + position: static; + float: none; + max-width: 302px; + } + + .theme-overlay.small-screenshot .theme-info { + margin-left: 0; + width: auto; + } + + .theme:not(.active):hover .theme-actions, + .theme:not(.active):focus .theme-actions, + .theme:hover .more-details, + .theme.focus .more-details { + display: none; + } + + .theme-browser.rendered .theme:hover .theme-screenshot img, + .theme-browser.rendered .theme.focus .theme-screenshot img { + opacity: 1.0; + } +} + +@media only screen and (max-width: 480px) { + .theme-browser .theme { + width: 100%; + margin-right: 0; + } + + .theme-browser .theme:nth-child(2n), + .theme-browser .theme:nth-child(3n) { + margin-right: 0; + } + + .theme-overlay .theme-about { + bottom: 105px; + } + + .theme-overlay .theme-actions { + padding-left: 4%; + padding-right: 4%; + } +} + +@media only screen and (max-width: 650px) { + .theme-overlay .theme-description { + margin-left: 0; + } + + .theme-overlay .theme-actions .delete-theme { + position: relative; + right: auto; + bottom: auto; + } + + .theme-overlay .theme-actions .inactive-theme { + display: inline; + } + + .theme-overlay .theme-screenshots { + width: 100%; + float: none; + } + + .theme-overlay .theme-info { + width: 100%; + } + + .theme-overlay .theme-author { + margin: 5px 0 15px; + } + + .theme-overlay .current-label { + margin-top: 10px; + font-size: 13px; + } + + .themes-php .wp-filter-search { + float: none; + clear: both; + left: 0; + right: 0; + margin: -5px 0 20px; + width: 100%; + max-width: 280px; + } + + .theme-browser .theme.add-new-theme span:after { + font: normal 60px/90px dashicons; + width: 80px; + height: 80px; + top: 30%; + left: 50%; + text-indent: 0; + margin-left: -40px; + } + + .single-theme .theme-wrap { + margin: 0 -12px 0 -10px; + padding: 10px; + } + .single-theme .theme-overlay .theme-about { + padding: 10px; + overflow: visible; + } + .single-theme .current-label { + display: none; + } + .single-theme .theme-overlay .theme-actions { + position: static; + } +} + +.broken-themes { + clear: both; +} + +.broken-themes table { + text-align: left; + width: 50%; + border-spacing: 3px; + padding: 3px; +} + + +/*------------------------------------------------------------------------------ + 16.2 - Install Themes +------------------------------------------------------------------------------*/ + +.update-php .wrap { + max-width: 40rem; +} + +/* Already installed theme */ +.theme-browser .theme .theme-installed { + background: #2271b1; +} + +.theme-browser .theme .notice-success p:before { + color: #68de7c; + content: "\f147"; + display: inline-block; + font: normal 20px/1 'dashicons'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + +.theme-install.updated-message:before { + content: ""; +} + +.theme-install-php .wp-filter { + padding-left: 20px; +} + +.theme-install-php a.upload, +.theme-install-php a.browse-themes { + cursor: pointer; +} + +.upload-view-toggle .browse, +.plugin-install-tab-upload .upload-view-toggle .upload { + display: none; +} + +.plugin-install-tab-upload .upload-view-toggle .browse { + display: inline; +} + +.upload-theme, +.upload-plugin { + box-sizing: border-box; + display: none; + margin: 0; + padding: 50px 0; + width: 100%; + overflow: hidden; + position: relative; + top: 10px; + text-align: center; +} + +.show-upload-view .upload-theme, +.show-upload-view .upload-plugin, +.show-upload-view .upload-plugin-wrap, +.plugin-install-tab-upload .upload-plugin { + display: block; +} + +.upload-theme .wp-upload-form, +.upload-plugin .wp-upload-form { + background: #f6f7f7; + border: 1px solid #c3c4c7; + padding: 30px; + margin: 30px auto; + display: inline-flex; + justify-content: space-between; + align-items: center; +} + +.upload-theme .wp-upload-form input[type="file"], +.upload-plugin .wp-upload-form input[type="file"] { + margin-right: 10px; +} + +.upload-theme .install-help, +.upload-plugin .install-help { + color: #50575e; /* #f1f1f1 background */ + font-size: 18px; + font-style: normal; + margin: 0; + padding: 0; + text-align: center; +} + +p.no-themes, +p.no-themes-local { + clear: both; + color: #646970; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0; + text-align: center; + display: none; +} + +.no-results p.no-themes { + display: block; +} + +.theme-install-php .add-new-theme { + display: none !important; +} + +@media only screen and (max-width: 1120px) { + .upload-theme .wp-upload-form { + margin: 20px 0; + max-width: 100%; + } + .upload-theme .install-help { + font-size: 15px; + padding: 20px 0 0; + } +} + +.theme-details .theme-rating { + line-height: 1.9; +} + +.theme-details .star-rating { + display: inline; +} + +.theme-details .num-ratings, +.theme-details .no-rating { + font-size: 11px; + color: #646970; +} + +.theme-details .no-rating { + display: block; + line-height: 1.9; +} + +.update-from-upload-comparison { + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #dcdcde; + text-align: left; + margin: 1rem 0 1.4rem; + border-collapse: collapse; + width: 100%; +} + +.update-from-upload-comparison tr:last-child td { + height: 1.4rem; + vertical-align: top; +} + +.update-from-upload-comparison tr:first-child th { + font-weight: bold; + height: 1.4rem; + vertical-align: bottom; +} + +.update-from-upload-comparison td.name-label { + text-align: right; +} + +.update-from-upload-comparison td, +.update-from-upload-comparison th { + padding: 0.4rem 1.4rem; +} + +.update-from-upload-comparison td.warning { + color: #d63638; +} + +.update-from-upload-actions { + margin-top: 1.4rem; +} + +/*------------------------------------------------------------------------------ + 16.3 - Custom Header Screen +------------------------------------------------------------------------------*/ + +.appearance_page_custom-header #headimg { + border: 1px solid #dcdcde; + overflow: hidden; + width: 100%; +} + +.appearance_page_custom-header #upload-form p label { + font-size: 12px; +} + +.appearance_page_custom-header .available-headers .default-header { + float: left; + margin: 0 20px 20px 0; +} + +.appearance_page_custom-header .random-header { + clear: both; + margin: 0 20px 20px 0; + vertical-align: middle; +} + +.appearance_page_custom-header .available-headers label input, +.appearance_page_custom-header .random-header label input { + margin-right: 10px; +} + +.appearance_page_custom-header .available-headers label img { + vertical-align: middle; +} + + +/*------------------------------------------------------------------------------ + 16.4 - Custom Background Screen +------------------------------------------------------------------------------*/ + +div#custom-background-image { + min-height: 100px; + border: 1px solid #dcdcde; +} + +div#custom-background-image img { + max-width: 400px; + max-height: 300px; +} + +.background-position-control input[type="radio"]:checked ~ .button { + background: #f0f0f1; + border-color: #8c8f94; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + z-index: 1; +} + +.background-position-control input[type="radio"]:focus ~ .button { + border-color: #4f94d4; + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(34, 113, 177, 0.8); + color: #1d2327; +} + +.background-position-control .background-position-center-icon, +.background-position-control .background-position-center-icon:before { + display: inline-block; + line-height: 1; + text-align: center; + transition: background-color .1s ease-in; +} + +.background-position-control .background-position-center-icon { + height: 20px; + margin-top: 13px; + vertical-align: top; + width: 20px; +} + +.background-position-control .background-position-center-icon:before { + background-color: #50575e; + border-radius: 50%; + content: ""; + height: 12px; + width: 12px; +} + +.background-position-control .button:hover .background-position-center-icon:before, +.background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before { + background-color: #1d2327; +} + +.background-position-control .button-group { + display: block; +} + +.background-position-control .button-group .button { + border-radius: 0; + box-shadow: none; + /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ + height: 40px !important; + line-height: 2.9 !important; + margin: 0 -1px 0 0 !important; + padding: 0 10px 1px !important; + position: relative; +} + +.background-position-control .button-group .button:active, +.background-position-control .button-group .button:hover, +.background-position-control .button-group .button:focus { + z-index: 1; +} + +.background-position-control .button-group:last-child .button { + box-shadow: 0 1px 0 #c3c4c7; +} + +.background-position-control .button-group > label { + margin: 0 !important; +} + +.background-position-control .button-group:first-child > label:first-child .button { + border-radius: 3px 0 0; +} + +.background-position-control .button-group:first-child > label:first-child .dashicons { + transform: rotate( 45deg ); +} + +.background-position-control .button-group:first-child > label:last-child .button { + border-radius: 0 3px 0 0; +} + +.background-position-control .button-group:first-child > label:last-child .dashicons { + transform: rotate( -45deg ); +} + +.background-position-control .button-group:last-child > label:first-child .button { + border-radius: 0 0 0 3px; +} + +.background-position-control .button-group:last-child > label:first-child .dashicons { + transform: rotate( -45deg ); +} + +.background-position-control .button-group:last-child > label:last-child .button { + border-radius: 0 0 3px; +} + +.background-position-control .button-group:last-child > label:last-child .dashicons { + transform: rotate( 45deg ); +} + +.background-position-control .button-group .dashicons { + margin-top: 9px; +} + +.background-position-control .button-group + .button-group { + margin-top: -1px; +} + +/*------------------------------------------------------------------------------ + 23.0 - Full Overlay w/ Sidebar +------------------------------------------------------------------------------*/ + +body.full-overlay-active { + overflow: hidden; + /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */ + visibility: hidden; +} + +.wp-full-overlay { + background: transparent; + z-index: 500000; + position: fixed; + overflow: visible; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + min-width: 0; +} + +.wp-full-overlay-sidebar { + box-sizing: border-box; + position: fixed; + min-width: 300px; + max-width: 600px; + width: 18%; + height: 100%; + top: 0; + bottom: 0; + left: 0; + padding: 0; + margin: 0; + z-index: 10; + background: #f0f0f1; + border-right: none; +} + +.wp-full-overlay.collapsed .wp-full-overlay-sidebar { + overflow: visible; +} + +.wp-full-overlay.collapsed, +.wp-full-overlay.expanded .wp-full-overlay-sidebar { + margin-left: 0 !important; +} + +.wp-full-overlay.expanded { + margin-left: 300px; +} + +.wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-left: -300px; +} + +@media screen and (min-width: 1667px) { + .wp-full-overlay.expanded { + margin-left: 18%; + } + + .wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-left: -18%; + } +} + +@media screen and (min-width: 3333px) { + .wp-full-overlay.expanded { + margin-left: 600px; + } + + .wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-left: -600px; + } +} + +.wp-full-overlay-sidebar:after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 3px; + z-index: 1000; +} + +.wp-full-overlay-main { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + height: 100%; +} + +.wp-full-overlay-sidebar .wp-full-overlay-header { + position: absolute; + left: 0; + right: 0; + height: 45px; + padding: 0 15px; + line-height: 3.2; + z-index: 10; + margin: 0; + border-top: none; + box-shadow: none; +} + +.wp-full-overlay-sidebar .wp-full-overlay-header a.back { + margin-top: 9px; +} + +.wp-full-overlay-sidebar .wp-full-overlay-footer { + bottom: 0; + border-bottom: none; + border-top: none; + box-shadow: none; +} + +.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { + position: absolute; + top: 45px; + bottom: 45px; + left: 0; + right: 0; + overflow: auto; +} + +/* Close & Navigation Links */ +.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header { + padding: 0; +} + +.theme-install-overlay .close-full-overlay, +.theme-install-overlay .previous-theme, +.theme-install-overlay .next-theme { + display: block; + position: relative; + float: left; + width: 45px; + height: 45px; + background: #f0f0f1; + border-right: 1px solid #dcdcde; + color: #3c434a; + cursor: pointer; + text-decoration: none; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.theme-install-overlay .close-full-overlay:hover, +.theme-install-overlay .close-full-overlay:focus, +.theme-install-overlay .previous-theme:hover, +.theme-install-overlay .previous-theme:focus, +.theme-install-overlay .next-theme:hover, +.theme-install-overlay .next-theme:focus { + background: #dcdcde; + border-color: #c3c4c7; + color: #000; + outline: none; + box-shadow: none; +} + +.theme-install-overlay .close-full-overlay:before { + font: normal 22px/1 dashicons; + content: "\f335"; + position: relative; + top: 7px; + left: 13px; +} + +.theme-install-overlay .previous-theme:before { + font: normal 20px/1 dashicons; + content: "\f341"; + position: relative; + top: 6px; + left: 14px; +} + +.theme-install-overlay .next-theme:before { + font: normal 20px/1 dashicons; + content: "\f345"; + position: relative; + top: 6px; + left: 13px; +} + +.theme-install-overlay .previous-theme.disabled, +.theme-install-overlay .next-theme.disabled, +.theme-install-overlay .previous-theme.disabled:hover, +.theme-install-overlay .previous-theme.disabled:focus, +.theme-install-overlay .next-theme.disabled:hover, +.theme-install-overlay .next-theme.disabled:focus { + color: #c3c4c7; + background: #f0f0f1; + cursor: default; + pointer-events: none; +} + +.theme-install-overlay .close-full-overlay, +.theme-install-overlay .previous-theme, +.theme-install-overlay .next-theme { + border-left: 0; + border-top: 0; + border-bottom: 0; +} + +.theme-install-overlay .close-full-overlay:before, +.theme-install-overlay .previous-theme:before, +.theme-install-overlay .next-theme:before { + top: 2px; + left: 0; +} + +/* Collapse Button */ +.wp-core-ui .wp-full-overlay .collapse-sidebar { + position: fixed; + bottom: 0; + left: 0; + padding: 9px 0 9px 10px; + height: 45px; + color: #646970; + outline: 0; + line-height: 1; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; + border-radius: 0 !important; +} + +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #2271b1; +} + +.wp-full-overlay .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar-label { + display: inline-block; + vertical-align: middle; + line-height: 1.6; +} + +.wp-full-overlay .collapse-sidebar-arrow { + width: 20px; + height: 20px; + margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ + border-radius: 50%; + overflow: hidden; +} + +.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.wp-full-overlay .collapse-sidebar-label { + margin-left: 3px; +} + +.wp-full-overlay.collapsed .collapse-sidebar-label { + display: none; +} + +.wp-full-overlay .collapse-sidebar-arrow:before { + display: block; + content: "\f148"; + background: #f0f0f1; + font: normal 20px/1 dashicons; + speak: never; + padding: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar { + padding: 9px 10px; +} + +/* rtl:ignore */ +.wp-full-overlay.collapsed .collapse-sidebar-arrow:before, +.rtl .wp-full-overlay .collapse-sidebar-arrow:before { + transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ +} + +.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { + transform: none; +} + +/* Animations */ +.wp-full-overlay, +.wp-full-overlay-sidebar, +.wp-full-overlay .collapse-sidebar, +.wp-full-overlay-main { + transition-property: left, right, top, bottom, width, margin; + transition-duration: 0.2s; +} + +/* Device/preview size toggles */ + +.wp-full-overlay { + background: #1d2327; +} + +.wp-full-overlay-main { + background-color: #f0f0f1; +} + +.expanded .wp-full-overlay-footer { + position: fixed; + bottom: 0; + left: 0; + min-width: 299px; + max-width: 599px; + width: 18%; + width: calc( 18% - 1px ); + height: 45px; + border-top: 1px solid #dcdcde; + background: #f0f0f1; +} + +.wp-full-overlay-footer .devices-wrapper { + float: right; +} + +.wp-full-overlay-footer .devices { + position: relative; + background: #f0f0f1; + box-shadow: -20px 0 10px -5px #f0f0f1; +} + +.wp-full-overlay-footer .devices button { + cursor: pointer; + background: transparent; + border: none; + height: 45px; + padding: 0 3px; + margin: 0 0 0 -4px; + box-shadow: none; + border-top: 1px solid transparent; + border-bottom: 4px solid transparent; + transition: + .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; +} + +.wp-full-overlay-footer .devices button:focus { + box-shadow: none; + outline: none; +} + +.wp-full-overlay-footer .devices button:before { + display: inline-block; + -webkit-font-smoothing: antialiased; + font: normal 20px/30px "dashicons"; + vertical-align: top; + margin: 3px 0; + padding: 4px 8px; + color: #646970; +} + +.wp-full-overlay-footer .devices button.active { + border-bottom-color: #1d2327; +} + +.wp-full-overlay-footer .devices button:hover, +.wp-full-overlay-footer .devices button:focus { + background-color: #fff; +} + +.wp-full-overlay-footer .devices button:focus, +.wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #2271b1; +} + +.wp-full-overlay-footer .devices button.active:before { + color: #1d2327; +} + +.wp-full-overlay-footer .devices button:hover:before, +.wp-full-overlay-footer .devices button:focus:before { + color: #2271b1; +} + +.wp-full-overlay-footer .devices .preview-desktop:before { + content: "\f472"; +} + +.wp-full-overlay-footer .devices .preview-tablet:before { + content: "\f471"; +} + +.wp-full-overlay-footer .devices .preview-mobile:before { + content: "\f470"; +} + +@media screen and (max-width: 1024px) { + .wp-full-overlay-footer .devices { + display: none; + } +} + +.collapsed .wp-full-overlay-footer .devices button:before { + display: none; +} + +.preview-mobile .wp-full-overlay-main { + margin: auto 0 auto -160px; + width: 320px; + height: 480px; + max-height: 100%; + max-width: 100%; + left: 50%; +} + +.preview-tablet .wp-full-overlay-main { + margin: auto 0 auto -360px; + width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */ + height: 1080px; + max-height: 100%; + max-width: 100%; + left: 50%; +} + + +/*------------------------------------------------------------------------------ + 24.0 - Customize Loader +------------------------------------------------------------------------------*/ + +.no-customize-support .hide-if-no-customize, +.customize-support .hide-if-customize, +.no-customize-support.wp-core-ui .hide-if-no-customize, +.no-customize-support .wp-core-ui .hide-if-no-customize, +.customize-support.wp-core-ui .hide-if-customize, +.customize-support .wp-core-ui .hide-if-customize { + display: none; +} + +#customize-container, +#customize-controls .notice.notification-overlay { + background: #f0f0f1; + z-index: 500000; + position: fixed; + overflow: visible; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; +} +#customize-container { + display: none; +} + +/* Make the Customizer and Theme installer overlays the only available content. */ +#customize-container, +.theme-install-overlay { + visibility: visible; +} + +.customize-loading #customize-container iframe { + opacity: 0; +} + +#customize-container iframe, +.theme-install-overlay iframe { + height: 100%; + width: 100vw; + z-index: 20; + transition: opacity 0.3s; +} + +#customize-controls { + margin-top: 0; +} + +.theme-install-overlay { + display: none; +} + +.theme-install-overlay.single-theme { + display: block; +} + +.install-theme-info { + display: none; + padding: 10px 20px 60px; +} + +.single-theme .install-theme-info { + padding-top: 15px; +} + +.theme-install-overlay .install-theme-info { + display: block; +} + +.install-theme-info .theme-install { + float: right; + margin-top: 18px; +} + +.install-theme-info .theme-name { + font-size: 16px; + line-height: 1.5; + margin-bottom: 0; + margin-top: 0; +} + +.install-theme-info .theme-screenshot { + margin: 15px 0; + width: 258px; + border: 1px solid #c3c4c7; + position: relative; + overflow: hidden; +} + +.install-theme-info .theme-screenshot > img { + width: 100%; + height: auto; + position: absolute; + left: 0; + top: 0; +} + +.install-theme-info .theme-screenshot:after { + content: ""; + display: block; + padding-top: 66.66666666%; +} + +.install-theme-info .theme-details { + overflow: hidden; +} + +.theme-details .theme-version { + margin: 15px 0; +} + +.theme-details .theme-description { + float: left; + color: #646970; + line-height: 1.6; + max-width: 100%; +} + +.theme-install-overlay .wp-full-overlay-header .button { + float: right; + margin: 8px 10px 0 0; +} + +.theme-install-overlay .wp-full-overlay-sidebar { + background: #f0f0f1; + border-right: 1px solid #dcdcde; +} + +.theme-install-overlay .wp-full-overlay-sidebar-content { + background: #fff; + border-top: 1px solid #dcdcde; + border-bottom: 1px solid #dcdcde; +} + +.theme-install-overlay .wp-full-overlay-main { + position: absolute; + z-index: 0; + background-color: #f0f0f1; +} + +.customize-loading #customize-container { + background-color: #f0f0f1; +} + +#customize-preview.wp-full-overlay-main:before, +.customize-loading #customize-container:before, +#customize-controls .notice.notification-overlay.notification-loading:before, +.theme-install-overlay .wp-full-overlay-main:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + left: 50%; + top: 50%; + z-index: -1; + margin: -10px 0 0 -10px; + transform: translateZ(0); + background: transparent url(../images/spinner.gif) no-repeat center center; + background-size: 20px 20px; +} + +#customize-preview.wp-full-overlay-main.iframe-ready:before, +.theme-install-overlay.iframe-ready .wp-full-overlay-main:before { + background-image: none; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + .wp-full-overlay .collapse-sidebar-arrow { + background-image: url(../images/arrows-2x.png); + background-size: 15px 123px; + } + + #customize-preview.wp-full-overlay-main:before, + .customize-loading #customize-container:before, + #customize-controls .notice.notification-overlay.notification-loading:before, + .theme-install-overlay .wp-full-overlay-main:before { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + .available-theme .action-links .delete-theme { + float: none; + margin: 0; + padding: 0; + clear: both; + } + + .available-theme .action-links .delete-theme a { + padding: 0; + } + + .broken-themes table { + width: 100%; + } + + .theme-install-overlay .wp-full-overlay-header .button { + font-size: 13px; + line-height: 2.15384615; + min-height: 30px; + } + + .theme-browser .theme .theme-actions .button { + margin-bottom: 0; + } + + .theme-browser .theme.active .theme-actions, + .theme-browser .theme .theme-actions { + padding-top: 4px; + padding-bottom: 4px; + } + + .upload-theme .wp-upload-form, + .upload-plugin .wp-upload-form { + display: block; + } +} + +@media aural { + .theme .notice:before, + .theme-info .updating-message:before, + .theme-info .updated-message:before, + .theme-install.updating-message:before { + speak: never; + } +} diff --git a/tools/storybook/wordpress/css/themes.min.css b/tools/storybook/wordpress/css/themes.min.css new file mode 100644 index 00000000000..23434ec3079 --- /dev/null +++ b/tools/storybook/wordpress/css/themes.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.themes-php{overflow-y:scroll}body.js .theme-browser.search-loading{display:none}.theme-browser .themes{clear:both}.themes-php:not(.network-admin) .wrap h1{margin-bottom:15px}.themes-php .wrap h1 .button{margin-left:20px}.themes-php .search-form{display:inline}.themes-php .wp-filter-search{position:relative;top:-2px;left:20px;margin:0;width:280px}.theme .notice,.theme .notice.is-dismissible{left:0;margin:0;position:absolute;right:0;top:0}.theme-browser .theme{cursor:pointer;float:left;margin:0 4% 4% 0;position:relative;width:30.6%;border:1px solid #dcdcde;box-shadow:0 1px 1px -1px rgba(0,0,0,.1);box-sizing:border-box}.theme-browser .theme:nth-child(3n){margin-right:0}.theme-browser .theme.focus,.theme-browser .theme:hover{cursor:pointer}.theme-browser .theme .theme-name{font-size:15px;font-weight:600;height:18px;margin:0;padding:15px;box-shadow:inset 0 1px 0 rgba(0,0,0,.1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#fff;background:rgba(255,255,255,.65)}.theme-browser .theme .theme-actions{opacity:0;transition:opacity .1s ease-in-out;height:auto;background:rgba(246,247,247,.7);border-left:1px solid rgba(0,0,0,.05)}.theme-browser .theme.focus .theme-actions,.theme-browser .theme:hover .theme-actions{opacity:1}.theme-browser .theme .theme-actions .button-primary{margin-right:3px}.theme-browser .theme .theme-actions .button{float:none;margin-left:3px}.theme-browser .theme .theme-screenshot{display:block;overflow:hidden;position:relative;-webkit-backface-visibility:hidden;transition:opacity .2s ease-in-out}.theme-browser .theme .theme-screenshot:after{content:"";display:block;padding-top:66.66666%}.theme-browser .theme .theme-screenshot img{height:auto;position:absolute;left:0;top:0;width:100%;transition:opacity .2s ease-in-out}.theme-browser .theme.focus .theme-screenshot,.theme-browser .theme:hover .theme-screenshot{background:#fff}.theme-browser.rendered .theme.focus .theme-screenshot img,.theme-browser.rendered .theme:hover .theme-screenshot img{opacity:.4}.theme-browser .theme .more-details{opacity:0;position:absolute;top:35%;right:20%;left:20%;width:60%;background:#1d2327;background:rgba(0,0,0,.7);color:#fff;font-size:15px;text-shadow:0 1px 0 rgba(0,0,0,.6);-webkit-font-smoothing:antialiased;font-weight:600;padding:15px 12px;text-align:center;border-radius:3px;border:none;transition:opacity .1s ease-in-out;cursor:pointer}.theme-browser .theme .more-details:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #2271b1}.theme-browser .theme.focus{border-color:#4f94d4;box-shadow:0 0 2px rgba(79,148,212,.8)}.theme-browser .theme.focus .more-details{opacity:1}.theme-browser .theme.active.focus .theme-actions{display:block}.theme-browser.rendered .theme.focus .more-details,.theme-browser.rendered .theme:hover .more-details{opacity:1}.theme-browser .theme.active .theme-name{background:#1d2327;color:#fff;padding-right:110px;font-weight:300;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}.theme-browser .customize-control .theme.active .theme-name{padding-right:15px}.theme-browser .theme.active .theme-name span{font-weight:600}.theme-browser .theme.active .theme-actions{background:rgba(44,51,56,.7);border-left:none;opacity:1}.theme-id-container{position:relative}.theme-browser .theme .theme-actions,.theme-browser .theme.active .theme-actions{position:absolute;top:50%;transform:translateY(-50%);right:0;padding:9px 15px;box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}.theme-browser .theme.active .theme-actions .button-primary{margin-right:0}.theme-browser .theme .theme-author{background:#1d2327;color:#f0f0f1;display:none;font-size:14px;margin:0 10px;padding:5px 10px;position:absolute;bottom:56px}.theme-browser .theme.display-author .theme-author{display:block}.theme-browser .theme.display-author .theme-author a{color:inherit}.theme-browser .theme.add-new-theme{border:none;box-shadow:none}.theme-browser .theme.add-new-theme a{text-decoration:none;display:block;position:relative;z-index:1}.theme-browser .theme.add-new-theme a:after{display:block;content:"";background:0 0;background:rgba(0,0,0,0);position:absolute;top:0;left:0;right:0;bottom:0;padding:0;text-shadow:none;border:5px dashed #dcdcde;border:5px dashed rgba(0,0,0,.1);box-sizing:border-box}.theme-browser .theme.add-new-theme span:after{background:#dcdcde;background:rgba(140,143,148,.1);border-radius:50%;display:inline-block;content:"\f132";-webkit-font-smoothing:antialiased;font:normal 74px/115px dashicons;width:100px;height:100px;vertical-align:middle;text-align:center;color:#8c8f94;position:absolute;top:30%;left:50%;margin-left:-50px;text-indent:-4px;padding:0;text-shadow:none;z-index:4}.rtl .theme-browser .theme.add-new-theme span:after{text-indent:4px}.theme-browser .theme.add-new-theme a:focus .theme-screenshot,.theme-browser .theme.add-new-theme a:hover .theme-screenshot{background:0 0}.theme-browser .theme.add-new-theme a:focus span:after,.theme-browser .theme.add-new-theme a:hover span:after{background:#fff;color:#2271b1}.theme-browser .theme.add-new-theme a:focus:after,.theme-browser .theme.add-new-theme a:hover:after{border-color:transparent;color:#fff;background:#2271b1;content:""}.theme-browser .theme.add-new-theme .theme-name{background:0 0;text-align:center;box-shadow:none;font-weight:400;position:relative;top:0;margin-top:-18px;padding-top:0;padding-bottom:48px}.theme-browser .theme.add-new-theme a:focus .theme-name,.theme-browser .theme.add-new-theme a:hover .theme-name{color:#fff;z-index:2}.theme-overlay .theme-backdrop{position:absolute;left:-20px;right:0;top:0;bottom:0;background:#f0f0f1;background:rgba(240,240,241,.9);z-index:10000}.theme-overlay .theme-header{position:absolute;top:0;left:0;right:0;height:48px;border-bottom:1px solid #dcdcde}.theme-overlay .theme-header button{padding:0}.theme-overlay .theme-header .close{cursor:pointer;height:48px;width:50px;text-align:center;float:right;border:0;border-left:1px solid #dcdcde;background-color:transparent;transition:color .1s ease-in-out,background .1s ease-in-out}.theme-overlay .theme-header .close:before{font:normal 22px/50px dashicons!important;color:#787c82;display:inline-block;content:"\f335";font-weight:300}.theme-overlay .theme-header .left,.theme-overlay .theme-header .right{cursor:pointer;color:#787c82;background-color:transparent;height:48px;width:54px;float:left;text-align:center;border:0;border-right:1px solid #dcdcde;transition:color .1s ease-in-out,background .1s ease-in-out}.theme-overlay .theme-header .close:focus,.theme-overlay .theme-header .close:hover,.theme-overlay .theme-header .left:focus,.theme-overlay .theme-header .left:hover,.theme-overlay .theme-header .right:focus,.theme-overlay .theme-header .right:hover{background:#dcdcde;border-color:#c3c4c7;color:#000}.theme-overlay .theme-header .close:focus:before,.theme-overlay .theme-header .close:hover:before{color:#000}.theme-overlay .theme-header .close:focus,.theme-overlay .theme-header .left:focus,.theme-overlay .theme-header .right:focus{box-shadow:none;outline:0}.theme-overlay .theme-header .left.disabled,.theme-overlay .theme-header .left.disabled:hover,.theme-overlay .theme-header .right.disabled,.theme-overlay .theme-header .right.disabled:hover{color:#c3c4c7;background:inherit;cursor:inherit}.theme-overlay .theme-header .left:before,.theme-overlay .theme-header .right:before{font:normal 20px/50px dashicons!important;display:inline;font-weight:300}.theme-overlay .theme-header .left:before{content:"\f341"}.theme-overlay .theme-header .right:before{content:"\f345"}.theme-overlay .theme-wrap{clear:both;position:fixed;top:9%;left:190px;right:30px;bottom:3%;background:#fff;box-shadow:0 1px 20px 5px rgba(0,0,0,.1);z-index:10000;box-sizing:border-box;-webkit-overflow-scrolling:touch}body.folded .theme-browser~.theme-overlay .theme-wrap{left:70px}.theme-overlay .theme-about{position:absolute;top:49px;bottom:57px;left:0;right:0;overflow:auto;padding:2% 4%}.theme-overlay .theme-actions{position:absolute;text-align:center;bottom:0;left:0;right:0;padding:10px 25px 5px;background:#f6f7f7;z-index:30;box-sizing:border-box;border-top:1px solid #f0f0f1}.theme-overlay .theme-actions a{margin-right:5px;margin-bottom:5px}.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"],.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"]{display:none}.broken-themes a.delete-theme,.theme-overlay .theme-actions .delete-theme{color:#d63638;text-decoration:none;border-color:transparent;box-shadow:none;background:0 0}.theme-overlay .theme-actions .delete-theme{position:absolute;right:10px;bottom:5px}.broken-themes a.delete-theme:focus,.broken-themes a.delete-theme:hover,.theme-overlay .theme-actions .delete-theme:focus,.theme-overlay .theme-actions .delete-theme:hover{background:#d63638;color:#fff;border-color:#d63638}.theme-overlay .theme-actions .active-theme,.theme-overlay.active .theme-actions .inactive-theme{display:none}.theme-overlay .theme-actions .inactive-theme,.theme-overlay.active .theme-actions .active-theme{display:block}.theme-overlay .theme-screenshots{float:left;margin:0 30px 0 0;width:55%;max-width:1200px;text-align:center}.theme-overlay .screenshot{border:1px solid #fff;box-sizing:border-box;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.2)}.theme-overlay .screenshot:after{content:"";display:block;padding-top:75%}.theme-overlay .screenshot img{height:auto;position:absolute;left:0;top:0;width:100%}.theme-overlay.small-screenshot .theme-screenshots{position:absolute;width:302px}.theme-overlay.small-screenshot .theme-info{margin-left:350px;width:auto}.theme-overlay .screenshot.thumb{background:#c3c4c7;border:1px solid #f0f0f1;float:none;display:inline-block;margin:10px 5px 0;width:140px;height:80px;cursor:pointer}.theme-overlay .screenshot.thumb:after{content:"";display:block;padding-top:100%}.theme-overlay .screenshot.thumb img{cursor:pointer;height:auto;position:absolute;left:0;top:0;width:100%;height:auto}.theme-overlay .screenshot.selected{background:0 0;border:2px solid #72aee6}.theme-overlay .screenshot.selected img{opacity:.8}.theme-browser .theme .theme-screenshot.blank,.theme-overlay .screenshot.blank{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=)}.theme-overlay .theme-info{width:40%;float:left}.theme-overlay .current-label{background:#2c3338;color:#fff;font-size:11px;display:inline-block;padding:2px 8px;border-radius:2px;margin:0 0 -10px;-webkit-user-select:none;user-select:none}.theme-overlay .theme-name{color:#1d2327;font-size:32px;font-weight:100;margin:10px 0 0;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word}.theme-overlay .theme-version{color:#646970;font-size:13px;font-weight:400;float:none;display:inline-block;margin-left:10px}.theme-overlay .theme-author{margin:15px 0 25px;color:#646970;font-size:16px;font-weight:400;line-height:inherit}.theme-overlay .toggle-auto-update{display:inline-flex;align-items:center;min-height:20px;vertical-align:top}.theme-overlay .theme-autoupdate .toggle-auto-update{text-decoration:none}.theme-overlay .theme-autoupdate .toggle-auto-update .label{text-decoration:underline}.theme-overlay .theme-description{color:#50575e;font-size:15px;font-weight:400;line-height:1.5;margin:30px 0 0}.theme-overlay .theme-tags{border-top:3px solid #f0f0f1;color:#646970;font-size:13px;font-weight:400;margin:30px 0 0;padding-top:20px}.theme-overlay .theme-tags span{color:#3c434a;font-weight:600;margin-right:5px}.theme-overlay .parent-theme{background:#fff;border:1px solid #f0f0f1;border-left:4px solid #72aee6;font-size:14px;font-weight:400;margin-top:30px;padding:10px 10px 10px 20px}.theme-overlay .parent-theme strong{font-weight:600}.single-theme .theme,.single-theme .theme-overlay .theme-backdrop,.single-theme .theme-overlay .theme-header{display:none}.single-theme .theme-overlay .theme-wrap{clear:both;min-height:330px;position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:10}.single-theme .theme-overlay .theme-about{padding:30px 30px 70px;position:static}.single-theme .theme-overlay .theme-actions{position:absolute}@media only screen and (min-width:2000px){#wpwrap .theme-browser .theme{width:17.6%;margin:0 3% 3% 0}#wpwrap .theme-browser .theme:nth-child(3n),#wpwrap .theme-browser .theme:nth-child(4n){margin-right:3%}#wpwrap .theme-browser .theme:nth-child(5n){margin-right:0}}@media only screen and (min-width:1680px){.theme-overlay .theme-wrap{width:1450px;margin:0 auto}}@media only screen and (min-width:1640px){.theme-browser .theme{width:22.7%;margin:0 3% 3% 0}.theme-browser .theme .theme-screenshot:after{padding-top:75%}.theme-browser .theme:nth-child(3n){margin-right:3%}.theme-browser .theme:nth-child(4n){margin-right:0}}@media only screen and (max-width:1120px){.theme-browser .theme{width:47.5%;margin-right:0}.theme-browser .theme:nth-child(even){margin-right:0}.theme-browser .theme:nth-child(odd){margin-right:5%}}@media only screen and (max-width:960px){.theme-overlay .theme-wrap{left:65px}}@media only screen and (max-width:780px){.theme-overlay .theme-wrap,body.folded .theme-overlay .theme-wrap{top:0;right:0;bottom:0;left:0;padding:70px 20px 20px;border:none;z-index:100000;position:fixed}.theme-browser .theme.active .theme-name span{display:none}.theme-overlay .theme-screenshots{width:40%}.theme-overlay .theme-info{width:50%}.single-theme .theme-wrap{padding:10px}.theme-browser .theme .theme-actions{padding:5px 10px 4px}.theme-overlay.small-screenshot .theme-screenshots{position:static;float:none;max-width:302px}.theme-overlay.small-screenshot .theme-info{margin-left:0;width:auto}.theme.focus .more-details,.theme:hover .more-details,.theme:not(.active):focus .theme-actions,.theme:not(.active):hover .theme-actions{display:none}.theme-browser.rendered .theme.focus .theme-screenshot img,.theme-browser.rendered .theme:hover .theme-screenshot img{opacity:1}}@media only screen and (max-width:480px){.theme-browser .theme{width:100%;margin-right:0}.theme-browser .theme:nth-child(2n),.theme-browser .theme:nth-child(3n){margin-right:0}.theme-overlay .theme-about{bottom:105px}.theme-overlay .theme-actions{padding-left:4%;padding-right:4%}}@media only screen and (max-width:650px){.theme-overlay .theme-description{margin-left:0}.theme-overlay .theme-actions .delete-theme{position:relative;right:auto;bottom:auto}.theme-overlay .theme-actions .inactive-theme{display:inline}.theme-overlay .theme-screenshots{width:100%;float:none}.theme-overlay .theme-info{width:100%}.theme-overlay .theme-author{margin:5px 0 15px}.theme-overlay .current-label{margin-top:10px;font-size:13px}.themes-php .wp-filter-search{float:none;clear:both;left:0;right:0;margin:-5px 0 20px;width:100%;max-width:280px}.theme-browser .theme.add-new-theme span:after{font:normal 60px/90px dashicons;width:80px;height:80px;top:30%;left:50%;text-indent:0;margin-left:-40px}.single-theme .theme-wrap{margin:0 -12px 0 -10px;padding:10px}.single-theme .theme-overlay .theme-about{padding:10px;overflow:visible}.single-theme .current-label{display:none}.single-theme .theme-overlay .theme-actions{position:static}}.broken-themes{clear:both}.broken-themes table{text-align:left;width:50%;border-spacing:3px;padding:3px}.update-php .wrap{max-width:40rem}.theme-browser .theme .theme-installed{background:#2271b1}.theme-browser .theme .notice-success p:before{color:#68de7c;content:"\f147";display:inline-block;font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:top}.theme-install.updated-message:before{content:""}.theme-install-php .wp-filter{padding-left:20px}.theme-install-php a.browse-themes,.theme-install-php a.upload{cursor:pointer}.plugin-install-tab-upload .upload-view-toggle .upload,.upload-view-toggle .browse{display:none}.plugin-install-tab-upload .upload-view-toggle .browse{display:inline}.upload-plugin,.upload-theme{box-sizing:border-box;display:none;margin:0;padding:50px 0;width:100%;overflow:hidden;position:relative;top:10px;text-align:center}.plugin-install-tab-upload .upload-plugin,.show-upload-view .upload-plugin,.show-upload-view .upload-plugin-wrap,.show-upload-view .upload-theme{display:block}.upload-plugin .wp-upload-form,.upload-theme .wp-upload-form{background:#f6f7f7;border:1px solid #c3c4c7;padding:30px;margin:30px auto;display:inline-flex;justify-content:space-between;align-items:center}.upload-plugin .wp-upload-form input[type=file],.upload-theme .wp-upload-form input[type=file]{margin-right:10px}.upload-plugin .install-help,.upload-theme .install-help{color:#50575e;font-size:18px;font-style:normal;margin:0;padding:0;text-align:center}p.no-themes,p.no-themes-local{clear:both;color:#646970;font-size:18px;font-style:normal;margin:0;padding:100px 0;text-align:center;display:none}.no-results p.no-themes{display:block}.theme-install-php .add-new-theme{display:none!important}@media only screen and (max-width:1120px){.upload-theme .wp-upload-form{margin:20px 0;max-width:100%}.upload-theme .install-help{font-size:15px;padding:20px 0 0}}.theme-details .theme-rating{line-height:1.9}.theme-details .star-rating{display:inline}.theme-details .no-rating,.theme-details .num-ratings{font-size:11px;color:#646970}.theme-details .no-rating{display:block;line-height:1.9}.update-from-upload-comparison{border-top:1px solid #dcdcde;border-bottom:1px solid #dcdcde;text-align:left;margin:1rem 0 1.4rem;border-collapse:collapse;width:100%}.update-from-upload-comparison tr:last-child td{height:1.4rem;vertical-align:top}.update-from-upload-comparison tr:first-child th{font-weight:700;height:1.4rem;vertical-align:bottom}.update-from-upload-comparison td.name-label{text-align:right}.update-from-upload-comparison td,.update-from-upload-comparison th{padding:.4rem 1.4rem}.update-from-upload-comparison td.warning{color:#d63638}.update-from-upload-actions{margin-top:1.4rem}.appearance_page_custom-header #headimg{border:1px solid #dcdcde;overflow:hidden;width:100%}.appearance_page_custom-header #upload-form p label{font-size:12px}.appearance_page_custom-header .available-headers .default-header{float:left;margin:0 20px 20px 0}.appearance_page_custom-header .random-header{clear:both;margin:0 20px 20px 0;vertical-align:middle}.appearance_page_custom-header .available-headers label input,.appearance_page_custom-header .random-header label input{margin-right:10px}.appearance_page_custom-header .available-headers label img{vertical-align:middle}div#custom-background-image{min-height:100px;border:1px solid #dcdcde}div#custom-background-image img{max-width:400px;max-height:300px}.background-position-control input[type=radio]:checked~.button{background:#f0f0f1;border-color:#8c8f94;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);z-index:1}.background-position-control input[type=radio]:focus~.button{border-color:#4f94d4;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(34,113,177,.8);color:#1d2327}.background-position-control .background-position-center-icon,.background-position-control .background-position-center-icon:before{display:inline-block;line-height:1;text-align:center;transition:background-color .1s ease-in}.background-position-control .background-position-center-icon{height:20px;margin-top:13px;vertical-align:top;width:20px}.background-position-control .background-position-center-icon:before{background-color:#50575e;border-radius:50%;content:"";height:12px;width:12px}.background-position-control .button:hover .background-position-center-icon:before,.background-position-control input[type=radio]:focus~.button .background-position-center-icon:before{background-color:#1d2327}.background-position-control .button-group{display:block}.background-position-control .button-group .button{border-radius:0;box-shadow:none;height:40px!important;line-height:2.9!important;margin:0 -1px 0 0!important;padding:0 10px 1px!important;position:relative}.background-position-control .button-group .button:active,.background-position-control .button-group .button:focus,.background-position-control .button-group .button:hover{z-index:1}.background-position-control .button-group:last-child .button{box-shadow:0 1px 0 #c3c4c7}.background-position-control .button-group>label{margin:0!important}.background-position-control .button-group:first-child>label:first-child .button{border-radius:3px 0 0}.background-position-control .button-group:first-child>label:first-child .dashicons{transform:rotate(45deg)}.background-position-control .button-group:first-child>label:last-child .button{border-radius:0 3px 0 0}.background-position-control .button-group:first-child>label:last-child .dashicons{transform:rotate(-45deg)}.background-position-control .button-group:last-child>label:first-child .button{border-radius:0 0 0 3px}.background-position-control .button-group:last-child>label:first-child .dashicons{transform:rotate(-45deg)}.background-position-control .button-group:last-child>label:last-child .button{border-radius:0 0 3px}.background-position-control .button-group:last-child>label:last-child .dashicons{transform:rotate(45deg)}.background-position-control .button-group .dashicons{margin-top:9px}.background-position-control .button-group+.button-group{margin-top:-1px}body.full-overlay-active{overflow:hidden;visibility:hidden}.wp-full-overlay{background:0 0;z-index:500000;position:fixed;overflow:visible;top:0;bottom:0;left:0;right:0;height:100%;min-width:0}.wp-full-overlay-sidebar{box-sizing:border-box;position:fixed;min-width:300px;max-width:600px;width:18%;height:100%;top:0;bottom:0;left:0;padding:0;margin:0;z-index:10;background:#f0f0f1;border-right:none}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{overflow:visible}.wp-full-overlay.collapsed,.wp-full-overlay.expanded .wp-full-overlay-sidebar{margin-left:0!important}.wp-full-overlay.expanded{margin-left:300px}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{margin-left:-300px}@media screen and (min-width:1667px){.wp-full-overlay.expanded{margin-left:18%}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{margin-left:-18%}}@media screen and (min-width:3333px){.wp-full-overlay.expanded{margin-left:600px}.wp-full-overlay.collapsed .wp-full-overlay-sidebar{margin-left:-600px}}.wp-full-overlay-sidebar:after{content:"";display:block;position:absolute;top:0;bottom:0;right:0;width:3px;z-index:1000}.wp-full-overlay-main{position:absolute;left:0;right:0;top:0;bottom:0;height:100%}.wp-full-overlay-sidebar .wp-full-overlay-header{position:absolute;left:0;right:0;height:45px;padding:0 15px;line-height:3.2;z-index:10;margin:0;border-top:none;box-shadow:none}.wp-full-overlay-sidebar .wp-full-overlay-header a.back{margin-top:9px}.wp-full-overlay-sidebar .wp-full-overlay-footer{bottom:0;border-bottom:none;border-top:none;box-shadow:none}.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content{position:absolute;top:45px;bottom:45px;left:0;right:0;overflow:auto}.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header{padding:0}.theme-install-overlay .close-full-overlay,.theme-install-overlay .next-theme,.theme-install-overlay .previous-theme{display:block;position:relative;float:left;width:45px;height:45px;background:#f0f0f1;border-right:1px solid #dcdcde;color:#3c434a;cursor:pointer;text-decoration:none;transition:color .1s ease-in-out,background .1s ease-in-out}.theme-install-overlay .close-full-overlay:focus,.theme-install-overlay .close-full-overlay:hover,.theme-install-overlay .next-theme:focus,.theme-install-overlay .next-theme:hover,.theme-install-overlay .previous-theme:focus,.theme-install-overlay .previous-theme:hover{background:#dcdcde;border-color:#c3c4c7;color:#000;outline:0;box-shadow:none}.theme-install-overlay .close-full-overlay:before{font:normal 22px/1 dashicons;content:"\f335";position:relative;top:7px;left:13px}.theme-install-overlay .previous-theme:before{font:normal 20px/1 dashicons;content:"\f341";position:relative;top:6px;left:14px}.theme-install-overlay .next-theme:before{font:normal 20px/1 dashicons;content:"\f345";position:relative;top:6px;left:13px}.theme-install-overlay .next-theme.disabled,.theme-install-overlay .next-theme.disabled:focus,.theme-install-overlay .next-theme.disabled:hover,.theme-install-overlay .previous-theme.disabled,.theme-install-overlay .previous-theme.disabled:focus,.theme-install-overlay .previous-theme.disabled:hover{color:#c3c4c7;background:#f0f0f1;cursor:default;pointer-events:none}.theme-install-overlay .close-full-overlay,.theme-install-overlay .next-theme,.theme-install-overlay .previous-theme{border-left:0;border-top:0;border-bottom:0}.theme-install-overlay .close-full-overlay:before,.theme-install-overlay .next-theme:before,.theme-install-overlay .previous-theme:before{top:2px;left:0}.wp-core-ui .wp-full-overlay .collapse-sidebar{position:fixed;bottom:0;left:0;padding:9px 0 9px 10px;height:45px;color:#646970;outline:0;line-height:1;background-color:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important}.wp-core-ui .wp-full-overlay .collapse-sidebar:focus,.wp-core-ui .wp-full-overlay .collapse-sidebar:hover{color:#2271b1}.wp-full-overlay .collapse-sidebar-arrow,.wp-full-overlay .collapse-sidebar-label{display:inline-block;vertical-align:middle;line-height:1.6}.wp-full-overlay .collapse-sidebar-arrow{width:20px;height:20px;margin:0 2px;border-radius:50%;overflow:hidden}.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow,.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.wp-full-overlay .collapse-sidebar-label{margin-left:3px}.wp-full-overlay.collapsed .collapse-sidebar-label{display:none}.wp-full-overlay .collapse-sidebar-arrow:before{display:block;content:"\f148";background:#f0f0f1;font:normal 20px/1 dashicons;speak:never;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar{padding:9px 10px}.rtl .wp-full-overlay .collapse-sidebar-arrow:before,.wp-full-overlay.collapsed .collapse-sidebar-arrow:before{transform:rotate(180.001deg)}.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before{transform:none}.wp-full-overlay,.wp-full-overlay .collapse-sidebar,.wp-full-overlay-main,.wp-full-overlay-sidebar{transition-property:left,right,top,bottom,width,margin;transition-duration:.2s}.wp-full-overlay{background:#1d2327}.wp-full-overlay-main{background-color:#f0f0f1}.expanded .wp-full-overlay-footer{position:fixed;bottom:0;left:0;min-width:299px;max-width:599px;width:18%;width:calc(18% - 1px);height:45px;border-top:1px solid #dcdcde;background:#f0f0f1}.wp-full-overlay-footer .devices-wrapper{float:right}.wp-full-overlay-footer .devices{position:relative;background:#f0f0f1;box-shadow:-20px 0 10px -5px #f0f0f1}.wp-full-overlay-footer .devices button{cursor:pointer;background:0 0;border:none;height:45px;padding:0 3px;margin:0 0 0 -4px;box-shadow:none;border-top:1px solid transparent;border-bottom:4px solid transparent;transition:.15s color ease-in-out,.15s background-color ease-in-out,.15s border-color ease-in-out}.wp-full-overlay-footer .devices button:focus{box-shadow:none;outline:0}.wp-full-overlay-footer .devices button:before{display:inline-block;-webkit-font-smoothing:antialiased;font:normal 20px/30px dashicons;vertical-align:top;margin:3px 0;padding:4px 8px;color:#646970}.wp-full-overlay-footer .devices button.active{border-bottom-color:#1d2327}.wp-full-overlay-footer .devices button:focus,.wp-full-overlay-footer .devices button:hover{background-color:#fff}.wp-full-overlay-footer .devices button.active:hover,.wp-full-overlay-footer .devices button:focus{border-bottom-color:#2271b1}.wp-full-overlay-footer .devices button.active:before{color:#1d2327}.wp-full-overlay-footer .devices button:focus:before,.wp-full-overlay-footer .devices button:hover:before{color:#2271b1}.wp-full-overlay-footer .devices .preview-desktop:before{content:"\f472"}.wp-full-overlay-footer .devices .preview-tablet:before{content:"\f471"}.wp-full-overlay-footer .devices .preview-mobile:before{content:"\f470"}@media screen and (max-width:1024px){.wp-full-overlay-footer .devices{display:none}}.collapsed .wp-full-overlay-footer .devices button:before{display:none}.preview-mobile .wp-full-overlay-main{margin:auto 0 auto -160px;width:320px;height:480px;max-height:100%;max-width:100%;left:50%}.preview-tablet .wp-full-overlay-main{margin:auto 0 auto -360px;width:720px;height:1080px;max-height:100%;max-width:100%;left:50%}.customize-support .hide-if-customize,.customize-support .wp-core-ui .hide-if-customize,.customize-support.wp-core-ui .hide-if-customize,.no-customize-support .hide-if-no-customize,.no-customize-support .wp-core-ui .hide-if-no-customize,.no-customize-support.wp-core-ui .hide-if-no-customize{display:none}#customize-container,#customize-controls .notice.notification-overlay{background:#f0f0f1;z-index:500000;position:fixed;overflow:visible;top:0;bottom:0;left:0;right:0;height:100%}#customize-container{display:none}#customize-container,.theme-install-overlay{visibility:visible}.customize-loading #customize-container iframe{opacity:0}#customize-container iframe,.theme-install-overlay iframe{height:100%;width:100vw;z-index:20;transition:opacity .3s}#customize-controls{margin-top:0}.theme-install-overlay{display:none}.theme-install-overlay.single-theme{display:block}.install-theme-info{display:none;padding:10px 20px 60px}.single-theme .install-theme-info{padding-top:15px}.theme-install-overlay .install-theme-info{display:block}.install-theme-info .theme-install{float:right;margin-top:18px}.install-theme-info .theme-name{font-size:16px;line-height:1.5;margin-bottom:0;margin-top:0}.install-theme-info .theme-screenshot{margin:15px 0;width:258px;border:1px solid #c3c4c7;position:relative;overflow:hidden}.install-theme-info .theme-screenshot>img{width:100%;height:auto;position:absolute;left:0;top:0}.install-theme-info .theme-screenshot:after{content:"";display:block;padding-top:66.66666666%}.install-theme-info .theme-details{overflow:hidden}.theme-details .theme-version{margin:15px 0}.theme-details .theme-description{float:left;color:#646970;line-height:1.6;max-width:100%}.theme-install-overlay .wp-full-overlay-header .button{float:right;margin:8px 10px 0 0}.theme-install-overlay .wp-full-overlay-sidebar{background:#f0f0f1;border-right:1px solid #dcdcde}.theme-install-overlay .wp-full-overlay-sidebar-content{background:#fff;border-top:1px solid #dcdcde;border-bottom:1px solid #dcdcde}.theme-install-overlay .wp-full-overlay-main{position:absolute;z-index:0;background-color:#f0f0f1}.customize-loading #customize-container{background-color:#f0f0f1}#customize-controls .notice.notification-overlay.notification-loading:before,#customize-preview.wp-full-overlay-main:before,.customize-loading #customize-container:before,.theme-install-overlay .wp-full-overlay-main:before{content:"";display:block;width:20px;height:20px;position:absolute;left:50%;top:50%;z-index:-1;margin:-10px 0 0 -10px;transform:translateZ(0);background:transparent url(../images/spinner.gif) no-repeat center center;background-size:20px 20px}#customize-preview.wp-full-overlay-main.iframe-ready:before,.theme-install-overlay.iframe-ready .wp-full-overlay-main:before{background-image:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.wp-full-overlay .collapse-sidebar-arrow{background-image:url(../images/arrows-2x.png);background-size:15px 123px}#customize-controls .notice.notification-overlay.notification-loading:before,#customize-preview.wp-full-overlay-main:before,.customize-loading #customize-container:before,.theme-install-overlay .wp-full-overlay-main:before{background-image:url(../images/spinner-2x.gif)}}@media screen and (max-width:782px){.available-theme .action-links .delete-theme{float:none;margin:0;padding:0;clear:both}.available-theme .action-links .delete-theme a{padding:0}.broken-themes table{width:100%}.theme-install-overlay .wp-full-overlay-header .button{font-size:13px;line-height:2.15384615;min-height:30px}.theme-browser .theme .theme-actions .button{margin-bottom:0}.theme-browser .theme .theme-actions,.theme-browser .theme.active .theme-actions{padding-top:4px;padding-bottom:4px}.upload-plugin .wp-upload-form,.upload-theme .wp-upload-form{display:block}}@media aural{.theme .notice:before,.theme-info .updated-message:before,.theme-info .updating-message:before,.theme-install.updating-message:before{speak:never}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/widgets-rtl.css b/tools/storybook/wordpress/css/widgets-rtl.css new file mode 100644 index 00000000000..7f8b8775288 --- /dev/null +++ b/tools/storybook/wordpress/css/widgets-rtl.css @@ -0,0 +1,877 @@ +/*! This file is auto-generated */ +/* General Widgets Styles */ + +.widget { + margin: 0 auto 10px; + position: relative; + box-sizing: border-box; +} + +.widget.open { + z-index: 99; +} +.widget.open:focus-within { + z-index: 100; +} + +.widget-top { + font-size: 13px; + font-weight: 600; + background: #f6f7f7; +} + +.widget-top .widget-action { + border: 0; + margin: 0; + padding: 10px; + background: none; + cursor: pointer; +} + +.widget-title h3, +.widget-title h4 { + margin: 0; + padding: 15px; + font-size: 1em; + line-height: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + -webkit-user-select: none; + user-select: none; +} + +.widgets-holder-wrap .widget-inside { + border-top: none; + padding: 1px 15px 15px; + line-height: 1.23076923; +} + +.widget.widget-dirty .widget-control-close-wrapper { + display: none; +} + +.in-widget-title, +#widgets-right a.widget-control-edit, +#available-widgets .widget-description { + color: #646970; +} + +.deleting .widget-title, +.deleting .widget-top .widget-action .toggle-indicator:before { + color: #a7aaad; +} + +/* Media Widgets */ +.wp-core-ui .media-widget-control.selected .placeholder, +.wp-core-ui .media-widget-control.selected .not-selected, +.wp-core-ui .media-widget-control .selected { + display: none; +} + +.media-widget-control.selected .selected { + display: inline-block; +} + +.media-widget-buttons { + text-align: right; + margin-top: 0; +} + +.media-widget-control .media-widget-buttons .button { + width: auto; + height: auto; + margin-top: 12px; + white-space: normal; +} + +.media-widget-buttons .button:first-child { + margin-left: 8px; +} + +.media-widget-control .attachment-media-view .button-add-media, +.media-widget-control .placeholder { + border: 1px dashed #c3c4c7; + box-sizing: border-box; + cursor: pointer; + line-height: 1.6; + padding: 9px 0; + position: relative; + text-align: center; + width: 100%; +} + +.media-widget-control .attachment-media-view .button-add-media { + cursor: pointer; + background-color: #f0f0f1; + color: #2c3338; +} + +.media-widget-control .attachment-media-view .button-add-media:hover { + background-color: #fff; +} + +.media-widget-control .attachment-media-view .button-add-media:focus { + background-color: #fff; + border-style: solid; + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.media-widget-control .media-widget-preview { + background: transparent; + text-align: center; +} +.media-widget-control .media-widget-preview .notice { + text-align: initial; +} +.media-frame .media-widget-embed-notice p code, +.media-widget-control .notice p code { + padding: 0 0 0 3px; +} +.media-frame .media-widget-embed-notice { + margin-top: 16px; +} +.media-widget-control .media-widget-preview img { + max-width: 100%; + vertical-align: middle; + background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 100% 0, 10px 10px; + background-size: 20px 20px; +} +.media-widget-control .media-widget-preview .wp-video-shortcode { + background: #000; +} + +.media-frame.media-widget .media-toolbar-secondary { + min-width: 300px; +} + +.media-frame.media-widget .image-details .embed-media-settings .setting.align, +.media-frame.media-widget .attachment-display-settings .setting.align, +.media-frame.media-widget .embed-media-settings .setting.align, +.media-frame.media-widget .embed-media-settings .legend-inline, +.media-frame.media-widget .embed-link-settings .setting.link-text, +.media-frame.media-widget .replace-attachment, +.media-frame.media-widget .checkbox-setting.autoplay { + display: none; +} + +.media-widget-video-preview { + width: 100%; +} + +.media-widget-video-link { + display: inline-block; + min-height: 132px; + width: 100%; + background: #000; +} + +.media-widget-video-link .dashicons { + font: normal 60px/1 'dashicons'; + position: relative; + width: 100%; + top: -90px; + color: #fff; + text-decoration: none; +} + +.media-widget-video-link.no-poster .dashicons { + top: 30px; +} + +.media-frame #embed-url-field.invalid, +.media-widget-image-link > .link:invalid { + border: 1px solid #d63638; +} + +.media-widget-image-link { + margin: 1em 0; +} + +.media-widget-gallery-preview { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + margin: -1.79104477%; +} + +.media-widget-preview.media_gallery, +.media-widget-preview.media_image { + cursor: pointer; +} + +.media-widget-preview .placeholder { + background: #f0f0f1; +} + +.media-widget-gallery-preview .gallery-item { + box-sizing: border-box; + width: 50%; + margin: 0; + background: transparent; +} + +.media-widget-gallery-preview .gallery-item .gallery-icon { + margin: 4.5%; +} + +/* + * Use targeted nth-last-child selectors to control the size of each image + * based on how many gallery items are present in the grid. + * See: https://alistapart.com/article/quantity-queries-for-css + */ +.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child, +.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item, +.media-widget-gallery-preview .gallery-item:nth-last-child(n+5), +.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item, +.media-widget-gallery-preview .gallery-item:nth-last-child(n+6), +.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item { + max-width: 33.33%; +} + +.media-widget-gallery-preview .gallery-item img { + height: auto; + vertical-align: bottom; +} + +.media-widget-gallery-preview .gallery-icon { + position: relative; +} + +.media-widget-gallery-preview .gallery-icon-placeholder { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.5); +} + +.media-widget-gallery-preview .gallery-icon-placeholder-text { + font-weight: 600; + font-size: 2em; + color: #fff; +} + + +/* Widget Dragging Helpers */ +.widget.ui-draggable-dragging { + min-width: 100%; +} + +.widget.ui-sortable-helper { + opacity: 0.8; +} + +.widget-placeholder { + border: 1px dashed #c3c4c7; + margin: 0 auto 10px; + height: 45px; + width: 100%; + box-sizing: border-box; +} + +#widgets-right .widget-placeholder { + margin-top: 0; +} + +#widgets-right .closed .widget-placeholder { + height: 0; + border: 0; + margin-top: -10px; +} + +/* Widget Sidebars */ +.sidebar-name { + position: relative; + box-sizing: border-box; +} + +.js .sidebar-name { + cursor: pointer; +} + +.sidebar-name .handlediv { + float: left; + width: 38px; + height: 38px; + border: 0; + margin: 0; + padding: 8px; + background: none; + cursor: pointer; + outline: none; +} + +#widgets-right .sidebar-name .handlediv { + margin: 5px 0 0 3px; +} + +.sidebar-name .handlediv:focus { + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +#widgets-left .sidebar-name .toggle-indicator { + display: none; +} + +#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator, +#widgets-left .sidebar-name:hover .toggle-indicator, +#widgets-left .sidebar-name .handlediv:focus .toggle-indicator { + display: block; +} + +.sidebar-name .toggle-indicator:before { + padding: 1px 0 1px 2px; + border-radius: 50%; +} + +.sidebar-name .handlediv:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.sidebar-name h2, +.sidebar-name h3 { + margin: 0; + padding: 8px 10px; + overflow: hidden; + white-space: normal; + line-height: 1.5; +} + +.widgets-holder-wrap .description { + padding: 0 0 15px; + margin: 0; + font-style: normal; + color: #646970; +} + +.widget-holder .description, +.inactive-sidebar .description { + color: #50575e; +} + +#widgets-right .widgets-holder-wrap .description { + padding-right: 7px; + padding-left: 7px; +} + +/* Widgets 2-col Layout */ +div.widget-liquid-left { + margin: 0; + width: 38%; + float: right; +} + +div.widget-liquid-right { + float: left; + width: 58%; +} + +/* Widgets Left - Available Widgets */ + +div#widgets-left { + padding-top: 12px; +} + +div#widgets-left .closed .sidebar-name, +div#widgets-left .inactive-sidebar.closed .sidebar-name { + margin-bottom: 10px; +} + +div#widgets-left .sidebar-name h2, +div#widgets-left .sidebar-name h3 { + padding: 10px 0; + margin: 0 0 0 10px; +} + +#widgets-left .widgets-holder-wrap, +div#widgets-left .widget-holder { + background: transparent; + border: none; +} + +#widgets-left .widgets-holder-wrap { + border: none; + box-shadow: none; +} + +#available-widgets .widget { + margin: 0; +} + +#available-widgets .widget:nth-child(odd) { + clear: both; +} + +#available-widgets .widget .widget-description { + display: block; + padding: 10px 15px; + font-size: 12px; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; +} + +#available-widgets #widget-list { + position: relative; +} + +/* Inactive Sidebars */ +#widgets-left .inactive-sidebar { + clear: both; + width: 100%; + background: transparent; + padding: 0; + margin: 0 0 20px; + border: none; + box-shadow: none; +} + +#widgets-left .inactive-sidebar.first { + margin-top: 40px; +} + +/* Not sure what this is for... */ +div#widgets-left .inactive-sidebar .widget.expanded { + right: auto; +} + +.widget-title-action { + float: left; + position: relative; +} + +div#widgets-left .inactive-sidebar .widgets-sortables { + min-height: 42px; + padding: 0; + background: transparent; + margin: 0; + position: relative; +} + +/* Widgets Right */ + +div#widgets-right .sidebars-column-1, +div#widgets-right .sidebars-column-2 { + max-width: 450px; +} + +div#widgets-right .widgets-holder-wrap { + margin: 10px 0 0; +} + +div#widgets-right .sidebar-description { + min-height: 20px; + margin-top: -5px; +} + +div#widgets-right .sidebar-name h2, +div#widgets-right .sidebar-name h3 { + padding: 15px 7px 15px 15px; +} + +div#widgets-right .widget-top { + padding: 0; +} + +div#widgets-right .widgets-sortables { + padding: 0 8px; + margin-bottom: 9px; + position: relative; + min-height: 123px; +} + +div#widgets-right .closed .widgets-sortables { + min-height: 0; + margin-bottom: 0; +} + +.sidebar-name .spinner, +.remove-inactive-widgets .spinner { + float: none; + position: relative; + top: -2px; + margin: -5px 5px; +} + +.sidebar-name .spinner { + position: absolute; + top: 18px; + left: 30px; +} + +/* Dragging a widget over a closed sidebar */ +#widgets-right .widgets-holder-wrap.widget-hover { + border-color: #787c82; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +/* Accessibility Mode */ +.widget-access-link { + float: left; + margin: -5px 10px 10px 0; +} + +.widgets_access #widgets-left .widget .widget-top { + cursor: auto; +} + +.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description, +.widgets_access #wpwrap .widgets-holder-wrap.closed .widget, +.widgets_access #wpwrap .widget-control-edit { + display: block; +} + +.widgets_access #widgets-left .widget .widget-top:hover, +.widgets_access #widgets-right .widget .widget-top:hover { + border-color: #dcdcde; +} + +#available-widgets .widget-control-edit .edit, +#available-widgets .widget-action .edit, +#widgets-left .inactive-sidebar .widget-control-edit .add, +#widgets-left .inactive-sidebar .widget-action .add, +#widgets-right .widget-control-edit .add, +#widgets-right .widget-action .add { + display: none; +} + +.widget-control-edit { + display: block; + color: #646970; + background: #f0f0f1; + padding: 0 15px; + line-height: 3.30769230; + border-right: 1px solid #dcdcde; +} + +#widgets-left .widget-control-edit:hover, +#widgets-right .widget-control-edit:hover { + color: #fff; + background: #3c434a; + border-right: 0; + outline: 1px solid #3c434a; +} + +.widgets-holder-wrap .sidebar-name, +.widgets-holder-wrap .sidebar-description { + -webkit-user-select: none; + user-select: none; +} + +.editwidget { + margin: 0 auto; +} + +.editwidget .widget-inside { + display: block; + padding: 0 15px; +} + +.editwidget .widget-control-actions { + margin-top: 20px; +} + +.js .widgets-holder-wrap.closed .widget, +.js .widgets-holder-wrap.closed .sidebar-description, +.js .widgets-holder-wrap.closed .remove-inactive-widgets, +.js .widgets-holder-wrap.closed .description, +.js .closed br.clear { + display: none; +} + +.js .widgets-holder-wrap.closed .widget.ui-sortable-helper { + display: block; +} + +/* Hide Widget Settings by Default */ +.widget-inside, +.widget-description { + display: none; +} + +.widget-inside { + background: #fff; +} + +.widget-inside select { + max-width: 100%; +} + +/* Dragging widgets over the available widget area show's a "Deactivate" message */ +#removing-widget { + display: none; + font-weight: 400; + padding-right: 15px; + font-size: 12px; + line-height: 1; + color: #000; +} + +.js #removing-widget { + color: #72aee6; +} + +.widget-control-noform, +#access-off, +.widgets_access .widget-action, +.widgets_access .handlediv, +.widgets_access #access-on, +.widgets_access .widget-holder .description, +.no-js .widget-holder .description { + display: none; +} + +.widgets_access .widget-holder, +.widgets_access #widget-list { + padding-top: 10px; +} + +.widgets_access #access-off { + display: inline; +} + +.widgets_access .sidebar-name, +.widgets_access .widget .widget-top { + cursor: default; +} + + +/* Widgets Area Chooser */ +.widget-liquid-left #widgets-left.chooser #available-widgets .widget, +.widget-liquid-left #widgets-left.chooser .inactive-sidebar { + transition: opacity 0.1s linear; +} + +.widget-liquid-left #widgets-left.chooser #available-widgets .widget, +.widget-liquid-left #widgets-left.chooser .inactive-sidebar { + /* -webkit-filter: blur(1px); */ + opacity: 0.2; + pointer-events: none; +} + +.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question { + /* -webkit-filter: none; */ + opacity: 1; + pointer-events: auto; +} + +.widgets-chooser ul, +#widgets-left .widget-in-question .widget-top, +#available-widgets .widget-top:hover, +div#widgets-right .widget-top:hover, +#widgets-left .widget-top:hover { + border-color: #8c8f94; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.widgets-chooser ul.widgets-chooser-sidebars { + margin: 0; + list-style-type: none; + max-height: 300px; + overflow: auto; +} + +.widgets-chooser { + display: none; +} + +.widgets-chooser ul { + border: 1px solid #c3c4c7; +} + +.widgets-chooser li { + border-bottom: 1px solid #c3c4c7; + background: #fff; + margin: 0; + position: relative; +} + +.widgets-chooser .widgets-chooser-button { + width: 100%; + padding: 10px 35px 10px 15px; + background: transparent; + border: 0; + box-sizing: border-box; + text-align: right; + cursor: pointer; + transition: background 0.2s ease-in-out; +} + +/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ +.widgets-chooser .widgets-chooser-button:hover, +.widgets-chooser .widgets-chooser-button:focus { + outline: none; + text-decoration: underline; +} + +.widgets-chooser li:last-child { + border: none; +} + +.widgets-chooser .widgets-chooser-selected .widgets-chooser-button { + background: #2271b1; + color: #fff; +} + +.widgets-chooser .widgets-chooser-selected:before { + content: "\f147"; + display: block; + -webkit-font-smoothing: antialiased; + font: normal 26px/1 dashicons; + color: #fff; + position: absolute; + top: 7px; + right: 5px; +} + +.widgets-chooser .widgets-chooser-actions { + padding: 10px 0 12px; + text-align: center; +} + +#available-widgets .widget .widget-top { + cursor: pointer; +} + +#available-widgets .widget.ui-draggable-dragging .widget-top { + cursor: move; +} + +/* =Specific widget styling +-------------------------------------------------------------- */ +.text-widget-fields { + position: relative; +} +.text-widget-fields [hidden] { + display: none; +} +.text-widget-fields .wp-pointer.wp-pointer-top { + position: absolute; + z-index: 3; + top: 100px; + left: 10px; + right: 10px; +} +.text-widget-fields .wp-pointer .wp-pointer-arrow { + right: auto; + left: 15px; +} +.text-widget-fields .wp-pointer .wp-pointer-buttons { + line-height: 1.4; +} + +.custom-html-widget-fields > p > .CodeMirror { + border: 1px solid #dcdcde; +} +.custom-html-widget-fields code { + padding-top: 1px; + padding-bottom: 1px; +} +ul.CodeMirror-hints { + z-index: 101; /* Due to z-index 100 set on .widget.open */ +} +.widget-control-actions .custom-html-widget-save-button.button.validation-blocked { + cursor: not-allowed; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 782px) { + .widgets-holder-wrap .widget-inside input[type="checkbox"], + .widgets-holder-wrap .widget-inside input[type="radio"], + .editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */ + .editwidget .widget-inside input[type="radio"] { + margin: 0.25rem 0 0.25rem 0.25rem; + } +} + +@media screen and (max-width: 480px) { + div.widget-liquid-left { + width: 100%; + float: none; + border-left: none; + padding-left: 0; + } + + #widgets-left .sidebar-name { + margin-left: 0; + } + + #widgets-left #available-widgets .widget-top { + margin-left: 0; + } + + #widgets-left .inactive-sidebar .widgets-sortables { + margin-left: 0; + } + + div.widget-liquid-right { + width: 100%; + float: none; + } + + div.widget { + max-width: 480px; + } + + .widget-access-link { + float: none; + margin: 15px 0 0; + } +} + +@media screen and (max-width: 320px) { + div.widget { + max-width: 320px; + } +} + +@media only screen and (min-width: 1250px) { + #widgets-left #available-widgets .widget { + width: 49%; + float: right; + } + + .widget.ui-draggable-dragging { + min-width: 49%; + } + + #widgets-left #available-widgets .widget:nth-child(even) { + float: left; + } + + #widgets-right .sidebars-column-1, + #widgets-right .sidebars-column-2 { + float: right; + width: 49%; + } + + #widgets-right .sidebars-column-1 { + margin-left: 2%; + } + + #widgets-right.single-sidebar .sidebars-column-1, + #widgets-right.single-sidebar .sidebars-column-2 { + float: none; + width: 100%; + margin: 0; + } +} diff --git a/tools/storybook/wordpress/css/widgets-rtl.min.css b/tools/storybook/wordpress/css/widgets-rtl.min.css new file mode 100644 index 00000000000..6b2787ea06c --- /dev/null +++ b/tools/storybook/wordpress/css/widgets-rtl.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.widget{margin:0 auto 10px;position:relative;box-sizing:border-box}.widget.open{z-index:99}.widget.open:focus-within{z-index:100}.widget-top{font-size:13px;font-weight:600;background:#f6f7f7}.widget-top .widget-action{border:0;margin:0;padding:10px;background:0 0;cursor:pointer}.widget-title h3,.widget-title h4{margin:0;padding:15px;font-size:1em;line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.widgets-holder-wrap .widget-inside{border-top:none;padding:1px 15px 15px;line-height:1.23076923}.widget.widget-dirty .widget-control-close-wrapper{display:none}#available-widgets .widget-description,#widgets-right a.widget-control-edit,.in-widget-title{color:#646970}.deleting .widget-title,.deleting .widget-top .widget-action .toggle-indicator:before{color:#a7aaad}.wp-core-ui .media-widget-control .selected,.wp-core-ui .media-widget-control.selected .not-selected,.wp-core-ui .media-widget-control.selected .placeholder{display:none}.media-widget-control.selected .selected{display:inline-block}.media-widget-buttons{text-align:right;margin-top:0}.media-widget-control .media-widget-buttons .button{width:auto;height:auto;margin-top:12px;white-space:normal}.media-widget-buttons .button:first-child{margin-left:8px}.media-widget-control .attachment-media-view .button-add-media,.media-widget-control .placeholder{border:1px dashed #c3c4c7;box-sizing:border-box;cursor:pointer;line-height:1.6;padding:9px 0;position:relative;text-align:center;width:100%}.media-widget-control .attachment-media-view .button-add-media{cursor:pointer;background-color:#f0f0f1;color:#2c3338}.media-widget-control .attachment-media-view .button-add-media:hover{background-color:#fff}.media-widget-control .attachment-media-view .button-add-media:focus{background-color:#fff;border-style:solid;border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8);outline:2px solid transparent;outline-offset:-2px}.media-widget-control .media-widget-preview{background:0 0;text-align:center}.media-widget-control .media-widget-preview .notice{text-align:initial}.media-frame .media-widget-embed-notice p code,.media-widget-control .notice p code{padding:0 0 0 3px}.media-frame .media-widget-embed-notice{margin-top:16px}.media-widget-control .media-widget-preview img{max-width:100%;vertical-align:middle;background-image:linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(-45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:100% 0,10px 10px;background-size:20px 20px}.media-widget-control .media-widget-preview .wp-video-shortcode{background:#000}.media-frame.media-widget .media-toolbar-secondary{min-width:300px}.media-frame.media-widget .attachment-display-settings .setting.align,.media-frame.media-widget .checkbox-setting.autoplay,.media-frame.media-widget .embed-link-settings .setting.link-text,.media-frame.media-widget .embed-media-settings .legend-inline,.media-frame.media-widget .embed-media-settings .setting.align,.media-frame.media-widget .image-details .embed-media-settings .setting.align,.media-frame.media-widget .replace-attachment{display:none}.media-widget-video-preview{width:100%}.media-widget-video-link{display:inline-block;min-height:132px;width:100%;background:#000}.media-widget-video-link .dashicons{font:normal 60px/1 dashicons;position:relative;width:100%;top:-90px;color:#fff;text-decoration:none}.media-widget-video-link.no-poster .dashicons{top:30px}.media-frame #embed-url-field.invalid,.media-widget-image-link>.link:invalid{border:1px solid #d63638}.media-widget-image-link{margin:1em 0}.media-widget-gallery-preview{display:flex;justify-content:flex-start;flex-wrap:wrap;margin:-1.79104477%}.media-widget-preview.media_gallery,.media-widget-preview.media_image{cursor:pointer}.media-widget-preview .placeholder{background:#f0f0f1}.media-widget-gallery-preview .gallery-item{box-sizing:border-box;width:50%;margin:0;background:0 0}.media-widget-gallery-preview .gallery-item .gallery-icon{margin:4.5%}.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child~.gallery-item,.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),.media-widget-gallery-preview .gallery-item:nth-last-child(n+5)~.gallery-item,.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),.media-widget-gallery-preview .gallery-item:nth-last-child(n+6)~.gallery-item{max-width:33.33%}.media-widget-gallery-preview .gallery-item img{height:auto;vertical-align:bottom}.media-widget-gallery-preview .gallery-icon{position:relative}.media-widget-gallery-preview .gallery-icon-placeholder{position:absolute;top:0;bottom:0;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.5)}.media-widget-gallery-preview .gallery-icon-placeholder-text{font-weight:600;font-size:2em;color:#fff}.widget.ui-draggable-dragging{min-width:100%}.widget.ui-sortable-helper{opacity:.8}.widget-placeholder{border:1px dashed #c3c4c7;margin:0 auto 10px;height:45px;width:100%;box-sizing:border-box}#widgets-right .widget-placeholder{margin-top:0}#widgets-right .closed .widget-placeholder{height:0;border:0;margin-top:-10px}.sidebar-name{position:relative;box-sizing:border-box}.js .sidebar-name{cursor:pointer}.sidebar-name .handlediv{float:left;width:38px;height:38px;border:0;margin:0;padding:8px;background:0 0;cursor:pointer;outline:0}#widgets-right .sidebar-name .handlediv{margin:5px 0 0 3px}.sidebar-name .handlediv:focus{box-shadow:none;outline:1px solid transparent}#widgets-left .sidebar-name .toggle-indicator{display:none}#widgets-left .sidebar-name .handlediv:focus .toggle-indicator,#widgets-left .sidebar-name:hover .toggle-indicator,#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator{display:block}.sidebar-name .toggle-indicator:before{padding:1px 0 1px 2px;border-radius:50%}.sidebar-name .handlediv:focus .toggle-indicator:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.sidebar-name h2,.sidebar-name h3{margin:0;padding:8px 10px;overflow:hidden;white-space:normal;line-height:1.5}.widgets-holder-wrap .description{padding:0 0 15px;margin:0;font-style:normal;color:#646970}.inactive-sidebar .description,.widget-holder .description{color:#50575e}#widgets-right .widgets-holder-wrap .description{padding-right:7px;padding-left:7px}div.widget-liquid-left{margin:0;width:38%;float:right}div.widget-liquid-right{float:left;width:58%}div#widgets-left{padding-top:12px}div#widgets-left .closed .sidebar-name,div#widgets-left .inactive-sidebar.closed .sidebar-name{margin-bottom:10px}div#widgets-left .sidebar-name h2,div#widgets-left .sidebar-name h3{padding:10px 0;margin:0 0 0 10px}#widgets-left .widgets-holder-wrap,div#widgets-left .widget-holder{background:0 0;border:none}#widgets-left .widgets-holder-wrap{border:none;box-shadow:none}#available-widgets .widget{margin:0}#available-widgets .widget:nth-child(odd){clear:both}#available-widgets .widget .widget-description{display:block;padding:10px 15px;font-size:12px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}#available-widgets #widget-list{position:relative}#widgets-left .inactive-sidebar{clear:both;width:100%;background:0 0;padding:0;margin:0 0 20px;border:none;box-shadow:none}#widgets-left .inactive-sidebar.first{margin-top:40px}div#widgets-left .inactive-sidebar .widget.expanded{right:auto}.widget-title-action{float:left;position:relative}div#widgets-left .inactive-sidebar .widgets-sortables{min-height:42px;padding:0;background:0 0;margin:0;position:relative}div#widgets-right .sidebars-column-1,div#widgets-right .sidebars-column-2{max-width:450px}div#widgets-right .widgets-holder-wrap{margin:10px 0 0}div#widgets-right .sidebar-description{min-height:20px;margin-top:-5px}div#widgets-right .sidebar-name h2,div#widgets-right .sidebar-name h3{padding:15px 7px 15px 15px}div#widgets-right .widget-top{padding:0}div#widgets-right .widgets-sortables{padding:0 8px;margin-bottom:9px;position:relative;min-height:123px}div#widgets-right .closed .widgets-sortables{min-height:0;margin-bottom:0}.remove-inactive-widgets .spinner,.sidebar-name .spinner{float:none;position:relative;top:-2px;margin:-5px 5px}.sidebar-name .spinner{position:absolute;top:18px;left:30px}#widgets-right .widgets-holder-wrap.widget-hover{border-color:#787c82;box-shadow:0 1px 2px rgba(0,0,0,.3)}.widget-access-link{float:left;margin:-5px 10px 10px 0}.widgets_access #widgets-left .widget .widget-top{cursor:auto}.widgets_access #wpwrap .widget-control-edit,.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,.widgets_access #wpwrap .widgets-holder-wrap.closed .widget{display:block}.widgets_access #widgets-left .widget .widget-top:hover,.widgets_access #widgets-right .widget .widget-top:hover{border-color:#dcdcde}#available-widgets .widget-action .edit,#available-widgets .widget-control-edit .edit,#widgets-left .inactive-sidebar .widget-action .add,#widgets-left .inactive-sidebar .widget-control-edit .add,#widgets-right .widget-action .add,#widgets-right .widget-control-edit .add{display:none}.widget-control-edit{display:block;color:#646970;background:#f0f0f1;padding:0 15px;line-height:3.30769230;border-right:1px solid #dcdcde}#widgets-left .widget-control-edit:hover,#widgets-right .widget-control-edit:hover{color:#fff;background:#3c434a;border-right:0;outline:1px solid #3c434a}.widgets-holder-wrap .sidebar-description,.widgets-holder-wrap .sidebar-name{-webkit-user-select:none;user-select:none}.editwidget{margin:0 auto}.editwidget .widget-inside{display:block;padding:0 15px}.editwidget .widget-control-actions{margin-top:20px}.js .closed br.clear,.js .widgets-holder-wrap.closed .description,.js .widgets-holder-wrap.closed .remove-inactive-widgets,.js .widgets-holder-wrap.closed .sidebar-description,.js .widgets-holder-wrap.closed .widget{display:none}.js .widgets-holder-wrap.closed .widget.ui-sortable-helper{display:block}.widget-description,.widget-inside{display:none}.widget-inside{background:#fff}.widget-inside select{max-width:100%}#removing-widget{display:none;font-weight:400;padding-right:15px;font-size:12px;line-height:1;color:#000}.js #removing-widget{color:#72aee6}#access-off,.no-js .widget-holder .description,.widget-control-noform,.widgets_access #access-on,.widgets_access .handlediv,.widgets_access .widget-action,.widgets_access .widget-holder .description{display:none}.widgets_access #widget-list,.widgets_access .widget-holder{padding-top:10px}.widgets_access #access-off{display:inline}.widgets_access .sidebar-name,.widgets_access .widget .widget-top{cursor:default}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{transition:opacity .1s linear}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{opacity:.2;pointer-events:none}.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question{opacity:1;pointer-events:auto}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#8c8f94;box-shadow:0 1px 2px rgba(0,0,0,.1)}.widgets-chooser ul.widgets-chooser-sidebars{margin:0;list-style-type:none;max-height:300px;overflow:auto}.widgets-chooser{display:none}.widgets-chooser ul{border:1px solid #c3c4c7}.widgets-chooser li{border-bottom:1px solid #c3c4c7;background:#fff;margin:0;position:relative}.widgets-chooser .widgets-chooser-button{width:100%;padding:10px 35px 10px 15px;background:0 0;border:0;box-sizing:border-box;text-align:right;cursor:pointer;transition:background .2s ease-in-out}.widgets-chooser .widgets-chooser-button:focus,.widgets-chooser .widgets-chooser-button:hover{outline:0;text-decoration:underline}.widgets-chooser li:last-child{border:none}.widgets-chooser .widgets-chooser-selected .widgets-chooser-button{background:#2271b1;color:#fff}.widgets-chooser .widgets-chooser-selected:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:normal 26px/1 dashicons;color:#fff;position:absolute;top:7px;right:5px}.widgets-chooser .widgets-chooser-actions{padding:10px 0 12px;text-align:center}#available-widgets .widget .widget-top{cursor:pointer}#available-widgets .widget.ui-draggable-dragging .widget-top{cursor:move}.text-widget-fields{position:relative}.text-widget-fields [hidden]{display:none}.text-widget-fields .wp-pointer.wp-pointer-top{position:absolute;z-index:3;top:100px;left:10px;right:10px}.text-widget-fields .wp-pointer .wp-pointer-arrow{right:auto;left:15px}.text-widget-fields .wp-pointer .wp-pointer-buttons{line-height:1.4}.custom-html-widget-fields>p>.CodeMirror{border:1px solid #dcdcde}.custom-html-widget-fields code{padding-top:1px;padding-bottom:1px}ul.CodeMirror-hints{z-index:101}.widget-control-actions .custom-html-widget-save-button.button.validation-blocked{cursor:not-allowed}@media screen and (max-width:782px){.editwidget .widget-inside input[type=checkbox],.editwidget .widget-inside input[type=radio],.widgets-holder-wrap .widget-inside input[type=checkbox],.widgets-holder-wrap .widget-inside input[type=radio]{margin:.25rem 0 .25rem .25rem}}@media screen and (max-width:480px){div.widget-liquid-left{width:100%;float:none;border-left:none;padding-left:0}#widgets-left .sidebar-name{margin-left:0}#widgets-left #available-widgets .widget-top{margin-left:0}#widgets-left .inactive-sidebar .widgets-sortables{margin-left:0}div.widget-liquid-right{width:100%;float:none}div.widget{max-width:480px}.widget-access-link{float:none;margin:15px 0 0}}@media screen and (max-width:320px){div.widget{max-width:320px}}@media only screen and (min-width:1250px){#widgets-left #available-widgets .widget{width:49%;float:right}.widget.ui-draggable-dragging{min-width:49%}#widgets-left #available-widgets .widget:nth-child(even){float:left}#widgets-right .sidebars-column-1,#widgets-right .sidebars-column-2{float:right;width:49%}#widgets-right .sidebars-column-1{margin-left:2%}#widgets-right.single-sidebar .sidebars-column-1,#widgets-right.single-sidebar .sidebars-column-2{float:none;width:100%;margin:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/widgets.css b/tools/storybook/wordpress/css/widgets.css new file mode 100644 index 00000000000..8faca8f9ac4 --- /dev/null +++ b/tools/storybook/wordpress/css/widgets.css @@ -0,0 +1,876 @@ +/* General Widgets Styles */ + +.widget { + margin: 0 auto 10px; + position: relative; + box-sizing: border-box; +} + +.widget.open { + z-index: 99; +} +.widget.open:focus-within { + z-index: 100; +} + +.widget-top { + font-size: 13px; + font-weight: 600; + background: #f6f7f7; +} + +.widget-top .widget-action { + border: 0; + margin: 0; + padding: 10px; + background: none; + cursor: pointer; +} + +.widget-title h3, +.widget-title h4 { + margin: 0; + padding: 15px; + font-size: 1em; + line-height: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + -webkit-user-select: none; + user-select: none; +} + +.widgets-holder-wrap .widget-inside { + border-top: none; + padding: 1px 15px 15px; + line-height: 1.23076923; +} + +.widget.widget-dirty .widget-control-close-wrapper { + display: none; +} + +.in-widget-title, +#widgets-right a.widget-control-edit, +#available-widgets .widget-description { + color: #646970; +} + +.deleting .widget-title, +.deleting .widget-top .widget-action .toggle-indicator:before { + color: #a7aaad; +} + +/* Media Widgets */ +.wp-core-ui .media-widget-control.selected .placeholder, +.wp-core-ui .media-widget-control.selected .not-selected, +.wp-core-ui .media-widget-control .selected { + display: none; +} + +.media-widget-control.selected .selected { + display: inline-block; +} + +.media-widget-buttons { + text-align: left; + margin-top: 0; +} + +.media-widget-control .media-widget-buttons .button { + width: auto; + height: auto; + margin-top: 12px; + white-space: normal; +} + +.media-widget-buttons .button:first-child { + margin-right: 8px; +} + +.media-widget-control .attachment-media-view .button-add-media, +.media-widget-control .placeholder { + border: 1px dashed #c3c4c7; + box-sizing: border-box; + cursor: pointer; + line-height: 1.6; + padding: 9px 0; + position: relative; + text-align: center; + width: 100%; +} + +.media-widget-control .attachment-media-view .button-add-media { + cursor: pointer; + background-color: #f0f0f1; + color: #2c3338; +} + +.media-widget-control .attachment-media-view .button-add-media:hover { + background-color: #fff; +} + +.media-widget-control .attachment-media-view .button-add-media:focus { + background-color: #fff; + border-style: solid; + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + +.media-widget-control .media-widget-preview { + background: transparent; + text-align: center; +} +.media-widget-control .media-widget-preview .notice { + text-align: initial; +} +.media-frame .media-widget-embed-notice p code, +.media-widget-control .notice p code { + padding: 0 3px 0 0; +} +.media-frame .media-widget-embed-notice { + margin-top: 16px; +} +.media-widget-control .media-widget-preview img { + max-width: 100%; + vertical-align: middle; + background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; +} +.media-widget-control .media-widget-preview .wp-video-shortcode { + background: #000; +} + +.media-frame.media-widget .media-toolbar-secondary { + min-width: 300px; +} + +.media-frame.media-widget .image-details .embed-media-settings .setting.align, +.media-frame.media-widget .attachment-display-settings .setting.align, +.media-frame.media-widget .embed-media-settings .setting.align, +.media-frame.media-widget .embed-media-settings .legend-inline, +.media-frame.media-widget .embed-link-settings .setting.link-text, +.media-frame.media-widget .replace-attachment, +.media-frame.media-widget .checkbox-setting.autoplay { + display: none; +} + +.media-widget-video-preview { + width: 100%; +} + +.media-widget-video-link { + display: inline-block; + min-height: 132px; + width: 100%; + background: #000; +} + +.media-widget-video-link .dashicons { + font: normal 60px/1 'dashicons'; + position: relative; + width: 100%; + top: -90px; + color: #fff; + text-decoration: none; +} + +.media-widget-video-link.no-poster .dashicons { + top: 30px; +} + +.media-frame #embed-url-field.invalid, +.media-widget-image-link > .link:invalid { + border: 1px solid #d63638; +} + +.media-widget-image-link { + margin: 1em 0; +} + +.media-widget-gallery-preview { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + margin: -1.79104477%; +} + +.media-widget-preview.media_gallery, +.media-widget-preview.media_image { + cursor: pointer; +} + +.media-widget-preview .placeholder { + background: #f0f0f1; +} + +.media-widget-gallery-preview .gallery-item { + box-sizing: border-box; + width: 50%; + margin: 0; + background: transparent; +} + +.media-widget-gallery-preview .gallery-item .gallery-icon { + margin: 4.5%; +} + +/* + * Use targeted nth-last-child selectors to control the size of each image + * based on how many gallery items are present in the grid. + * See: https://alistapart.com/article/quantity-queries-for-css + */ +.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child, +.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item, +.media-widget-gallery-preview .gallery-item:nth-last-child(n+5), +.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item, +.media-widget-gallery-preview .gallery-item:nth-last-child(n+6), +.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item { + max-width: 33.33%; +} + +.media-widget-gallery-preview .gallery-item img { + height: auto; + vertical-align: bottom; +} + +.media-widget-gallery-preview .gallery-icon { + position: relative; +} + +.media-widget-gallery-preview .gallery-icon-placeholder { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.5); +} + +.media-widget-gallery-preview .gallery-icon-placeholder-text { + font-weight: 600; + font-size: 2em; + color: #fff; +} + + +/* Widget Dragging Helpers */ +.widget.ui-draggable-dragging { + min-width: 100%; +} + +.widget.ui-sortable-helper { + opacity: 0.8; +} + +.widget-placeholder { + border: 1px dashed #c3c4c7; + margin: 0 auto 10px; + height: 45px; + width: 100%; + box-sizing: border-box; +} + +#widgets-right .widget-placeholder { + margin-top: 0; +} + +#widgets-right .closed .widget-placeholder { + height: 0; + border: 0; + margin-top: -10px; +} + +/* Widget Sidebars */ +.sidebar-name { + position: relative; + box-sizing: border-box; +} + +.js .sidebar-name { + cursor: pointer; +} + +.sidebar-name .handlediv { + float: right; + width: 38px; + height: 38px; + border: 0; + margin: 0; + padding: 8px; + background: none; + cursor: pointer; + outline: none; +} + +#widgets-right .sidebar-name .handlediv { + margin: 5px 3px 0 0; +} + +.sidebar-name .handlediv:focus { + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; +} + +#widgets-left .sidebar-name .toggle-indicator { + display: none; +} + +#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator, +#widgets-left .sidebar-name:hover .toggle-indicator, +#widgets-left .sidebar-name .handlediv:focus .toggle-indicator { + display: block; +} + +.sidebar-name .toggle-indicator:before { + padding: 1px 2px 1px 0; + border-radius: 50%; +} + +.sidebar-name .handlediv:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); +} + +.sidebar-name h2, +.sidebar-name h3 { + margin: 0; + padding: 8px 10px; + overflow: hidden; + white-space: normal; + line-height: 1.5; +} + +.widgets-holder-wrap .description { + padding: 0 0 15px; + margin: 0; + font-style: normal; + color: #646970; +} + +.widget-holder .description, +.inactive-sidebar .description { + color: #50575e; +} + +#widgets-right .widgets-holder-wrap .description { + padding-left: 7px; + padding-right: 7px; +} + +/* Widgets 2-col Layout */ +div.widget-liquid-left { + margin: 0; + width: 38%; + float: left; +} + +div.widget-liquid-right { + float: right; + width: 58%; +} + +/* Widgets Left - Available Widgets */ + +div#widgets-left { + padding-top: 12px; +} + +div#widgets-left .closed .sidebar-name, +div#widgets-left .inactive-sidebar.closed .sidebar-name { + margin-bottom: 10px; +} + +div#widgets-left .sidebar-name h2, +div#widgets-left .sidebar-name h3 { + padding: 10px 0; + margin: 0 10px 0 0; +} + +#widgets-left .widgets-holder-wrap, +div#widgets-left .widget-holder { + background: transparent; + border: none; +} + +#widgets-left .widgets-holder-wrap { + border: none; + box-shadow: none; +} + +#available-widgets .widget { + margin: 0; +} + +#available-widgets .widget:nth-child(odd) { + clear: both; +} + +#available-widgets .widget .widget-description { + display: block; + padding: 10px 15px; + font-size: 12px; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; +} + +#available-widgets #widget-list { + position: relative; +} + +/* Inactive Sidebars */ +#widgets-left .inactive-sidebar { + clear: both; + width: 100%; + background: transparent; + padding: 0; + margin: 0 0 20px; + border: none; + box-shadow: none; +} + +#widgets-left .inactive-sidebar.first { + margin-top: 40px; +} + +/* Not sure what this is for... */ +div#widgets-left .inactive-sidebar .widget.expanded { + left: auto; +} + +.widget-title-action { + float: right; + position: relative; +} + +div#widgets-left .inactive-sidebar .widgets-sortables { + min-height: 42px; + padding: 0; + background: transparent; + margin: 0; + position: relative; +} + +/* Widgets Right */ + +div#widgets-right .sidebars-column-1, +div#widgets-right .sidebars-column-2 { + max-width: 450px; +} + +div#widgets-right .widgets-holder-wrap { + margin: 10px 0 0; +} + +div#widgets-right .sidebar-description { + min-height: 20px; + margin-top: -5px; +} + +div#widgets-right .sidebar-name h2, +div#widgets-right .sidebar-name h3 { + padding: 15px 15px 15px 7px; +} + +div#widgets-right .widget-top { + padding: 0; +} + +div#widgets-right .widgets-sortables { + padding: 0 8px; + margin-bottom: 9px; + position: relative; + min-height: 123px; +} + +div#widgets-right .closed .widgets-sortables { + min-height: 0; + margin-bottom: 0; +} + +.sidebar-name .spinner, +.remove-inactive-widgets .spinner { + float: none; + position: relative; + top: -2px; + margin: -5px 5px; +} + +.sidebar-name .spinner { + position: absolute; + top: 18px; + right: 30px; +} + +/* Dragging a widget over a closed sidebar */ +#widgets-right .widgets-holder-wrap.widget-hover { + border-color: #787c82; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +/* Accessibility Mode */ +.widget-access-link { + float: right; + margin: -5px 0 10px 10px; +} + +.widgets_access #widgets-left .widget .widget-top { + cursor: auto; +} + +.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description, +.widgets_access #wpwrap .widgets-holder-wrap.closed .widget, +.widgets_access #wpwrap .widget-control-edit { + display: block; +} + +.widgets_access #widgets-left .widget .widget-top:hover, +.widgets_access #widgets-right .widget .widget-top:hover { + border-color: #dcdcde; +} + +#available-widgets .widget-control-edit .edit, +#available-widgets .widget-action .edit, +#widgets-left .inactive-sidebar .widget-control-edit .add, +#widgets-left .inactive-sidebar .widget-action .add, +#widgets-right .widget-control-edit .add, +#widgets-right .widget-action .add { + display: none; +} + +.widget-control-edit { + display: block; + color: #646970; + background: #f0f0f1; + padding: 0 15px; + line-height: 3.30769230; + border-left: 1px solid #dcdcde; +} + +#widgets-left .widget-control-edit:hover, +#widgets-right .widget-control-edit:hover { + color: #fff; + background: #3c434a; + border-left: 0; + outline: 1px solid #3c434a; +} + +.widgets-holder-wrap .sidebar-name, +.widgets-holder-wrap .sidebar-description { + -webkit-user-select: none; + user-select: none; +} + +.editwidget { + margin: 0 auto; +} + +.editwidget .widget-inside { + display: block; + padding: 0 15px; +} + +.editwidget .widget-control-actions { + margin-top: 20px; +} + +.js .widgets-holder-wrap.closed .widget, +.js .widgets-holder-wrap.closed .sidebar-description, +.js .widgets-holder-wrap.closed .remove-inactive-widgets, +.js .widgets-holder-wrap.closed .description, +.js .closed br.clear { + display: none; +} + +.js .widgets-holder-wrap.closed .widget.ui-sortable-helper { + display: block; +} + +/* Hide Widget Settings by Default */ +.widget-inside, +.widget-description { + display: none; +} + +.widget-inside { + background: #fff; +} + +.widget-inside select { + max-width: 100%; +} + +/* Dragging widgets over the available widget area show's a "Deactivate" message */ +#removing-widget { + display: none; + font-weight: 400; + padding-left: 15px; + font-size: 12px; + line-height: 1; + color: #000; +} + +.js #removing-widget { + color: #72aee6; +} + +.widget-control-noform, +#access-off, +.widgets_access .widget-action, +.widgets_access .handlediv, +.widgets_access #access-on, +.widgets_access .widget-holder .description, +.no-js .widget-holder .description { + display: none; +} + +.widgets_access .widget-holder, +.widgets_access #widget-list { + padding-top: 10px; +} + +.widgets_access #access-off { + display: inline; +} + +.widgets_access .sidebar-name, +.widgets_access .widget .widget-top { + cursor: default; +} + + +/* Widgets Area Chooser */ +.widget-liquid-left #widgets-left.chooser #available-widgets .widget, +.widget-liquid-left #widgets-left.chooser .inactive-sidebar { + transition: opacity 0.1s linear; +} + +.widget-liquid-left #widgets-left.chooser #available-widgets .widget, +.widget-liquid-left #widgets-left.chooser .inactive-sidebar { + /* -webkit-filter: blur(1px); */ + opacity: 0.2; + pointer-events: none; +} + +.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question { + /* -webkit-filter: none; */ + opacity: 1; + pointer-events: auto; +} + +.widgets-chooser ul, +#widgets-left .widget-in-question .widget-top, +#available-widgets .widget-top:hover, +div#widgets-right .widget-top:hover, +#widgets-left .widget-top:hover { + border-color: #8c8f94; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.widgets-chooser ul.widgets-chooser-sidebars { + margin: 0; + list-style-type: none; + max-height: 300px; + overflow: auto; +} + +.widgets-chooser { + display: none; +} + +.widgets-chooser ul { + border: 1px solid #c3c4c7; +} + +.widgets-chooser li { + border-bottom: 1px solid #c3c4c7; + background: #fff; + margin: 0; + position: relative; +} + +.widgets-chooser .widgets-chooser-button { + width: 100%; + padding: 10px 15px 10px 35px; + background: transparent; + border: 0; + box-sizing: border-box; + text-align: left; + cursor: pointer; + transition: background 0.2s ease-in-out; +} + +/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ +.widgets-chooser .widgets-chooser-button:hover, +.widgets-chooser .widgets-chooser-button:focus { + outline: none; + text-decoration: underline; +} + +.widgets-chooser li:last-child { + border: none; +} + +.widgets-chooser .widgets-chooser-selected .widgets-chooser-button { + background: #2271b1; + color: #fff; +} + +.widgets-chooser .widgets-chooser-selected:before { + content: "\f147"; + display: block; + -webkit-font-smoothing: antialiased; + font: normal 26px/1 dashicons; + color: #fff; + position: absolute; + top: 7px; + left: 5px; +} + +.widgets-chooser .widgets-chooser-actions { + padding: 10px 0 12px; + text-align: center; +} + +#available-widgets .widget .widget-top { + cursor: pointer; +} + +#available-widgets .widget.ui-draggable-dragging .widget-top { + cursor: move; +} + +/* =Specific widget styling +-------------------------------------------------------------- */ +.text-widget-fields { + position: relative; +} +.text-widget-fields [hidden] { + display: none; +} +.text-widget-fields .wp-pointer.wp-pointer-top { + position: absolute; + z-index: 3; + top: 100px; + right: 10px; + left: 10px; +} +.text-widget-fields .wp-pointer .wp-pointer-arrow { + left: auto; + right: 15px; +} +.text-widget-fields .wp-pointer .wp-pointer-buttons { + line-height: 1.4; +} + +.custom-html-widget-fields > p > .CodeMirror { + border: 1px solid #dcdcde; +} +.custom-html-widget-fields code { + padding-top: 1px; + padding-bottom: 1px; +} +ul.CodeMirror-hints { + z-index: 101; /* Due to z-index 100 set on .widget.open */ +} +.widget-control-actions .custom-html-widget-save-button.button.validation-blocked { + cursor: not-allowed; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 782px) { + .widgets-holder-wrap .widget-inside input[type="checkbox"], + .widgets-holder-wrap .widget-inside input[type="radio"], + .editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */ + .editwidget .widget-inside input[type="radio"] { + margin: 0.25rem 0.25rem 0.25rem 0; + } +} + +@media screen and (max-width: 480px) { + div.widget-liquid-left { + width: 100%; + float: none; + border-right: none; + padding-right: 0; + } + + #widgets-left .sidebar-name { + margin-right: 0; + } + + #widgets-left #available-widgets .widget-top { + margin-right: 0; + } + + #widgets-left .inactive-sidebar .widgets-sortables { + margin-right: 0; + } + + div.widget-liquid-right { + width: 100%; + float: none; + } + + div.widget { + max-width: 480px; + } + + .widget-access-link { + float: none; + margin: 15px 0 0; + } +} + +@media screen and (max-width: 320px) { + div.widget { + max-width: 320px; + } +} + +@media only screen and (min-width: 1250px) { + #widgets-left #available-widgets .widget { + width: 49%; + float: left; + } + + .widget.ui-draggable-dragging { + min-width: 49%; + } + + #widgets-left #available-widgets .widget:nth-child(even) { + float: right; + } + + #widgets-right .sidebars-column-1, + #widgets-right .sidebars-column-2 { + float: left; + width: 49%; + } + + #widgets-right .sidebars-column-1 { + margin-right: 2%; + } + + #widgets-right.single-sidebar .sidebars-column-1, + #widgets-right.single-sidebar .sidebars-column-2 { + float: none; + width: 100%; + margin: 0; + } +} diff --git a/tools/storybook/wordpress/css/widgets.min.css b/tools/storybook/wordpress/css/widgets.min.css new file mode 100644 index 00000000000..d343c3426d8 --- /dev/null +++ b/tools/storybook/wordpress/css/widgets.min.css @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +.widget{margin:0 auto 10px;position:relative;box-sizing:border-box}.widget.open{z-index:99}.widget.open:focus-within{z-index:100}.widget-top{font-size:13px;font-weight:600;background:#f6f7f7}.widget-top .widget-action{border:0;margin:0;padding:10px;background:0 0;cursor:pointer}.widget-title h3,.widget-title h4{margin:0;padding:15px;font-size:1em;line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.widgets-holder-wrap .widget-inside{border-top:none;padding:1px 15px 15px;line-height:1.23076923}.widget.widget-dirty .widget-control-close-wrapper{display:none}#available-widgets .widget-description,#widgets-right a.widget-control-edit,.in-widget-title{color:#646970}.deleting .widget-title,.deleting .widget-top .widget-action .toggle-indicator:before{color:#a7aaad}.wp-core-ui .media-widget-control .selected,.wp-core-ui .media-widget-control.selected .not-selected,.wp-core-ui .media-widget-control.selected .placeholder{display:none}.media-widget-control.selected .selected{display:inline-block}.media-widget-buttons{text-align:left;margin-top:0}.media-widget-control .media-widget-buttons .button{width:auto;height:auto;margin-top:12px;white-space:normal}.media-widget-buttons .button:first-child{margin-right:8px}.media-widget-control .attachment-media-view .button-add-media,.media-widget-control .placeholder{border:1px dashed #c3c4c7;box-sizing:border-box;cursor:pointer;line-height:1.6;padding:9px 0;position:relative;text-align:center;width:100%}.media-widget-control .attachment-media-view .button-add-media{cursor:pointer;background-color:#f0f0f1;color:#2c3338}.media-widget-control .attachment-media-view .button-add-media:hover{background-color:#fff}.media-widget-control .attachment-media-view .button-add-media:focus{background-color:#fff;border-style:solid;border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8);outline:2px solid transparent;outline-offset:-2px}.media-widget-control .media-widget-preview{background:0 0;text-align:center}.media-widget-control .media-widget-preview .notice{text-align:initial}.media-frame .media-widget-embed-notice p code,.media-widget-control .notice p code{padding:0 3px 0 0}.media-frame .media-widget-embed-notice{margin-top:16px}.media-widget-control .media-widget-preview img{max-width:100%;vertical-align:middle;background-image:linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7),linear-gradient(45deg,#c3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 75%,#c3c4c7);background-position:0 0,10px 10px;background-size:20px 20px}.media-widget-control .media-widget-preview .wp-video-shortcode{background:#000}.media-frame.media-widget .media-toolbar-secondary{min-width:300px}.media-frame.media-widget .attachment-display-settings .setting.align,.media-frame.media-widget .checkbox-setting.autoplay,.media-frame.media-widget .embed-link-settings .setting.link-text,.media-frame.media-widget .embed-media-settings .legend-inline,.media-frame.media-widget .embed-media-settings .setting.align,.media-frame.media-widget .image-details .embed-media-settings .setting.align,.media-frame.media-widget .replace-attachment{display:none}.media-widget-video-preview{width:100%}.media-widget-video-link{display:inline-block;min-height:132px;width:100%;background:#000}.media-widget-video-link .dashicons{font:normal 60px/1 dashicons;position:relative;width:100%;top:-90px;color:#fff;text-decoration:none}.media-widget-video-link.no-poster .dashicons{top:30px}.media-frame #embed-url-field.invalid,.media-widget-image-link>.link:invalid{border:1px solid #d63638}.media-widget-image-link{margin:1em 0}.media-widget-gallery-preview{display:flex;justify-content:flex-start;flex-wrap:wrap;margin:-1.79104477%}.media-widget-preview.media_gallery,.media-widget-preview.media_image{cursor:pointer}.media-widget-preview .placeholder{background:#f0f0f1}.media-widget-gallery-preview .gallery-item{box-sizing:border-box;width:50%;margin:0;background:0 0}.media-widget-gallery-preview .gallery-item .gallery-icon{margin:4.5%}.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child~.gallery-item,.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),.media-widget-gallery-preview .gallery-item:nth-last-child(n+5)~.gallery-item,.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),.media-widget-gallery-preview .gallery-item:nth-last-child(n+6)~.gallery-item{max-width:33.33%}.media-widget-gallery-preview .gallery-item img{height:auto;vertical-align:bottom}.media-widget-gallery-preview .gallery-icon{position:relative}.media-widget-gallery-preview .gallery-icon-placeholder{position:absolute;top:0;bottom:0;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.5)}.media-widget-gallery-preview .gallery-icon-placeholder-text{font-weight:600;font-size:2em;color:#fff}.widget.ui-draggable-dragging{min-width:100%}.widget.ui-sortable-helper{opacity:.8}.widget-placeholder{border:1px dashed #c3c4c7;margin:0 auto 10px;height:45px;width:100%;box-sizing:border-box}#widgets-right .widget-placeholder{margin-top:0}#widgets-right .closed .widget-placeholder{height:0;border:0;margin-top:-10px}.sidebar-name{position:relative;box-sizing:border-box}.js .sidebar-name{cursor:pointer}.sidebar-name .handlediv{float:right;width:38px;height:38px;border:0;margin:0;padding:8px;background:0 0;cursor:pointer;outline:0}#widgets-right .sidebar-name .handlediv{margin:5px 3px 0 0}.sidebar-name .handlediv:focus{box-shadow:none;outline:1px solid transparent}#widgets-left .sidebar-name .toggle-indicator{display:none}#widgets-left .sidebar-name .handlediv:focus .toggle-indicator,#widgets-left .sidebar-name:hover .toggle-indicator,#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator{display:block}.sidebar-name .toggle-indicator:before{padding:1px 2px 1px 0;border-radius:50%}.sidebar-name .handlediv:focus .toggle-indicator:before{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}.sidebar-name h2,.sidebar-name h3{margin:0;padding:8px 10px;overflow:hidden;white-space:normal;line-height:1.5}.widgets-holder-wrap .description{padding:0 0 15px;margin:0;font-style:normal;color:#646970}.inactive-sidebar .description,.widget-holder .description{color:#50575e}#widgets-right .widgets-holder-wrap .description{padding-left:7px;padding-right:7px}div.widget-liquid-left{margin:0;width:38%;float:left}div.widget-liquid-right{float:right;width:58%}div#widgets-left{padding-top:12px}div#widgets-left .closed .sidebar-name,div#widgets-left .inactive-sidebar.closed .sidebar-name{margin-bottom:10px}div#widgets-left .sidebar-name h2,div#widgets-left .sidebar-name h3{padding:10px 0;margin:0 10px 0 0}#widgets-left .widgets-holder-wrap,div#widgets-left .widget-holder{background:0 0;border:none}#widgets-left .widgets-holder-wrap{border:none;box-shadow:none}#available-widgets .widget{margin:0}#available-widgets .widget:nth-child(odd){clear:both}#available-widgets .widget .widget-description{display:block;padding:10px 15px;font-size:12px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}#available-widgets #widget-list{position:relative}#widgets-left .inactive-sidebar{clear:both;width:100%;background:0 0;padding:0;margin:0 0 20px;border:none;box-shadow:none}#widgets-left .inactive-sidebar.first{margin-top:40px}div#widgets-left .inactive-sidebar .widget.expanded{left:auto}.widget-title-action{float:right;position:relative}div#widgets-left .inactive-sidebar .widgets-sortables{min-height:42px;padding:0;background:0 0;margin:0;position:relative}div#widgets-right .sidebars-column-1,div#widgets-right .sidebars-column-2{max-width:450px}div#widgets-right .widgets-holder-wrap{margin:10px 0 0}div#widgets-right .sidebar-description{min-height:20px;margin-top:-5px}div#widgets-right .sidebar-name h2,div#widgets-right .sidebar-name h3{padding:15px 15px 15px 7px}div#widgets-right .widget-top{padding:0}div#widgets-right .widgets-sortables{padding:0 8px;margin-bottom:9px;position:relative;min-height:123px}div#widgets-right .closed .widgets-sortables{min-height:0;margin-bottom:0}.remove-inactive-widgets .spinner,.sidebar-name .spinner{float:none;position:relative;top:-2px;margin:-5px 5px}.sidebar-name .spinner{position:absolute;top:18px;right:30px}#widgets-right .widgets-holder-wrap.widget-hover{border-color:#787c82;box-shadow:0 1px 2px rgba(0,0,0,.3)}.widget-access-link{float:right;margin:-5px 0 10px 10px}.widgets_access #widgets-left .widget .widget-top{cursor:auto}.widgets_access #wpwrap .widget-control-edit,.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,.widgets_access #wpwrap .widgets-holder-wrap.closed .widget{display:block}.widgets_access #widgets-left .widget .widget-top:hover,.widgets_access #widgets-right .widget .widget-top:hover{border-color:#dcdcde}#available-widgets .widget-action .edit,#available-widgets .widget-control-edit .edit,#widgets-left .inactive-sidebar .widget-action .add,#widgets-left .inactive-sidebar .widget-control-edit .add,#widgets-right .widget-action .add,#widgets-right .widget-control-edit .add{display:none}.widget-control-edit{display:block;color:#646970;background:#f0f0f1;padding:0 15px;line-height:3.30769230;border-left:1px solid #dcdcde}#widgets-left .widget-control-edit:hover,#widgets-right .widget-control-edit:hover{color:#fff;background:#3c434a;border-left:0;outline:1px solid #3c434a}.widgets-holder-wrap .sidebar-description,.widgets-holder-wrap .sidebar-name{-webkit-user-select:none;user-select:none}.editwidget{margin:0 auto}.editwidget .widget-inside{display:block;padding:0 15px}.editwidget .widget-control-actions{margin-top:20px}.js .closed br.clear,.js .widgets-holder-wrap.closed .description,.js .widgets-holder-wrap.closed .remove-inactive-widgets,.js .widgets-holder-wrap.closed .sidebar-description,.js .widgets-holder-wrap.closed .widget{display:none}.js .widgets-holder-wrap.closed .widget.ui-sortable-helper{display:block}.widget-description,.widget-inside{display:none}.widget-inside{background:#fff}.widget-inside select{max-width:100%}#removing-widget{display:none;font-weight:400;padding-left:15px;font-size:12px;line-height:1;color:#000}.js #removing-widget{color:#72aee6}#access-off,.no-js .widget-holder .description,.widget-control-noform,.widgets_access #access-on,.widgets_access .handlediv,.widgets_access .widget-action,.widgets_access .widget-holder .description{display:none}.widgets_access #widget-list,.widgets_access .widget-holder{padding-top:10px}.widgets_access #access-off{display:inline}.widgets_access .sidebar-name,.widgets_access .widget .widget-top{cursor:default}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{transition:opacity .1s linear}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{opacity:.2;pointer-events:none}.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question{opacity:1;pointer-events:auto}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#8c8f94;box-shadow:0 1px 2px rgba(0,0,0,.1)}.widgets-chooser ul.widgets-chooser-sidebars{margin:0;list-style-type:none;max-height:300px;overflow:auto}.widgets-chooser{display:none}.widgets-chooser ul{border:1px solid #c3c4c7}.widgets-chooser li{border-bottom:1px solid #c3c4c7;background:#fff;margin:0;position:relative}.widgets-chooser .widgets-chooser-button{width:100%;padding:10px 15px 10px 35px;background:0 0;border:0;box-sizing:border-box;text-align:left;cursor:pointer;transition:background .2s ease-in-out}.widgets-chooser .widgets-chooser-button:focus,.widgets-chooser .widgets-chooser-button:hover{outline:0;text-decoration:underline}.widgets-chooser li:last-child{border:none}.widgets-chooser .widgets-chooser-selected .widgets-chooser-button{background:#2271b1;color:#fff}.widgets-chooser .widgets-chooser-selected:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:normal 26px/1 dashicons;color:#fff;position:absolute;top:7px;left:5px}.widgets-chooser .widgets-chooser-actions{padding:10px 0 12px;text-align:center}#available-widgets .widget .widget-top{cursor:pointer}#available-widgets .widget.ui-draggable-dragging .widget-top{cursor:move}.text-widget-fields{position:relative}.text-widget-fields [hidden]{display:none}.text-widget-fields .wp-pointer.wp-pointer-top{position:absolute;z-index:3;top:100px;right:10px;left:10px}.text-widget-fields .wp-pointer .wp-pointer-arrow{left:auto;right:15px}.text-widget-fields .wp-pointer .wp-pointer-buttons{line-height:1.4}.custom-html-widget-fields>p>.CodeMirror{border:1px solid #dcdcde}.custom-html-widget-fields code{padding-top:1px;padding-bottom:1px}ul.CodeMirror-hints{z-index:101}.widget-control-actions .custom-html-widget-save-button.button.validation-blocked{cursor:not-allowed}@media screen and (max-width:782px){.editwidget .widget-inside input[type=checkbox],.editwidget .widget-inside input[type=radio],.widgets-holder-wrap .widget-inside input[type=checkbox],.widgets-holder-wrap .widget-inside input[type=radio]{margin:.25rem .25rem .25rem 0}}@media screen and (max-width:480px){div.widget-liquid-left{width:100%;float:none;border-right:none;padding-right:0}#widgets-left .sidebar-name{margin-right:0}#widgets-left #available-widgets .widget-top{margin-right:0}#widgets-left .inactive-sidebar .widgets-sortables{margin-right:0}div.widget-liquid-right{width:100%;float:none}div.widget{max-width:480px}.widget-access-link{float:none;margin:15px 0 0}}@media screen and (max-width:320px){div.widget{max-width:320px}}@media only screen and (min-width:1250px){#widgets-left #available-widgets .widget{width:49%;float:left}.widget.ui-draggable-dragging{min-width:49%}#widgets-left #available-widgets .widget:nth-child(even){float:right}#widgets-right .sidebars-column-1,#widgets-right .sidebars-column-2{float:left;width:49%}#widgets-right .sidebars-column-1{margin-right:2%}#widgets-right.single-sidebar .sidebars-column-1,#widgets-right.single-sidebar .sidebars-column-2{float:none;width:100%;margin:0}} \ No newline at end of file diff --git a/tools/storybook/wordpress/css/wp-admin-rtl.css b/tools/storybook/wordpress/css/wp-admin-rtl.css new file mode 100644 index 00000000000..81d66f63ad1 --- /dev/null +++ b/tools/storybook/wordpress/css/wp-admin-rtl.css @@ -0,0 +1,16 @@ +/*! This file is auto-generated */ +@import url(common-rtl.css); +@import url(forms-rtl.css); +@import url(admin-menu-rtl.css); +@import url(dashboard-rtl.css); +@import url(list-tables-rtl.css); +@import url(edit-rtl.css); +@import url(revisions-rtl.css); +@import url(media-rtl.css); +@import url(themes-rtl.css); +@import url(about-rtl.css); +@import url(nav-menus-rtl.css); +@import url(widgets-rtl.css); +@import url(site-icon-rtl.css); +@import url(l10n-rtl.css); +@import url(site-health-rtl.css); diff --git a/tools/storybook/wordpress/css/wp-admin-rtl.min.css b/tools/storybook/wordpress/css/wp-admin-rtl.min.css new file mode 100644 index 00000000000..110850bb41f --- /dev/null +++ b/tools/storybook/wordpress/css/wp-admin-rtl.min.css @@ -0,0 +1,16 @@ +/*! This file is auto-generated */ +@import url(common-rtl.min.css); +@import url(forms-rtl.min.css); +@import url(admin-menu-rtl.min.css); +@import url(dashboard-rtl.min.css); +@import url(list-tables-rtl.min.css); +@import url(edit-rtl.min.css); +@import url(revisions-rtl.min.css); +@import url(media-rtl.min.css); +@import url(themes-rtl.min.css); +@import url(about-rtl.min.css); +@import url(nav-menus-rtl.min.css); +@import url(widgets-rtl.min.css); +@import url(site-icon-rtl.min.css); +@import url(l10n-rtl.min.css); +@import url(site-health-rtl.min.css); diff --git a/tools/storybook/wordpress/css/wp-admin.css b/tools/storybook/wordpress/css/wp-admin.css new file mode 100644 index 00000000000..b475cf0aafb --- /dev/null +++ b/tools/storybook/wordpress/css/wp-admin.css @@ -0,0 +1,15 @@ +@import url(common.css); +@import url(forms.css); +@import url(admin-menu.css); +@import url(dashboard.css); +@import url(list-tables.css); +@import url(edit.css); +@import url(revisions.css); +@import url(media.css); +@import url(themes.css); +@import url(about.css); +@import url(nav-menus.css); +@import url(widgets.css); +@import url(site-icon.css); +@import url(l10n.css); +@import url(site-health.css); diff --git a/tools/storybook/wordpress/css/wp-admin.min.css b/tools/storybook/wordpress/css/wp-admin.min.css new file mode 100644 index 00000000000..2fdbba502e5 --- /dev/null +++ b/tools/storybook/wordpress/css/wp-admin.min.css @@ -0,0 +1,16 @@ +/*! This file is auto-generated */ +@import url(common.min.css); +@import url(forms.min.css); +@import url(admin-menu.min.css); +@import url(dashboard.min.css); +@import url(list-tables.min.css); +@import url(edit.min.css); +@import url(revisions.min.css); +@import url(media.min.css); +@import url(themes.min.css); +@import url(about.min.css); +@import url(nav-menus.min.css); +@import url(widgets.min.css); +@import url(site-icon.min.css); +@import url(l10n.min.css); +@import url(site-health.min.css); diff --git a/tools/storybook/wordpress/images/about-header-about.svg b/tools/storybook/wordpress/images/about-header-about.svg new file mode 100644 index 00000000000..c2e4bbf26c6 --- /dev/null +++ b/tools/storybook/wordpress/images/about-header-about.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/tools/storybook/wordpress/images/about-header-credits.svg b/tools/storybook/wordpress/images/about-header-credits.svg new file mode 100644 index 00000000000..bae4c28d548 --- /dev/null +++ b/tools/storybook/wordpress/images/about-header-credits.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/about-header-freedoms.svg b/tools/storybook/wordpress/images/about-header-freedoms.svg new file mode 100644 index 00000000000..2b1f5394375 --- /dev/null +++ b/tools/storybook/wordpress/images/about-header-freedoms.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/about-header-privacy.svg b/tools/storybook/wordpress/images/about-header-privacy.svg new file mode 100644 index 00000000000..2d7166b84c3 --- /dev/null +++ b/tools/storybook/wordpress/images/about-header-privacy.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/about-texture.png b/tools/storybook/wordpress/images/about-texture.png new file mode 100644 index 00000000000..58cf58bfec1 Binary files /dev/null and b/tools/storybook/wordpress/images/about-texture.png differ diff --git a/tools/storybook/wordpress/images/align-center-2x.png b/tools/storybook/wordpress/images/align-center-2x.png new file mode 100644 index 00000000000..0b6273445a8 Binary files /dev/null and b/tools/storybook/wordpress/images/align-center-2x.png differ diff --git a/tools/storybook/wordpress/images/align-center.png b/tools/storybook/wordpress/images/align-center.png new file mode 100644 index 00000000000..e7bc807880a Binary files /dev/null and b/tools/storybook/wordpress/images/align-center.png differ diff --git a/tools/storybook/wordpress/images/align-left-2x.png b/tools/storybook/wordpress/images/align-left-2x.png new file mode 100644 index 00000000000..1b2d428333c Binary files /dev/null and b/tools/storybook/wordpress/images/align-left-2x.png differ diff --git a/tools/storybook/wordpress/images/align-left.png b/tools/storybook/wordpress/images/align-left.png new file mode 100644 index 00000000000..b438f7e0036 Binary files /dev/null and b/tools/storybook/wordpress/images/align-left.png differ diff --git a/tools/storybook/wordpress/images/align-none-2x.png b/tools/storybook/wordpress/images/align-none-2x.png new file mode 100644 index 00000000000..a64a0bed51e Binary files /dev/null and b/tools/storybook/wordpress/images/align-none-2x.png differ diff --git a/tools/storybook/wordpress/images/align-none.png b/tools/storybook/wordpress/images/align-none.png new file mode 100644 index 00000000000..b72df647167 Binary files /dev/null and b/tools/storybook/wordpress/images/align-none.png differ diff --git a/tools/storybook/wordpress/images/align-right-2x.png b/tools/storybook/wordpress/images/align-right-2x.png new file mode 100644 index 00000000000..013150513b5 Binary files /dev/null and b/tools/storybook/wordpress/images/align-right-2x.png differ diff --git a/tools/storybook/wordpress/images/align-right.png b/tools/storybook/wordpress/images/align-right.png new file mode 100644 index 00000000000..86a1b2e8764 Binary files /dev/null and b/tools/storybook/wordpress/images/align-right.png differ diff --git a/tools/storybook/wordpress/images/arrows-2x.png b/tools/storybook/wordpress/images/arrows-2x.png new file mode 100644 index 00000000000..0b0c53d1a6b Binary files /dev/null and b/tools/storybook/wordpress/images/arrows-2x.png differ diff --git a/tools/storybook/wordpress/images/arrows.png b/tools/storybook/wordpress/images/arrows.png new file mode 100644 index 00000000000..9e4a96cd281 Binary files /dev/null and b/tools/storybook/wordpress/images/arrows.png differ diff --git a/tools/storybook/wordpress/images/browser-rtl.png b/tools/storybook/wordpress/images/browser-rtl.png new file mode 100644 index 00000000000..a4d369563b8 Binary files /dev/null and b/tools/storybook/wordpress/images/browser-rtl.png differ diff --git a/tools/storybook/wordpress/images/browser.png b/tools/storybook/wordpress/images/browser.png new file mode 100644 index 00000000000..83ead4747b7 Binary files /dev/null and b/tools/storybook/wordpress/images/browser.png differ diff --git a/tools/storybook/wordpress/images/bubble_bg-2x.gif b/tools/storybook/wordpress/images/bubble_bg-2x.gif new file mode 100644 index 00000000000..8e34e01dcd4 Binary files /dev/null and b/tools/storybook/wordpress/images/bubble_bg-2x.gif differ diff --git a/tools/storybook/wordpress/images/bubble_bg.gif b/tools/storybook/wordpress/images/bubble_bg.gif new file mode 100644 index 00000000000..bcf74c48543 Binary files /dev/null and b/tools/storybook/wordpress/images/bubble_bg.gif differ diff --git a/tools/storybook/wordpress/images/comment-grey-bubble-2x.png b/tools/storybook/wordpress/images/comment-grey-bubble-2x.png new file mode 100644 index 00000000000..0eec4a6df0c Binary files /dev/null and b/tools/storybook/wordpress/images/comment-grey-bubble-2x.png differ diff --git a/tools/storybook/wordpress/images/comment-grey-bubble.png b/tools/storybook/wordpress/images/comment-grey-bubble.png new file mode 100644 index 00000000000..558ee8f32dc Binary files /dev/null and b/tools/storybook/wordpress/images/comment-grey-bubble.png differ diff --git a/tools/storybook/wordpress/images/date-button-2x.gif b/tools/storybook/wordpress/images/date-button-2x.gif new file mode 100644 index 00000000000..281a6654fa4 Binary files /dev/null and b/tools/storybook/wordpress/images/date-button-2x.gif differ diff --git a/tools/storybook/wordpress/images/date-button.gif b/tools/storybook/wordpress/images/date-button.gif new file mode 100644 index 00000000000..326a7b71cae Binary files /dev/null and b/tools/storybook/wordpress/images/date-button.gif differ diff --git a/tools/storybook/wordpress/images/freedom-1.svg b/tools/storybook/wordpress/images/freedom-1.svg new file mode 100644 index 00000000000..6e4f2575a17 --- /dev/null +++ b/tools/storybook/wordpress/images/freedom-1.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/freedom-2.svg b/tools/storybook/wordpress/images/freedom-2.svg new file mode 100644 index 00000000000..f006ca1a53c --- /dev/null +++ b/tools/storybook/wordpress/images/freedom-2.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/freedom-3.svg b/tools/storybook/wordpress/images/freedom-3.svg new file mode 100644 index 00000000000..c01e6f2cd43 --- /dev/null +++ b/tools/storybook/wordpress/images/freedom-3.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/freedom-4.svg b/tools/storybook/wordpress/images/freedom-4.svg new file mode 100644 index 00000000000..ff9a8d07e8c --- /dev/null +++ b/tools/storybook/wordpress/images/freedom-4.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/generic.png b/tools/storybook/wordpress/images/generic.png new file mode 100644 index 00000000000..00575a078f9 Binary files /dev/null and b/tools/storybook/wordpress/images/generic.png differ diff --git a/tools/storybook/wordpress/images/icons32-2x.png b/tools/storybook/wordpress/images/icons32-2x.png new file mode 100644 index 00000000000..b86b7272509 Binary files /dev/null and b/tools/storybook/wordpress/images/icons32-2x.png differ diff --git a/tools/storybook/wordpress/images/icons32-vs-2x.png b/tools/storybook/wordpress/images/icons32-vs-2x.png new file mode 100644 index 00000000000..54e2fb2f5fb Binary files /dev/null and b/tools/storybook/wordpress/images/icons32-vs-2x.png differ diff --git a/tools/storybook/wordpress/images/icons32-vs.png b/tools/storybook/wordpress/images/icons32-vs.png new file mode 100644 index 00000000000..e46d6bebb78 Binary files /dev/null and b/tools/storybook/wordpress/images/icons32-vs.png differ diff --git a/tools/storybook/wordpress/images/icons32.png b/tools/storybook/wordpress/images/icons32.png new file mode 100644 index 00000000000..e491b1a8d28 Binary files /dev/null and b/tools/storybook/wordpress/images/icons32.png differ diff --git a/tools/storybook/wordpress/images/imgedit-icons-2x.png b/tools/storybook/wordpress/images/imgedit-icons-2x.png new file mode 100644 index 00000000000..98dd4124047 Binary files /dev/null and b/tools/storybook/wordpress/images/imgedit-icons-2x.png differ diff --git a/tools/storybook/wordpress/images/imgedit-icons.png b/tools/storybook/wordpress/images/imgedit-icons.png new file mode 100644 index 00000000000..0d544ee9b83 Binary files /dev/null and b/tools/storybook/wordpress/images/imgedit-icons.png differ diff --git a/tools/storybook/wordpress/images/list-2x.png b/tools/storybook/wordpress/images/list-2x.png new file mode 100644 index 00000000000..05c6eb37ffd Binary files /dev/null and b/tools/storybook/wordpress/images/list-2x.png differ diff --git a/tools/storybook/wordpress/images/list.png b/tools/storybook/wordpress/images/list.png new file mode 100644 index 00000000000..85d1295e813 Binary files /dev/null and b/tools/storybook/wordpress/images/list.png differ diff --git a/tools/storybook/wordpress/images/loading.gif b/tools/storybook/wordpress/images/loading.gif new file mode 100644 index 00000000000..fdc589f8097 Binary files /dev/null and b/tools/storybook/wordpress/images/loading.gif differ diff --git a/tools/storybook/wordpress/images/marker.png b/tools/storybook/wordpress/images/marker.png new file mode 100644 index 00000000000..30313b871dd Binary files /dev/null and b/tools/storybook/wordpress/images/marker.png differ diff --git a/tools/storybook/wordpress/images/mask.png b/tools/storybook/wordpress/images/mask.png new file mode 100644 index 00000000000..0fc9cbe6309 Binary files /dev/null and b/tools/storybook/wordpress/images/mask.png differ diff --git a/tools/storybook/wordpress/images/media-button-2x.png b/tools/storybook/wordpress/images/media-button-2x.png new file mode 100644 index 00000000000..b8f8ed4df8c Binary files /dev/null and b/tools/storybook/wordpress/images/media-button-2x.png differ diff --git a/tools/storybook/wordpress/images/media-button-image.gif b/tools/storybook/wordpress/images/media-button-image.gif new file mode 100644 index 00000000000..69efa7b4842 Binary files /dev/null and b/tools/storybook/wordpress/images/media-button-image.gif differ diff --git a/tools/storybook/wordpress/images/media-button-music.gif b/tools/storybook/wordpress/images/media-button-music.gif new file mode 100644 index 00000000000..3bcda105c6f Binary files /dev/null and b/tools/storybook/wordpress/images/media-button-music.gif differ diff --git a/tools/storybook/wordpress/images/media-button-other.gif b/tools/storybook/wordpress/images/media-button-other.gif new file mode 100644 index 00000000000..cfe16a83dfd Binary files /dev/null and b/tools/storybook/wordpress/images/media-button-other.gif differ diff --git a/tools/storybook/wordpress/images/media-button-video.gif b/tools/storybook/wordpress/images/media-button-video.gif new file mode 100644 index 00000000000..9b4a7963ea4 Binary files /dev/null and b/tools/storybook/wordpress/images/media-button-video.gif differ diff --git a/tools/storybook/wordpress/images/media-button.png b/tools/storybook/wordpress/images/media-button.png new file mode 100644 index 00000000000..752ee452321 Binary files /dev/null and b/tools/storybook/wordpress/images/media-button.png differ diff --git a/tools/storybook/wordpress/images/menu-2x.png b/tools/storybook/wordpress/images/menu-2x.png new file mode 100644 index 00000000000..7131763a593 Binary files /dev/null and b/tools/storybook/wordpress/images/menu-2x.png differ diff --git a/tools/storybook/wordpress/images/menu-vs-2x.png b/tools/storybook/wordpress/images/menu-vs-2x.png new file mode 100644 index 00000000000..99b382369ff Binary files /dev/null and b/tools/storybook/wordpress/images/menu-vs-2x.png differ diff --git a/tools/storybook/wordpress/images/menu-vs.png b/tools/storybook/wordpress/images/menu-vs.png new file mode 100644 index 00000000000..fe281087de4 Binary files /dev/null and b/tools/storybook/wordpress/images/menu-vs.png differ diff --git a/tools/storybook/wordpress/images/menu.png b/tools/storybook/wordpress/images/menu.png new file mode 100644 index 00000000000..c1d15af82be Binary files /dev/null and b/tools/storybook/wordpress/images/menu.png differ diff --git a/tools/storybook/wordpress/images/no.png b/tools/storybook/wordpress/images/no.png new file mode 100644 index 00000000000..59c35bdccc6 Binary files /dev/null and b/tools/storybook/wordpress/images/no.png differ diff --git a/tools/storybook/wordpress/images/post-formats-vs.png b/tools/storybook/wordpress/images/post-formats-vs.png new file mode 100644 index 00000000000..d77f91c0646 Binary files /dev/null and b/tools/storybook/wordpress/images/post-formats-vs.png differ diff --git a/tools/storybook/wordpress/images/post-formats.png b/tools/storybook/wordpress/images/post-formats.png new file mode 100644 index 00000000000..cae309e5d5e Binary files /dev/null and b/tools/storybook/wordpress/images/post-formats.png differ diff --git a/tools/storybook/wordpress/images/post-formats32-vs.png b/tools/storybook/wordpress/images/post-formats32-vs.png new file mode 100644 index 00000000000..f5653407321 Binary files /dev/null and b/tools/storybook/wordpress/images/post-formats32-vs.png differ diff --git a/tools/storybook/wordpress/images/post-formats32.png b/tools/storybook/wordpress/images/post-formats32.png new file mode 100644 index 00000000000..69ec095e2b3 Binary files /dev/null and b/tools/storybook/wordpress/images/post-formats32.png differ diff --git a/tools/storybook/wordpress/images/privacy.svg b/tools/storybook/wordpress/images/privacy.svg new file mode 100644 index 00000000000..4267891c728 --- /dev/null +++ b/tools/storybook/wordpress/images/privacy.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tools/storybook/wordpress/images/resize-2x.gif b/tools/storybook/wordpress/images/resize-2x.gif new file mode 100644 index 00000000000..e57f9bcd69d Binary files /dev/null and b/tools/storybook/wordpress/images/resize-2x.gif differ diff --git a/tools/storybook/wordpress/images/resize-rtl-2x.gif b/tools/storybook/wordpress/images/resize-rtl-2x.gif new file mode 100644 index 00000000000..483c23dcbe5 Binary files /dev/null and b/tools/storybook/wordpress/images/resize-rtl-2x.gif differ diff --git a/tools/storybook/wordpress/images/resize-rtl.gif b/tools/storybook/wordpress/images/resize-rtl.gif new file mode 100644 index 00000000000..82502954e11 Binary files /dev/null and b/tools/storybook/wordpress/images/resize-rtl.gif differ diff --git a/tools/storybook/wordpress/images/resize.gif b/tools/storybook/wordpress/images/resize.gif new file mode 100644 index 00000000000..5cb0939a68e Binary files /dev/null and b/tools/storybook/wordpress/images/resize.gif differ diff --git a/tools/storybook/wordpress/images/se.png b/tools/storybook/wordpress/images/se.png new file mode 100644 index 00000000000..eb487b4636a Binary files /dev/null and b/tools/storybook/wordpress/images/se.png differ diff --git a/tools/storybook/wordpress/images/sort-2x.gif b/tools/storybook/wordpress/images/sort-2x.gif new file mode 100644 index 00000000000..941626c3ea3 Binary files /dev/null and b/tools/storybook/wordpress/images/sort-2x.gif differ diff --git a/tools/storybook/wordpress/images/sort.gif b/tools/storybook/wordpress/images/sort.gif new file mode 100644 index 00000000000..5b46ee5ee21 Binary files /dev/null and b/tools/storybook/wordpress/images/sort.gif differ diff --git a/tools/storybook/wordpress/images/spinner-2x.gif b/tools/storybook/wordpress/images/spinner-2x.gif new file mode 100644 index 00000000000..26e28e17601 Binary files /dev/null and b/tools/storybook/wordpress/images/spinner-2x.gif differ diff --git a/tools/storybook/wordpress/images/spinner.gif b/tools/storybook/wordpress/images/spinner.gif new file mode 100644 index 00000000000..88e8a9396fb Binary files /dev/null and b/tools/storybook/wordpress/images/spinner.gif differ diff --git a/tools/storybook/wordpress/images/stars-2x.png b/tools/storybook/wordpress/images/stars-2x.png new file mode 100644 index 00000000000..15aa9debfdf Binary files /dev/null and b/tools/storybook/wordpress/images/stars-2x.png differ diff --git a/tools/storybook/wordpress/images/stars.png b/tools/storybook/wordpress/images/stars.png new file mode 100644 index 00000000000..c01ada13ee9 Binary files /dev/null and b/tools/storybook/wordpress/images/stars.png differ diff --git a/tools/storybook/wordpress/images/w-logo-blue.png b/tools/storybook/wordpress/images/w-logo-blue.png new file mode 100644 index 00000000000..11e550c74e0 Binary files /dev/null and b/tools/storybook/wordpress/images/w-logo-blue.png differ diff --git a/tools/storybook/wordpress/images/w-logo-white.png b/tools/storybook/wordpress/images/w-logo-white.png new file mode 100644 index 00000000000..ed5efcdc000 Binary files /dev/null and b/tools/storybook/wordpress/images/w-logo-white.png differ diff --git a/tools/storybook/wordpress/images/wheel.png b/tools/storybook/wordpress/images/wheel.png new file mode 100644 index 00000000000..9b9fdf4a37a Binary files /dev/null and b/tools/storybook/wordpress/images/wheel.png differ diff --git a/tools/storybook/wordpress/images/wordpress-logo-white.svg b/tools/storybook/wordpress/images/wordpress-logo-white.svg new file mode 100644 index 00000000000..682e80b8d48 --- /dev/null +++ b/tools/storybook/wordpress/images/wordpress-logo-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/storybook/wordpress/images/wordpress-logo.png b/tools/storybook/wordpress/images/wordpress-logo.png new file mode 100644 index 00000000000..63b0379613d Binary files /dev/null and b/tools/storybook/wordpress/images/wordpress-logo.png differ diff --git a/tools/storybook/wordpress/images/wordpress-logo.svg b/tools/storybook/wordpress/images/wordpress-logo.svg new file mode 100644 index 00000000000..ba26fef0d8e --- /dev/null +++ b/tools/storybook/wordpress/images/wordpress-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/storybook/wordpress/images/wpspin_light-2x.gif b/tools/storybook/wordpress/images/wpspin_light-2x.gif new file mode 100644 index 00000000000..08e47e8211c Binary files /dev/null and b/tools/storybook/wordpress/images/wpspin_light-2x.gif differ diff --git a/tools/storybook/wordpress/images/wpspin_light.gif b/tools/storybook/wordpress/images/wpspin_light.gif new file mode 100644 index 00000000000..fbf9be46c10 Binary files /dev/null and b/tools/storybook/wordpress/images/wpspin_light.gif differ diff --git a/tools/storybook/wordpress/images/xit-2x.gif b/tools/storybook/wordpress/images/xit-2x.gif new file mode 100644 index 00000000000..040107a90f7 Binary files /dev/null and b/tools/storybook/wordpress/images/xit-2x.gif differ diff --git a/tools/storybook/wordpress/images/xit.gif b/tools/storybook/wordpress/images/xit.gif new file mode 100644 index 00000000000..b11c5d43e9b Binary files /dev/null and b/tools/storybook/wordpress/images/xit.gif differ diff --git a/tools/storybook/wordpress/images/yes.png b/tools/storybook/wordpress/images/yes.png new file mode 100644 index 00000000000..fbb39836bbd Binary files /dev/null and b/tools/storybook/wordpress/images/yes.png differ