Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
/*------------------------------------------------------------------------------
|
|
|
|
|
28.0 - Site Icon
|
|
|
|
|
------------------------------------------------------------------------------*/
|
|
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
.site-icon-section {
|
|
|
|
|
--site-icon-removal: #b32d2e;
|
Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
}
|
|
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
.site-icon-preview {
|
|
|
|
|
--site-icon-input-border: #8c8f94;
|
|
|
|
|
--site-icon-preview-background: #fff;
|
|
|
|
|
--site-icon-preview-browser-top: #dcdcde;
|
|
|
|
|
--site-icon-preview-browser-bottom: #a7aaad;
|
|
|
|
|
--site-icon-preview-browser-border: rgba(255, 255, 255, 0.2);
|
|
|
|
|
--site-icon-address-bar-background: #f0f0f1;
|
|
|
|
|
--site-icon-address-bar-close: #646970;
|
|
|
|
|
--site-icon-address-bar-text: #3c434a;
|
|
|
|
|
--site-icon-shadow-1: rgba(0, 0, 0, 0.1);
|
|
|
|
|
--site-icon-shadow-2: rgba(0, 0, 0, 0.2);
|
|
|
|
|
--site-icon-shadow-3: rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
|
|
|
direction: initial;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 60px;
|
|
|
|
|
padding: 8px 0 0 8px;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
position: relative;
|
Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
overflow: hidden;
|
2024-08-23 18:47:16 -04:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
border: 1px solid var(--site-icon-input-border);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background-color: var(--site-icon-preview-background);
|
|
|
|
|
width: 275px;
|
Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
}
|
|
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
.site-icon-preview {
|
|
|
|
|
--site-icon-preview-browser-top: #2c3338;
|
|
|
|
|
--site-icon-preview-browser-bottom: #111;
|
|
|
|
|
--site-icon-address-bar-background: #3c434a;
|
|
|
|
|
--site-icon-address-bar-close: #f0f0f1;
|
|
|
|
|
--site-icon-address-bar-text: #f0f0f1;
|
|
|
|
|
}
|
Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
}
|
|
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
.site-icon-preview.settings {
|
|
|
|
|
height: 88px;
|
|
|
|
|
padding: 16px 0 0 16px;
|
|
|
|
|
width: 350px;
|
|
|
|
|
margin: 0 0 16px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview.crop {
|
|
|
|
|
width: 258px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 8px 1fr;
|
|
|
|
|
grid-template-rows: 64px 1fr;
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
row-gap: 16px;
|
|
|
|
|
direction: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview.hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview .direction-wrap {
|
|
|
|
|
grid-template-columns: 44px 1fr;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
display: grid;
|
|
|
|
|
direction: ltr;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview.settings .direction-wrap {
|
|
|
|
|
grid-template-columns: 58px 1fr;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview:after {
|
|
|
|
|
--after-size: 150%;
|
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: var(--after-size);;
|
|
|
|
|
transform: translate(calc(var(--after-size) * -0.125), calc(var(--after-size) * -0.125));
|
|
|
|
|
filter: blur(5px);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
background: var(--site-icon-url);
|
Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
}
|
|
|
|
|
|
2015-07-20 11:57:25 -04:00
|
|
|
.site-icon-preview .app-icon-preview {
|
2024-08-23 18:47:16 -04:00
|
|
|
aspect-ratio: 1/1;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview-browser {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 4px 4px 0 12px;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
flex: 1 0 0;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
border-top-left-radius: 10px;
|
|
|
|
|
border-top: 1px solid var(--site-icon-preview-browser-border);
|
|
|
|
|
border-left: 1px solid var(--site-icon-preview-browser-border);
|
|
|
|
|
background: linear-gradient(180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%);
|
|
|
|
|
box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview .browser-buttons {
|
|
|
|
|
width: 48px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
fill: var(--site-icon-input-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview-tab {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
flex: 1 0 0;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background-color: var(--site-icon-address-bar-background);
|
|
|
|
|
box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1);
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 24px auto 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview-browser .browser-icon-preview {
|
|
|
|
|
box-shadow: 0 0 20px 0 var(--site-icon-shadow-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview-tab > img,
|
|
|
|
|
.site-icon-preview-tab > svg {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview-tab > svg {
|
|
|
|
|
fill: var(--site-icon-address-bar-close);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview-site-title {
|
|
|
|
|
color: var(--site-icon-address-bar-text);
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
overflow: hidden;
|
2024-08-23 18:47:16 -04:00
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
|
Introducing Site Icon, favicon management for WordPress.
This v1 marries Jetpack's Site Icon module with the Media Modal, reusing code
from the Custom Header admin. For now, the core-provided icons will be limited
to a favicon, an iOS app icon, and a Windows tile icon, leaving `.ico` support
and additional icons to plugins to add.
Props obenland, tyxla, flixos90, jancbeck, markjaquith, scruffian.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@32994
git-svn-id: http://core.svn.wordpress.org/trunk@32965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-29 08:58:25 -04:00
|
|
|
width: 64px;
|
2024-08-23 18:47:16 -04:00
|
|
|
height: 64px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
grid-column: 2;
|
2015-07-02 17:16:24 -04:00
|
|
|
}
|
2016-03-09 16:19:27 -05:00
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
.site-icon-preview-crop-modal .site-icon-preview-browser {
|
|
|
|
|
grid-column: 2;
|
2016-07-05 08:42:27 -04:00
|
|
|
}
|
|
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
.site-icon-preview-crop-modal .image-preview-wrap {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
aspect-ratio: 1/1;
|
2016-03-09 16:19:27 -05:00
|
|
|
}
|
|
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
.site-icon-preview-crop-modal .image-preview-wrap.browser {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
2016-03-09 16:19:27 -05:00
|
|
|
}
|
General: Add an option to configure the site icon in general settings.
This restores the site icon setting to its original home on the settings page where it lives with the title and tagline.
The base for this code was originally added in [32994] and then removed in [33329]. The majority of the modification to that version are to remove the no-js pieces and make the workflow completely inline rather than putting the cropping on a separate page.
Additionally, since image crops rely on the ability to upload an image, this setting is gated by the `upload_files` capability.
Follow-up to: [32994], [33329].
Props jorbin, audrasjb, mukesh27, joedolson, afercia, kebbet, swissspidy, obenland, jameskoster, kjellr, andraganescu, stacimc, mikeschroder, h71, krupajnanda, huzaifaalmesbah.
Fixes #54370.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@57602
git-svn-id: http://core.svn.wordpress.org/trunk@57103 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-12 16:57:09 -05:00
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
button.reset.remove-site-icon {
|
|
|
|
|
color: var(--site-icon-removal);
|
General: Add an option to configure the site icon in general settings.
This restores the site icon setting to its original home on the settings page where it lives with the title and tagline.
The base for this code was originally added in [32994] and then removed in [33329]. The majority of the modification to that version are to remove the no-js pieces and make the workflow completely inline rather than putting the cropping on a separate page.
Additionally, since image crops rely on the ability to upload an image, this setting is gated by the `upload_files` capability.
Follow-up to: [32994], [33329].
Props jorbin, audrasjb, mukesh27, joedolson, afercia, kebbet, swissspidy, obenland, jameskoster, kjellr, andraganescu, stacimc, mikeschroder, h71, krupajnanda, huzaifaalmesbah.
Fixes #54370.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@57602
git-svn-id: http://core.svn.wordpress.org/trunk@57103 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-12 16:57:09 -05:00
|
|
|
text-decoration: none;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
button.reset.remove-site-icon:focus,
|
|
|
|
|
button.reset.remove-site-icon:hover {
|
|
|
|
|
background: var(--site-icon-removal);
|
General: Add an option to configure the site icon in general settings.
This restores the site icon setting to its original home on the settings page where it lives with the title and tagline.
The base for this code was originally added in [32994] and then removed in [33329]. The majority of the modification to that version are to remove the no-js pieces and make the workflow completely inline rather than putting the cropping on a separate page.
Additionally, since image crops rely on the ability to upload an image, this setting is gated by the `upload_files` capability.
Follow-up to: [32994], [33329].
Props jorbin, audrasjb, mukesh27, joedolson, afercia, kebbet, swissspidy, obenland, jameskoster, kjellr, andraganescu, stacimc, mikeschroder, h71, krupajnanda, huzaifaalmesbah.
Fixes #54370.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@57602
git-svn-id: http://core.svn.wordpress.org/trunk@57103 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-12 16:57:09 -05:00
|
|
|
color: #fff;
|
2024-08-23 18:47:16 -04:00
|
|
|
border-color: var(--site-icon-removal);
|
|
|
|
|
box-shadow: 0 0 0 1px var(--site-icon-removal);
|
General: Add an option to configure the site icon in general settings.
This restores the site icon setting to its original home on the settings page where it lives with the title and tagline.
The base for this code was originally added in [32994] and then removed in [33329]. The majority of the modification to that version are to remove the no-js pieces and make the workflow completely inline rather than putting the cropping on a separate page.
Additionally, since image crops rely on the ability to upload an image, this setting is gated by the `upload_files` capability.
Follow-up to: [32994], [33329].
Props jorbin, audrasjb, mukesh27, joedolson, afercia, kebbet, swissspidy, obenland, jameskoster, kjellr, andraganescu, stacimc, mikeschroder, h71, krupajnanda, huzaifaalmesbah.
Fixes #54370.
See #16434.
Built from https://develop.svn.wordpress.org/trunk@57602
git-svn-id: http://core.svn.wordpress.org/trunk@57103 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-12 16:57:09 -05:00
|
|
|
}
|
2024-02-13 08:09:07 -05:00
|
|
|
|
2024-08-23 18:47:16 -04:00
|
|
|
.site-icon-action-buttons {
|
2024-02-13 08:09:07 -05:00
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
