diff --git a/core/modules/contextual/css/contextual.icons.theme.css b/core/modules/contextual/css/contextual.icons.theme.css index 36644efe02d0b3d92dc9a9b48931e0e58d1537da..15524fb73b52f5bd21c6c4d54467d175b4b0059c 100644 --- a/core/modules/contextual/css/contextual.icons.theme.css +++ b/core/modules/contextual/css/contextual.icons.theme.css @@ -1,3 +1,10 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + /** * @file * Styling for contextual module icons. @@ -6,34 +13,40 @@ /** * Toolbar tab icon. */ + .toolbar-bar .toolbar-icon-edit:before { - background-image: url(../../../misc/icons/bebebe/pencil.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23bebebe' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23bebebe' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-bar .toolbar-icon-edit:active:before, .toolbar-bar .toolbar-icon-edit.is-active:before { - background-image: url(../../../misc/icons/ffffff/pencil.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e"); } /** * Contextual trigger. */ + .contextual .trigger { - /* Override the .focusable height: auto */ width: 26px !important; - /* Override the .focusable height: auto */ height: 26px !important; +} + +.contextual .trigger { + /* Override the .focusable height: auto */ + /* Override the .focusable height: auto */ text-indent: -9999px; - background-image: url(../../../misc/icons/bebebe/pencil.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23bebebe' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23bebebe' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 16px 16px; } .contextual .trigger:hover { - background-image: url(../../../misc/icons/787878/pencil.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23787878' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23787878' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e"); } .contextual .trigger:focus { outline: none; - background-image: url(../../../misc/icons/5181c6/pencil.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%235181C6' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%235181C6' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%235181C6' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e"); } diff --git a/core/modules/contextual/css/contextual.icons.theme.pcss.css b/core/modules/contextual/css/contextual.icons.theme.pcss.css new file mode 100644 index 0000000000000000000000000000000000000000..36644efe02d0b3d92dc9a9b48931e0e58d1537da --- /dev/null +++ b/core/modules/contextual/css/contextual.icons.theme.pcss.css @@ -0,0 +1,39 @@ +/** + * @file + * Styling for contextual module icons. + */ + +/** + * Toolbar tab icon. + */ +.toolbar-bar .toolbar-icon-edit:before { + background-image: url(../../../misc/icons/bebebe/pencil.svg); +} +.toolbar-bar .toolbar-icon-edit:active:before, +.toolbar-bar .toolbar-icon-edit.is-active:before { + background-image: url(../../../misc/icons/ffffff/pencil.svg); +} + +/** + * Contextual trigger. + */ +.contextual .trigger { + /* Override the .focusable height: auto */ + width: 26px !important; + /* Override the .focusable height: auto */ + height: 26px !important; + text-indent: -9999px; + background-image: url(../../../misc/icons/bebebe/pencil.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: 16px 16px; +} + +.contextual .trigger:hover { + background-image: url(../../../misc/icons/787878/pencil.svg); +} + +.contextual .trigger:focus { + outline: none; + background-image: url(../../../misc/icons/5181c6/pencil.svg); +} diff --git a/core/modules/shortcut/css/shortcut.icons.theme.css b/core/modules/shortcut/css/shortcut.icons.theme.css index 6d7ad58dad03a7b409b616040a94cf56eae14d72..446b68ea453292f1c4eda846e8560f800c631230 100644 --- a/core/modules/shortcut/css/shortcut.icons.theme.css +++ b/core/modules/shortcut/css/shortcut.icons.theme.css @@ -1,3 +1,10 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + /** * @file * Styling for the shortcut module icons. @@ -6,34 +13,41 @@ /** * Toolbar tab icon. */ + .toolbar-bar .toolbar-icon-shortcut:before { - background-image: url(../../../misc/icons/bebebe/star.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M12.236 15c-.146 0-.283-.041-.406-.124l-3.828-2.583-3.83 2.583c-.123.083-.265.124-.406.124-.145 0-.289-.043-.413-.129-.246-.171-.362-.475-.292-.766l1.122-4.73-3.439-3.107c-.225-.2-.303-.519-.196-.8.106-.282.376-.468.678-.468h4.259l1.843-4.542c.109-.277.377-.458.674-.458.297 0 .564.181.674.458l1.84 4.542h4.262c.306 0 .57.186.683.468.104.281.024.601-.196.8l-3.439 3.107 1.121 4.73c.065.291-.047.595-.293.766-.129.086-.273.129-.418.129z'/%3e%3c/svg%3e"); } + .toolbar-bar .toolbar-icon-shortcut:active:before, .toolbar-bar .toolbar-icon-shortcut.is-active:before { - background-image: url(../../../misc/icons/ffffff/star.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M12.236 15c-.146 0-.283-.041-.406-.124l-3.828-2.583-3.83 2.583c-.123.083-.265.124-.406.124-.145 0-.289-.043-.413-.129-.246-.171-.362-.475-.292-.766l1.122-4.73-3.439-3.107c-.225-.2-.303-.519-.196-.8.106-.282.376-.468.678-.468h4.259l1.843-4.542c.109-.277.377-.458.674-.458.297 0 .564.181.674.458l1.84 4.542h4.262c.306 0 .57.186.683.468.104.281.024.601-.196.8l-3.439 3.107 1.121 4.73c.065.291-.047.595-.293.766-.129.086-.273.129-.418.129z'/%3e%3c/svg%3e"); } /** * Add/remove links. */ + .shortcut-action__icon { display: inline-block; width: 20px; height: 20px; vertical-align: -2px; - background: transparent url(../images/favstar.svg) no-repeat left top; + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='80' height='20' viewBox='0 0 80 20'%3e%3cg%3e%3cpath fill='%23FEF6A8' d='M69.729 2.259c.149-.385.394-.385.543 0l1.959 5.049c.149.385.609.699 1.021.699l1.75.169c.412 0 .493.219.18.487l-1.31.981c-.313.268-.497.816-.407 1.22l1.472 6.562c.09.403-.118.547-.463.319l-3.848-2.539c-.345-.228-.907-.228-1.252 0l-3.848 2.539c-.345.228-.553.084-.463-.319l1.047-4.707c.09-.403-.094-.952-.407-1.22l-3.518-3.006c-.313-.268-.232-.487.18-.487h4.381c.412 0 .872-.314 1.021-.699l1.962-5.048z'/%3e%3cpolygon fill='%23807640' points='77.548,5 75.002,7.547 72.456,5 71.041,6.415 73.587,8.961 71.044,11.505 72.457,12.919 75.001,10.375 77.546,12.919 78.96,11.505 76.415,8.96 78.962,6.414'/%3e%3cpath fill='%2380722D' d='M75.172 13.897s-.133-.516-.651-.349c-.516.166-.302.674-.302.674l.719 3.204c.061.273-.016.428-.178.428-.078 0-.174-.035-.285-.107l-3.848-2.539c-.174-.115-.4-.172-.627-.172s-.453.057-.625.172l-3.848 2.539c-.111.072-.209.107-.285.107-.164 0-.24-.154-.178-.428l1.047-4.707c.09-.402-.094-.951-.408-1.219l-3.518-3.007c-.314-.269-.232-.487.18-.487h4.383c.412 0 .871-.314 1.021-.699l1.959-5.049c.075-.192.174-.287.272-.287s.197.096.271.288l.461 1.158s.255.409.635.219c.44-.221.227-.66.227-.66l-.389-1.078c-.336-.861-1.008-.927-1.205-.927s-.869.066-1.203.926l-1.961 5.049-.109.062-4.361-.001c-.934 0-1.23.609-1.301.796-.068.187-.238.844.471 1.451l3.52 3.007c.037.041.086.186.078.25l-1.045 4.699c-.133.596.051.984.229 1.205.225.279.561.439.926.439.279 0 .561-.092.836-.273l3.848-2.539v.002l.074-.008.088.014 3.836 2.531c.273.182.557.273.836.273.363 0 .701-.16.924-.439.178-.221.361-.609.23-1.205l-.744-3.313z'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23FEF6A8' d='M54.759 18.355c-.18 0-.369-.064-.561-.191l-3.848-2.539c-.083-.055-.215-.088-.351-.088s-.268.033-.351.088l-3.848 2.539c-.191.127-.381.191-.561.191-.212 0-.407-.092-.535-.252-.109-.136-.22-.383-.131-.784l1.047-4.708c.05-.222-.071-.584-.243-.731l-3.517-3.006c-.451-.386-.378-.756-.326-.897.053-.141.237-.47.831-.47h4.381c.206 0 .48-.188.556-.38l1.961-5.049c.213-.549.587-.608.737-.608s.524.059.737.607l1.959 5.049c.075.191.35.38.556.38h4.383c.594 0 .778.329.831.47.052.142.125.512-.326.897l-3.518 3.006c-.173.147-.294.51-.244.731l1.047 4.708c.089.401-.021.647-.131.784-.128.162-.323.253-.535.253z'/%3e%3cpath fill='%2380722D' d='M50 1.97c.099 0 .196.096.271.289l1.959 5.049c.149.385.609.699 1.021.699h4.383c.412 0 .493.219.18.487l-3.517 3.006c-.313.268-.497.816-.407 1.22l1.047 4.708c.061.273-.015.428-.178.428-.077 0-.174-.035-.285-.108l-3.848-2.539c-.173-.113-.399-.171-.626-.171s-.453.058-.626.171l-3.848 2.539c-.111.073-.208.108-.285.108-.163 0-.238-.154-.178-.428l1.047-4.708c.09-.403-.094-.952-.407-1.22l-3.518-3.006c-.313-.268-.232-.487.18-.487h4.381c.412 0 .872-.314 1.021-.699l1.961-5.049c.076-.193.173-.289.272-.289m0-1c-.198 0-.87.067-1.204.927l-1.961 5.049-.109.062-4.36-.001c-.934 0-1.231.61-1.3.797-.069.187-.239.844.471 1.451l3.518 3.005c.039.043.086.186.079.25l-1.046 4.701c-.132.595.052.983.229 1.205.224.279.561.439.925.439.28 0 .562-.093.836-.273l3.848-2.539.001.001.074-.007.089.014 3.834 2.531c.274.181.557.273.836.273.364 0 .701-.16.925-.439.178-.222.361-.61.229-1.206l-1.046-4.707c-.006-.058.041-.2.086-.248l3.512-3c.71-.607.54-1.264.471-1.451-.068-.187-.366-.797-1.3-.797h-4.383l-.098-.08-1.95-5.03c-.336-.86-1.008-.927-1.206-.927z'/%3e%3c/g%3e%3cg%3e%3cpath opacity='.7' fill='%235A563B' d='M35.414 14.96s-.133-.516-.651-.349c-.516.166-.302.674-.302.674l.477 2.142c.061.273-.016.428-.178.428-.078 0-.174-.035-.285-.107l-3.848-2.539c-.174-.115-.4-.172-.627-.172s-.453.057-.625.172l-3.848 2.539c-.111.072-.209.107-.285.107-.164 0-.24-.154-.178-.428l1.047-4.707c.09-.402-.094-.951-.408-1.219l-3.518-3.007c-.314-.269-.232-.487.18-.487h4.383c.412 0 .871-.314 1.021-.699l1.959-5.049c.075-.193.174-.288.272-.288s.197.096.271.288l1.377 3.538s.255.409.635.219c.44-.221.227-.66.227-.66l-.607-1.658-.697-1.801c-.337-.86-1.009-.926-1.206-.926s-.869.066-1.203.926l-1.961 5.049-.109.062-4.361-.001c-.934 0-1.23.609-1.301.796-.068.187-.238.844.471 1.451l3.52 3.007c.037.041.086.186.078.25l-1.045 4.699c-.133.596.051.984.229 1.205.225.279.561.439.926.439.279 0 .561-.092.836-.273l3.848-2.539v.002l.074-.008.088.014 3.836 2.531c.273.182.557.273.836.273.363 0 .701-.16.924-.439.178-.221.361-.609.23-1.205l-.502-2.25z'/%3e%3cpolygon fill='%23807640' points='39,7.96 36,7.96 36,4.96 34,4.96 34,7.96 31,7.96 31,9.959 34,9.959 34,12.96 36,12.96 36,9.959 39,9.959'/%3e%3c/g%3e%3cpath opacity='.7' fill='%235A563B' d='M10 1.97c.098 0 .197.096.271.289l1.959 5.049c.149.385.609.699 1.021.699h4.383c.412 0 .493.219.18.487l-3.517 3.006c-.313.268-.497.816-.407 1.22l1.047 4.707c.061.273-.015.428-.178.428-.077 0-.174-.035-.285-.108l-3.848-2.539c-.172-.114-.399-.171-.626-.171s-.454.057-.626.171l-3.848 2.539c-.111.073-.208.108-.285.108-.163 0-.239-.154-.178-.428l1.047-4.707c.09-.403-.094-.951-.407-1.22l-3.518-3.006c-.313-.268-.233-.487.18-.487h4.382c.413 0 .872-.314 1.021-.699l1.96-5.049c.075-.193.173-.289.272-.289m0-1c-.198 0-.87.067-1.204.927l-1.96 5.049-.109.062-4.362-.001c-.934 0-1.231.61-1.3.796-.069.187-.239.844.47 1.451l3.519 3.007c.038.041.086.185.079.249l-1.046 4.7c-.133.595.051.983.229 1.205.224.279.561.439.925.439.28 0 .562-.093.836-.274l3.848-2.538v.001l.075-.007.088.014 3.834 2.531c.274.181.557.273.836.273.364 0 .701-.16.925-.439.178-.222.361-.61.229-1.206l-1.047-4.706c-.006-.058.041-.2.086-.248l3.512-3c.71-.607.54-1.264.471-1.451-.068-.187-.366-.797-1.3-.797h-4.383l-.098-.08-1.95-5.03c-.333-.86-1.005-.927-1.203-.927z'/%3e%3c/svg%3e") no-repeat left top; } + [dir="rtl"] .shortcut-action__icon { - background-image: url(../images/favstar-rtl.svg); + background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='80' height='20' xmlns='http://www.w3.org/2000/svg'%3e %3cg%3e %3cg id='svg_1'%3e %3cpath id='svg_2' d='m70.39463,2.259c-0.149605,-0.385 -0.395561,-0.385 -0.545135,0l-1.966644,5.049c-0.149582,0.385 -0.611374,0.699 -1.024971,0.699l-1.756836,0.169c-0.413605,0 -0.494911,0.219001 -0.180702,0.487l1.315094,0.981c0.31424,0.268 0.498962,0.816 0.408607,1.22l-1.477745,6.562c-0.090355,0.403 0.118454,0.546999 0.464806,0.319l3.862999,-2.539001c0.346359,-0.228001 0.910545,-0.228001 1.256889,0l3.863014,2.539001c0.346344,0.227999 0.555161,0.084 0.464806,-0.319l-1.051086,-4.707001c-0.090355,-0.403 0.094368,-0.952 0.408577,-1.22l3.531731,-3.006c0.314209,-0.268 0.232903,-0.487 -0.180702,-0.487l-4.398079,0c-0.413612,0 -0.875404,-0.314 -1.024986,-0.698999l-1.969635,-5.048z' fill='%23FEF6A8'/%3e %3cpolygon id='svg_3' points='62.545124552483685,5 65.1010474534105,7.546999931335449 67.6569842932513,5 69.07749901699208,6.414999961853027 66.52157611606526,8.961000442504883 69.07448821157232,11.505000114440918 67.65596675253073,12.918999671936035 65.10203711630311,10.375 62.54711781718288,12.918999671936035 61.12760669524869,11.505000114440918 63.682525994368916,8.960000038146973 61.12559949163551,6.414000034332275 ' fill='%23807640'/%3e %3cpath id='svg_4' d='m64.930397,13.897s0.133507,-0.516001 0.653519,-0.349c0.518013,0.165999 0.303192,0.674 0.303192,0.674l-0.721832,3.204c-0.061234,0.272999 0.01609,0.427999 0.178696,0.427999c0.078323,0 0.174698,-0.035 0.28614,-0.107l3.863007,-2.539c0.174667,-0.115 0.401566,-0.172 0.62944,-0.172s0.45475,0.057 0.627426,0.172l3.863022,2.539c0.111427,0.072001 0.209808,0.107 0.28611,0.107c0.164627,0 0.240929,-0.153999 0.178696,-0.427999l-1.051094,-4.707001c-0.090347,-0.401999 0.094368,-0.951 0.409584,-1.219l3.531731,-3.007c0.315224,-0.269 0.232903,-0.487 -0.180702,-0.487l-4.400085,0c-0.413628,0 -0.874405,-0.314 -1.024986,-0.698999l-1.966637,-5.049c-0.075302,-0.192 -0.174683,-0.287 -0.273064,-0.287s-0.197769,0.096 -0.272064,0.288l-0.462784,1.158s-0.256004,0.409 -0.637497,0.219c-0.441711,-0.221 -0.227875,-0.66 -0.227875,-0.66l0.390511,-1.078c0.337311,-0.861 1.01194,-0.927 1.209709,-0.927s0.872391,0.066 1.20768,0.926l1.968658,5.049l0.109421,0.062l4.378006,-0.001c0.937645,0 1.234795,0.609 1.306076,0.796c0.06826,0.187 0.23893,0.844 -0.472839,1.451l-3.533722,3.007c-0.037148,0.041 -0.086334,0.186 -0.078308,0.25l1.049088,4.698999c0.133507,0.596001 -0.051216,0.984001 -0.229912,1.205002c-0.225868,0.278999 -0.563187,0.438999 -0.929596,0.438999c-0.280106,0 -0.563194,-0.092001 -0.839264,-0.273001l-3.863014,-2.539l0,0.002001l-0.074287,-0.008001l-0.088341,0.014l-3.85096,2.531c-0.274071,0.182001 -0.559174,0.273001 -0.839264,0.273001c-0.364418,0 -0.703735,-0.16 -0.927589,-0.438999c-0.178711,-0.221001 -0.362411,-0.609001 -0.230904,-1.205002l0.74691,-3.312999z' fill='%2380722D'/%3e %3c/g%3e %3cg id='svg_5'%3e %3cpath id='svg_6' d='m54.758999,18.355c-0.18,0 -0.368999,-0.063999 -0.560997,-0.191l-3.848003,-2.539c-0.083,-0.055 -0.215,-0.088 -0.350998,-0.088s-0.268002,0.033 -0.351002,0.088l-3.848,2.539c-0.190998,0.127001 -0.381001,0.191 -0.561001,0.191c-0.211998,0 -0.406998,-0.091999 -0.535,-0.251999c-0.108997,-0.136002 -0.219997,-0.383001 -0.130997,-0.784l1.046997,-4.708c0.049999,-0.222 -0.070999,-0.584 -0.243,-0.731l-3.516998,-3.006001c-0.451,-0.386 -0.378002,-0.756 -0.326,-0.896999c0.053001,-0.141 0.237,-0.47 0.831001,-0.47l4.380997,0c0.206001,0 0.480003,-0.188 0.556,-0.38l1.961002,-5.049c0.213001,-0.549 0.586998,-0.608 0.737,-0.608s0.523998,0.059 0.737,0.607l1.959,5.049c0.075001,0.191 0.350002,0.38 0.556,0.38l4.382999,0c0.594002,0 0.778,0.329 0.831001,0.47c0.052002,0.142 0.125,0.512 -0.326,0.897l-3.517998,3.006c-0.173,0.147 -0.294003,0.51 -0.244003,0.731l1.047001,4.708001c0.089001,0.400999 -0.021,0.646999 -0.131001,0.783998c-0.127998,0.162001 -0.322998,0.253 -0.535,0.253z' fill='%23FEF6A8'/%3e %3cpath id='svg_7' d='m50,1.97c0.098999,0 0.195999,0.096 0.271,0.289l1.959,5.049c0.149002,0.385 0.609001,0.699 1.021,0.699l4.382999,0c0.412003,0 0.493,0.219 0.18,0.487l-3.516998,3.006c-0.313,0.268 -0.497002,0.816 -0.407001,1.22l1.047001,4.707999c0.061001,0.273001 -0.014999,0.428001 -0.178001,0.428001c-0.077,0 -0.174,-0.035002 -0.285,-0.108002l-3.848,-2.539c-0.173,-0.113 -0.398998,-0.171 -0.625999,-0.171s-0.452999,0.058 -0.625999,0.171l-3.848,2.539c-0.111,0.073 -0.208,0.108002 -0.285,0.108002c-0.163002,0 -0.238003,-0.154001 -0.178001,-0.428001l1.047001,-4.707999c0.09,-0.403 -0.094002,-0.952001 -0.407001,-1.22l-3.517998,-3.006c-0.313,-0.268001 -0.232002,-0.487 0.18,-0.487l4.380997,0c0.412003,0 0.872002,-0.314 1.021,-0.699l1.961002,-5.049c0.076,-0.193 0.173,-0.289 0.271999,-0.289m0,-1c-0.198002,0 -0.869999,0.067 -1.203999,0.927l-1.961002,5.049l-0.108997,0.062l-4.360001,-0.001c-0.934002,0 -1.231003,0.61 -1.299999,0.797c-0.069,0.187 -0.239002,0.844 0.470997,1.451l3.518002,3.005c0.039001,0.043 0.085999,0.186 0.078999,0.25l-1.045998,4.701c-0.132,0.594999 0.051998,0.983 0.229,1.205c0.223999,0.278999 0.560997,0.438999 0.924999,0.438999c0.279999,0 0.562,-0.093 0.835999,-0.272999l3.848,-2.539001l0.000999,0.001001l0.074001,-0.007l0.089001,0.014l3.834,2.531c0.274002,0.181 0.556999,0.272999 0.835999,0.272999c0.364002,0 0.701,-0.16 0.925003,-0.438999c0.177998,-0.222 0.361,-0.610001 0.229,-1.206001l-1.046001,-4.706999c-0.006001,-0.058001 0.041,-0.2 0.085999,-0.248l3.512001,-3c0.709999,-0.607 0.540001,-1.264 0.471001,-1.451c-0.068001,-0.187 -0.366001,-0.797 -1.299999,-0.797l-4.382999,0l-0.098003,-0.08l-1.949997,-5.03c-0.336002,-0.86 -1.007999,-0.927 -1.206001,-0.927z' fill='%2380722D'/%3e %3c/g%3e %3cg id='svg_8'%3e %3cpath id='svg_9' d='m24.614159,14.96s0.134195,-0.516 0.656843,-0.349c0.520624,0.166 0.304714,0.674 0.304714,0.674l-0.481285,2.142c-0.06155,0.273001 0.016146,0.427999 0.179598,0.427999c0.078697,0 0.175564,-0.035 0.287556,-0.107l3.882521,-2.539c0.175562,-0.115 0.403591,-0.172 0.632626,-0.172s0.457062,0.057 0.630606,0.172l3.88253,2.539c0.111988,0.072001 0.210865,0.107 0.287552,0.107c0.165478,0 0.242153,-0.153999 0.179596,-0.427999l-1.056396,-4.707c-0.090809,-0.402 0.094849,-0.951 0.411667,-1.219l3.549557,-3.007c0.316818,-0.269 0.234085,-0.487 -0.181614,-0.487l-4.422318,0c-0.415699,0 -0.878819,-0.314 -1.030159,-0.699l-1.976582,-5.049c-0.075674,-0.193 -0.17556,-0.288 -0.274439,-0.288s-0.198767,0.096 -0.27343,0.288l-1.389357,3.538s-0.257284,0.409 -0.640696,0.219c-0.443943,-0.221 -0.229034,-0.66 -0.229034,-0.66l0.612446,-1.658l0.703257,-1.801c0.340021,-0.86 1.018047,-0.926 1.216814,-0.926s0.876799,0.066 1.213793,0.926l1.9786,5.049l0.10997,0.062l4.400127,-0.001c0.942379,0 1.241035,0.609 1.312668,0.796c0.068615,0.187 0.240135,0.844 -0.475224,1.451l-3.551575,3.007c-0.037338,0.041 -0.086777,0.186 -0.078701,0.25l1.054375,4.698999c0.134193,0.596001 -0.051464,0.984001 -0.231056,1.205002c-0.22702,0.278999 -0.566032,0.438999 -0.934299,0.438999c-0.281509,0 -0.566044,-0.092001 -0.843502,-0.273001l-3.882523,-2.539l0,0.002001l-0.074667,-0.008001l-0.088793,0.014l-3.870409,2.531c-0.275454,0.182001 -0.562002,0.273001 -0.843506,0.273001c-0.366257,0 -0.707291,-0.16 -0.932289,-0.438999c-0.179598,-0.221001 -0.364237,-0.609001 -0.232063,-1.205002l0.506502,-2.249999z' fill='%235A563B' opacity='0.7'/%3e %3cpolygon id='svg_10' points='20.99598980255405,7.960000038146973 24.022905373148888,7.960000038146973 24.022905373148888,4.960000038146973 26.040840745155492,4.960000038146973 26.040840745155492,7.960000038146973 29.06775631575033,7.960000038146973 29.06775631575033,9.958999633789062 26.040840745155492,9.958999633789062 26.040840745155492,12.960000038146973 24.022905373148888,12.960000038146973 24.022905373148888,9.958999633789062 20.99598980255405,9.958999633789062 ' fill='%23807640'/%3e %3c/g%3e %3cpath id='svg_11' d='m10,1.97c0.098,0 0.197,0.096 0.271,0.289l1.959,5.049c0.149,0.385 0.609,0.699 1.021001,0.699l4.383,0c0.411999,0 0.493,0.219 0.179998,0.487l-3.516999,3.006c-0.313,0.268 -0.497,0.816 -0.407,1.22l1.047,4.707c0.061,0.273001 -0.015,0.427999 -0.178,0.427999c-0.077,0 -0.174,-0.035 -0.285,-0.108l-3.848,-2.539c-0.172,-0.114 -0.399,-0.171 -0.626,-0.171s-0.454,0.057 -0.626,0.171l-3.848,2.539c-0.111,0.073 -0.208,0.108 -0.285,0.108c-0.163,0 -0.239,-0.153999 -0.178,-0.427999l1.047,-4.707c0.09,-0.403 -0.094,-0.951 -0.407,-1.22l-3.518,-3.006c-0.313,-0.268001 -0.233,-0.487 0.18,-0.487l4.382,0c0.413,0 0.872,-0.314 1.021,-0.699l1.96,-5.049c0.075001,-0.193 0.173,-0.289 0.272,-0.289m0,-1c-0.198,0 -0.87,0.067 -1.204,0.927l-1.96,5.049l-0.109,0.062l-4.362,-0.001c-0.934,0 -1.231,0.61 -1.3,0.796c-0.069,0.187 -0.239,0.844 0.47,1.451l3.519,3.007c0.038,0.041 0.086,0.185 0.079,0.249001l-1.046,4.699999c-0.133,0.595001 0.051,0.983002 0.229,1.205002c0.224,0.278999 0.561,0.438999 0.925,0.438999c0.28,0 0.562,-0.093 0.836,-0.274l3.848,-2.538l0,0.000999l0.075,-0.007l0.088,0.014l3.834,2.531c0.274,0.181 0.557,0.273001 0.836,0.273001c0.363999,0 0.700999,-0.16 0.924999,-0.438999c0.178,-0.222 0.361001,-0.610001 0.229,-1.206001l-1.047,-4.705999c-0.006,-0.058001 0.041,-0.2 0.086,-0.248l3.511999,-3c0.710001,-0.607 0.540001,-1.264 0.471001,-1.451c-0.068001,-0.187 -0.365999,-0.797 -1.299999,-0.797l-4.383,0l-0.098001,-0.08l-1.95,-5.03c-0.333,-0.86 -1.005,-0.927 -1.203,-0.927z' fill='%235A563B' opacity='0.7'/%3e %3c/g%3e%3c/svg%3e"); } + .shortcut-action--add:hover .shortcut-action__icon, .shortcut-action--add:focus .shortcut-action__icon { background-position: -20px top; } + .shortcut-action--remove .shortcut-action__icon { background-position: -40px top; } + .shortcut-action--remove:focus .shortcut-action__icon, .shortcut-action--remove:hover .shortcut-action__icon { background-position: -60px top; diff --git a/core/modules/shortcut/css/shortcut.icons.theme.pcss.css b/core/modules/shortcut/css/shortcut.icons.theme.pcss.css new file mode 100644 index 0000000000000000000000000000000000000000..6d7ad58dad03a7b409b616040a94cf56eae14d72 --- /dev/null +++ b/core/modules/shortcut/css/shortcut.icons.theme.pcss.css @@ -0,0 +1,40 @@ +/** + * @file + * Styling for the shortcut module icons. + */ + +/** + * Toolbar tab icon. + */ +.toolbar-bar .toolbar-icon-shortcut:before { + background-image: url(../../../misc/icons/bebebe/star.svg); +} +.toolbar-bar .toolbar-icon-shortcut:active:before, +.toolbar-bar .toolbar-icon-shortcut.is-active:before { + background-image: url(../../../misc/icons/ffffff/star.svg); +} + +/** + * Add/remove links. + */ +.shortcut-action__icon { + display: inline-block; + width: 20px; + height: 20px; + vertical-align: -2px; + background: transparent url(../images/favstar.svg) no-repeat left top; +} +[dir="rtl"] .shortcut-action__icon { + background-image: url(../images/favstar-rtl.svg); +} +.shortcut-action--add:hover .shortcut-action__icon, +.shortcut-action--add:focus .shortcut-action__icon { + background-position: -20px top; +} +.shortcut-action--remove .shortcut-action__icon { + background-position: -40px top; +} +.shortcut-action--remove:focus .shortcut-action__icon, +.shortcut-action--remove:hover .shortcut-action__icon { + background-position: -60px top; +} diff --git a/core/modules/toolbar/css/toolbar.icons.theme.css b/core/modules/toolbar/css/toolbar.icons.theme.css index 974557d1cb8daaecc1e108837cf069dfa592b33f..0cd2dc2a6f65a56c8cc91c844c771b1f01bfe8b8 100644 --- a/core/modules/toolbar/css/toolbar.icons.theme.css +++ b/core/modules/toolbar/css/toolbar.icons.theme.css @@ -1,3 +1,10 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + /** * @file * Styling for toolbar module icons. @@ -7,10 +14,12 @@ position: relative; padding-left: 2.75em; /* LTR */ } + [dir="rtl"] .toolbar .toolbar-icon { padding-right: 2.75em; padding-left: 1.3333em; } + .toolbar .toolbar-icon:before { position: absolute; top: 0; @@ -25,35 +34,44 @@ background-position: center center; background-size: 100% auto; } + [dir="rtl"] .toolbar .toolbar-icon:before { right: 0.6667em; left: auto; } + .toolbar button.toolbar-icon { border: 0; background-color: transparent; font-size: 1em; } + .toolbar .toolbar-menu ul .toolbar-icon { padding-left: 1.3333em; /* LTR */ } + [dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon { padding-right: 1.3333em; padding-left: 0; } + .toolbar .toolbar-menu ul a.toolbar-icon:before { display: none; } + .toolbar .toolbar-tray-vertical .toolbar-menu ul a { padding-left: 2.75em; /* LTR */ } + [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a { padding-right: 2.75em; padding-left: 0; } + .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a { padding-left: 3.75em; /* LTR */ } + [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a { padding-right: 3.75em; padding-left: 0; @@ -63,6 +81,7 @@ padding-right: 4em; /* LTR */ padding-left: 2.75em; /* LTR */ } + [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a { padding-right: 2.75em; padding-left: 4em; @@ -71,79 +90,99 @@ /** * Top level icons. */ + .toolbar-bar .toolbar-icon-menu:before { - background-image: url(../../../misc/icons/bebebe/hamburger.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-bar .toolbar-icon-menu:active:before, .toolbar-bar .toolbar-icon-menu.is-active:before { - background-image: url(../../../misc/icons/ffffff/hamburger.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-bar .toolbar-icon-help:before { - background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e"); } + .toolbar-bar .toolbar-icon-help:active:before, .toolbar-bar .toolbar-icon-help.is-active:before { - background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e"); } /** * Main menu icons. */ + .toolbar-icon-system-admin-content:before { - background-image: url(../../../misc/icons/787878/file.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-icon-system-admin-content:active:before, .toolbar-icon-system-admin-content.is-active:before { - background-image: url(../../../misc/icons/000000/file.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-icon-system-admin-structure:before { - background-image: url(../../../misc/icons/787878/orgchart.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e"); } + .toolbar-icon-system-admin-structure:active:before, .toolbar-icon-system-admin-structure.is-active:before { - background-image: url(../../../misc/icons/000000/orgchart.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e"); } + .toolbar-icon-system-themes-page:before { - background-image: url(../../../misc/icons/787878/paintbrush.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e"); } + .toolbar-icon-system-themes-page:active:before, .toolbar-icon-system-themes-page.is-active:before { - background-image: url(../../../misc/icons/000000/paintbrush.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e"); } + .toolbar-icon-entity-user-collection:before { - background-image: url(../../../misc/icons/787878/people.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-icon-entity-user-collection:active:before, .toolbar-icon-entity-user-collection.is-active:before { - background-image: url(../../../misc/icons/000000/people.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-icon-system-modules-list:before { - background-image: url(../../../misc/icons/787878/puzzlepiece.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e"); } + .toolbar-icon-system-modules-list:active:before, .toolbar-icon-system-modules-list.is-active:before { - background-image: url(../../../misc/icons/000000/puzzlepiece.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e"); } + .toolbar-icon-system-admin-config:before { - background-image: url(../../../misc/icons/787878/wrench.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e"); } + .toolbar-icon-system-admin-config:active:before, .toolbar-icon-system-admin-config.is-active:before { - background-image: url(../../../misc/icons/000000/wrench.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e"); } + .toolbar-icon-system-admin-reports:before { - background-image: url(../../../misc/icons/787878/barchart.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-icon-system-admin-reports:active:before, .toolbar-icon-system-admin-reports.is-active:before { - background-image: url(../../../misc/icons/000000/barchart.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar-icon-help-main:before { - background-image: url(../../../misc/icons/787878/questionmark-disc.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e"); } + .toolbar-icon-help-main:active:before, .toolbar-icon-help-main.is-active:before { - background-image: url(../../../misc/icons/000000/questionmark-disc.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e"); } @media only screen and (min-width: 16.5em) { @@ -199,21 +238,26 @@ /** * Accessibility/focus */ + .toolbar-tab a:focus { text-decoration: underline; outline: none; } + .toolbar-lining button:focus { outline: none; } + .toolbar-tray-horizontal a:focus, .toolbar-box a:focus { outline: none; background-color: #f5f5f5; } + .toolbar-box a:hover:focus { text-decoration: underline; } + .toolbar .toolbar-icon.toolbar-handle:focus { outline: none; background-color: #f5f5f5; @@ -222,77 +266,97 @@ /** * Handle. */ + .toolbar .toolbar-icon.toolbar-handle { width: 4em; text-indent: -9999px; } + .toolbar .toolbar-icon.toolbar-handle:before { left: 1.6667em; /* LTR */ } + [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before { right: 1.6667em; left: auto; } + .toolbar .toolbar-icon.toolbar-handle:before { - background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M8.002 1c-3.869 0-7.002 3.134-7.002 7s3.133 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.459 6.336l-4.105 4.105c-.196.189-.515.189-.708 0l-4.107-4.105c-.194-.194-.194-.513 0-.707l.977-.978c.194-.194.513-.194.707 0l2.422 2.421c.192.195.513.195.708 0l2.422-2.42c.188-.194.512-.194.707 0l.977.977c.193.194.193.513 0 .707z'/%3e%3c/svg%3e"); } + .toolbar .toolbar-icon.toolbar-handle.open:before { - background-image: url(../../../misc/icons/787878/chevron-disc-up.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.867 0-7.002 3.134-7.002 7s3.135 7 7.002 7 7-3.134 7-7-3.133-7-7-7zm4.462 8.37l-.979.979c-.19.19-.516.19-.707 0l-2.422-2.419c-.196-.194-.515-.194-.708 0l-2.423 2.417c-.194.193-.513.193-.707 0l-.977-.976c-.194-.194-.194-.514 0-.707l4.106-4.106c.193-.194.515-.194.708 0l4.109 4.105c.19.192.19.513 0 .707z'/%3e%3c/svg%3e"); } + .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before { - background-image: url(../../../misc/icons/5181c6/twistie-down.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z'/%3e%3c/svg%3e"); background-size: 75%; } + .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before { - background-image: url(../../../misc/icons/787878/twistie-up.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z'/%3e%3c/svg%3e"); background-size: 75%; } + .toolbar .toolbar-icon-escape-admin:before { - background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.133-7.002 7 0 3.865 3.134 7 7.002 7 3.865 0 7-3.135 7-7 0-3.867-3.135-7-7-7zm2.348 10.482l-.977.977c-.195.193-.514.193-.707 0l-4.108-4.105c-.194-.195-.194-.514 0-.708l4.108-4.105c.193-.194.512-.194.707 0l.979.977c.191.194.191.513 0 .707l-2.422 2.421c-.195.194-.195.515 0 .708l2.419 2.421c.196.19.196.512.001.707z'/%3e%3c/svg%3e"); } + [dir="rtl"] .toolbar .toolbar-icon-escape-admin:before { - background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.135-7.002 7 0 3.867 3.134 7 7.002 7 3.865 0 7-3.133 7-7 0-3.865-3.135-7-7-7zm3.441 7.357l-4.106 4.104c-.194.191-.514.191-.708 0l-.978-.979c-.194-.193-.194-.518 0-.707l2.423-2.421c.195-.195.195-.514 0-.708l-2.422-2.421c-.194-.194-.194-.513 0-.707l.977-.977c.194-.194.514-.194.708 0l4.106 4.108c.191.194.191.515 0 .708z'/%3e%3c/svg%3e"); } + /** * Orientation toggle. */ + .toolbar .toolbar-toggle-orientation button { width: 39px; height: 39px; padding: 0; text-indent: -999em; } + .toolbar .toolbar-toggle-orientation button:before { right: 0; left: 0; margin: 0 auto; } + [dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon { padding: 0; } + /** * In order to support a hover effect on the SVG images, while also supporting * RTL text direction and no SVG support, this little icon requires some very * specific targeting, setting and unsetting. */ + .toolbar .toolbar-toggle-orientation [value="vertical"]:before { - background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */ } + .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before, .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before { - background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */ } + [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before { - background-image: url(../../../misc/icons/bebebe/push-right.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e"); } + [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before, [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before { - background-image: url(../../../misc/icons/787878/push-right.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar .toolbar-toggle-orientation [value="horizontal"]:before { - background-image: url(../../../misc/icons/bebebe/push-up.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e"); } + .toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before, .toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before { - background-image: url(../../../misc/icons/787878/push-up.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e"); } diff --git a/core/modules/toolbar/css/toolbar.icons.theme.pcss.css b/core/modules/toolbar/css/toolbar.icons.theme.pcss.css new file mode 100644 index 0000000000000000000000000000000000000000..974557d1cb8daaecc1e108837cf069dfa592b33f --- /dev/null +++ b/core/modules/toolbar/css/toolbar.icons.theme.pcss.css @@ -0,0 +1,298 @@ +/** + * @file + * Styling for toolbar module icons. + */ + +.toolbar .toolbar-icon { + position: relative; + padding-left: 2.75em; /* LTR */ +} +[dir="rtl"] .toolbar .toolbar-icon { + padding-right: 2.75em; + padding-left: 1.3333em; +} +.toolbar .toolbar-icon:before { + position: absolute; + top: 0; + left: 0.6667em; /* LTR */ + display: block; + width: 20px; + height: 100%; + content: ""; + background-color: transparent; + background-repeat: no-repeat; + background-attachment: scroll; + background-position: center center; + background-size: 100% auto; +} +[dir="rtl"] .toolbar .toolbar-icon:before { + right: 0.6667em; + left: auto; +} +.toolbar button.toolbar-icon { + border: 0; + background-color: transparent; + font-size: 1em; +} +.toolbar .toolbar-menu ul .toolbar-icon { + padding-left: 1.3333em; /* LTR */ +} +[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon { + padding-right: 1.3333em; + padding-left: 0; +} +.toolbar .toolbar-menu ul a.toolbar-icon:before { + display: none; +} +.toolbar .toolbar-tray-vertical .toolbar-menu ul a { + padding-left: 2.75em; /* LTR */ +} +[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a { + padding-right: 2.75em; + padding-left: 0; +} +.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a { + padding-left: 3.75em; /* LTR */ +} +[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a { + padding-right: 3.75em; + padding-left: 0; +} + +.toolbar .toolbar-tray-vertical .toolbar-menu a { + padding-right: 4em; /* LTR */ + padding-left: 2.75em; /* LTR */ +} +[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a { + padding-right: 2.75em; + padding-left: 4em; +} + +/** + * Top level icons. + */ +.toolbar-bar .toolbar-icon-menu:before { + background-image: url(../../../misc/icons/bebebe/hamburger.svg); +} +.toolbar-bar .toolbar-icon-menu:active:before, +.toolbar-bar .toolbar-icon-menu.is-active:before { + background-image: url(../../../misc/icons/ffffff/hamburger.svg); +} +.toolbar-bar .toolbar-icon-help:before { + background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg); +} +.toolbar-bar .toolbar-icon-help:active:before, +.toolbar-bar .toolbar-icon-help.is-active:before { + background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg); +} + +/** + * Main menu icons. + */ +.toolbar-icon-system-admin-content:before { + background-image: url(../../../misc/icons/787878/file.svg); +} +.toolbar-icon-system-admin-content:active:before, +.toolbar-icon-system-admin-content.is-active:before { + background-image: url(../../../misc/icons/000000/file.svg); +} +.toolbar-icon-system-admin-structure:before { + background-image: url(../../../misc/icons/787878/orgchart.svg); +} +.toolbar-icon-system-admin-structure:active:before, +.toolbar-icon-system-admin-structure.is-active:before { + background-image: url(../../../misc/icons/000000/orgchart.svg); +} +.toolbar-icon-system-themes-page:before { + background-image: url(../../../misc/icons/787878/paintbrush.svg); +} +.toolbar-icon-system-themes-page:active:before, +.toolbar-icon-system-themes-page.is-active:before { + background-image: url(../../../misc/icons/000000/paintbrush.svg); +} +.toolbar-icon-entity-user-collection:before { + background-image: url(../../../misc/icons/787878/people.svg); +} +.toolbar-icon-entity-user-collection:active:before, +.toolbar-icon-entity-user-collection.is-active:before { + background-image: url(../../../misc/icons/000000/people.svg); +} +.toolbar-icon-system-modules-list:before { + background-image: url(../../../misc/icons/787878/puzzlepiece.svg); +} +.toolbar-icon-system-modules-list:active:before, +.toolbar-icon-system-modules-list.is-active:before { + background-image: url(../../../misc/icons/000000/puzzlepiece.svg); +} +.toolbar-icon-system-admin-config:before { + background-image: url(../../../misc/icons/787878/wrench.svg); +} +.toolbar-icon-system-admin-config:active:before, +.toolbar-icon-system-admin-config.is-active:before { + background-image: url(../../../misc/icons/000000/wrench.svg); +} +.toolbar-icon-system-admin-reports:before { + background-image: url(../../../misc/icons/787878/barchart.svg); +} +.toolbar-icon-system-admin-reports:active:before, +.toolbar-icon-system-admin-reports.is-active:before { + background-image: url(../../../misc/icons/000000/barchart.svg); +} +.toolbar-icon-help-main:before { + background-image: url(../../../misc/icons/787878/questionmark-disc.svg); +} +.toolbar-icon-help-main:active:before, +.toolbar-icon-help-main.is-active:before { + background-image: url(../../../misc/icons/000000/questionmark-disc.svg); +} + +@media only screen and (min-width: 16.5em) { + .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon { + width: 4em; + margin-right: 0; + margin-left: 0; + padding-right: 0; + padding-left: 0; + text-indent: -9999px; + } + .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before { + left: 0; /* LTR */ + width: 100%; + background-size: 42% auto; + } + .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before { + background-size: auto auto; + } + [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before { + right: 0; + left: auto; + } +} + +@media only screen and (min-width: 36em) { + .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon { + width: auto; + padding-right: 1.3333em; /* LTR */ + padding-left: 2.75em; /* LTR */ + text-indent: 0; + background-position: left center; /* LTR */ + } + [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon { + padding-right: 2.75em; + padding-left: 1.3333em; + background-position: right center; + } + .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before { + left: 0.6667em; /* LTR */ + width: 20px; + background-size: 100% auto; + } + .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before { + background-size: auto auto; + } + [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before { + right: 0.6667em; + left: 0; + } +} + +/** + * Accessibility/focus + */ +.toolbar-tab a:focus { + text-decoration: underline; + outline: none; +} +.toolbar-lining button:focus { + outline: none; +} +.toolbar-tray-horizontal a:focus, +.toolbar-box a:focus { + outline: none; + background-color: #f5f5f5; +} +.toolbar-box a:hover:focus { + text-decoration: underline; +} +.toolbar .toolbar-icon.toolbar-handle:focus { + outline: none; + background-color: #f5f5f5; +} + +/** + * Handle. + */ +.toolbar .toolbar-icon.toolbar-handle { + width: 4em; + text-indent: -9999px; +} +.toolbar .toolbar-icon.toolbar-handle:before { + left: 1.6667em; /* LTR */ +} +[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before { + right: 1.6667em; + left: auto; +} +.toolbar .toolbar-icon.toolbar-handle:before { + background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg); +} +.toolbar .toolbar-icon.toolbar-handle.open:before { + background-image: url(../../../misc/icons/787878/chevron-disc-up.svg); +} +.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before { + background-image: url(../../../misc/icons/5181c6/twistie-down.svg); + background-size: 75%; +} +.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before { + background-image: url(../../../misc/icons/787878/twistie-up.svg); + background-size: 75%; +} +.toolbar .toolbar-icon-escape-admin:before { + background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg); +} +[dir="rtl"] .toolbar .toolbar-icon-escape-admin:before { + background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg); +} +/** + * Orientation toggle. + */ +.toolbar .toolbar-toggle-orientation button { + width: 39px; + height: 39px; + padding: 0; + text-indent: -999em; +} +.toolbar .toolbar-toggle-orientation button:before { + right: 0; + left: 0; + margin: 0 auto; +} +[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon { + padding: 0; +} +/** + * In order to support a hover effect on the SVG images, while also supporting + * RTL text direction and no SVG support, this little icon requires some very + * specific targeting, setting and unsetting. + */ +.toolbar .toolbar-toggle-orientation [value="vertical"]:before { + background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */ +} +.toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before, +.toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before { + background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */ +} +[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before { + background-image: url(../../../misc/icons/bebebe/push-right.svg); +} +[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before, +[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before { + background-image: url(../../../misc/icons/787878/push-right.svg); +} +.toolbar .toolbar-toggle-orientation [value="horizontal"]:before { + background-image: url(../../../misc/icons/bebebe/push-up.svg); +} +.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before, +.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before { + background-image: url(../../../misc/icons/787878/push-up.svg); +} diff --git a/core/modules/user/css/user.icons.admin.css b/core/modules/user/css/user.icons.admin.css index 66c2366c026389159238a6f19263391e99fc5e5f..fc6745edb7c704df11e41f8a582f3acac14137bf 100644 --- a/core/modules/user/css/user.icons.admin.css +++ b/core/modules/user/css/user.icons.admin.css @@ -1,3 +1,10 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + /** * @file * Styling for the user module icons. @@ -6,10 +13,12 @@ /** * Toolbar tab icon. */ + .toolbar-bar .toolbar-icon-user:before { - background-image: url(../../../misc/icons/bebebe/person.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M1 15c-.275 0-.498-.225-.496-.5 0 0 .007-.746 1.071-1.512 1.138-.818 2.347-.969 3.308-1.498s.954-1.299.925-2.115c-.019-.543-.112-.657-.489-1.392-.556-1.084-.709-2.021-.791-2.823-.127-1.252.011-3.035.86-4.001.847-.964 2.114-1.104 2.114-1.104l.5-.055.498.055s1.266.14 2.113 1.104c.85.966.988 2.75.859 4.001-.08.802-.234 1.739-.791 2.823-.377.734-.476.849-.488 1.392-.029.816-.035 1.586.926 2.115s2.17.68 3.307 1.498c1.064.766 1.072 1.512 1.072 1.512.002.275-.221.5-.496.5h-14.002z'/%3e%3c/svg%3e"); } + .toolbar-bar .toolbar-icon-user:active:before, .toolbar-bar .toolbar-icon-user.is-active:before { - background-image: url(../../../misc/icons/ffffff/person.svg); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M1 15c-.275 0-.498-.225-.496-.5 0 0 .007-.746 1.071-1.512 1.138-.818 2.347-.969 3.308-1.498s.954-1.299.925-2.115c-.019-.543-.112-.657-.489-1.392-.556-1.084-.709-2.021-.791-2.823-.127-1.252.011-3.035.86-4.001.847-.964 2.114-1.104 2.114-1.104l.5-.055.498.055s1.266.14 2.113 1.104c.85.966.988 2.75.859 4.001-.08.802-.234 1.739-.791 2.823-.377.734-.476.849-.488 1.392-.029.816-.035 1.586.926 2.115s2.17.68 3.307 1.498c1.064.766 1.072 1.512 1.072 1.512.002.275-.221.5-.496.5h-14.002z'/%3e%3c/svg%3e"); } diff --git a/core/modules/user/css/user.icons.admin.pcss.css b/core/modules/user/css/user.icons.admin.pcss.css new file mode 100644 index 0000000000000000000000000000000000000000..66c2366c026389159238a6f19263391e99fc5e5f --- /dev/null +++ b/core/modules/user/css/user.icons.admin.pcss.css @@ -0,0 +1,15 @@ +/** + * @file + * Styling for the user module icons. + */ + +/** + * Toolbar tab icon. + */ +.toolbar-bar .toolbar-icon-user:before { + background-image: url(../../../misc/icons/bebebe/person.svg); +} +.toolbar-bar .toolbar-icon-user:active:before, +.toolbar-bar .toolbar-icon-user.is-active:before { + background-image: url(../../../misc/icons/ffffff/person.svg); +} diff --git a/core/scripts/css/compile.js b/core/scripts/css/compile.js index 1d984f05cdd6fd608e30099c72f5cbacae4d85f2..e2beed39103da74d60ad571fbe3c9a75cae66201 100644 --- a/core/scripts/css/compile.js +++ b/core/scripts/css/compile.js @@ -52,6 +52,11 @@ module.exports = (filePath, callback) => { ], mediaQuery: true, minPixelValue: 3, + // Prevent converting PX to REM for icon styles. These files have been + // added to use the `postcssUrl` plugin, but aren't compatible with + // `postcssPixelsToRem`. + exclude: (filePath) => filePath.match(/core\/modules.*\.icons\..*\.pcss\.css$/) + }), postcssHeader({ header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/3084859\n * @preserve\n */\n`,