/* ########################################################################################################################################################################### */ /* ########################################################################################################################################################################### */ /* Skye Isle Terrier Sanctuary Public Website */ /* ● Page: Icons (icons.css) */ /* ● Description: Standardizes icon size throughout the site at all resolutions. */ /* ● Location: /css/icons.css */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ● Version: v0.0.01 α */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ● Project Start Date: 2026-06-15 */ /* ● Last updated: 2026-06-18 @ 1733 EDT */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ● Author: by Conner Rhoads */ /* ● Official Site: www.skyeisleterriersanctuary.com */ /* ########################################################################################################################################################################### */ /* == AI ASSISTANT MANDATED LOGIC == */ /* ● I.) FORMATING: */ /* ● 01.) NEVER change or deviate from the commeting and seperation format. */ /* ● 02.) ALWAYS Use "Indented Allman" Code Formating Style. */ /* ● 03.) Tabs are always FOUR characters long. */ /* ● 04.) The comment ending segment on each comment block should always end at 178 spaces from the left. */ /* ● 05.) All comment lines should be exactly 178 spaces from the left. */ /* ● 06.) NEVER remove code that appears to be placeholders. */ /* ● 07.) Primary sections always use "#" as the basis for the line and always start with [START] and end with [END] */ /* ● A.) EXAMPLES: */ /* ● i.) Header */ /* ● ii.) Body */ /* ● iii.) Footer */ /* ● iv.) Stylesheets */ /* ● v.) Scripts */ /* ● 08.) Major sections always use "=" as the basis for lines. These sections are always with in the Primary sections. */ /* ● 09.) Minor sections always use "-" as the basis for lines. These are usually a small module within a Major Section. */ /* ● II.) COMMENTING: */ /* ● 01.) NEVER remove comments. */ /* ● 02.) ALWAYS Update "Last Updated" with the current data and time stamp of the most recent edits. */ /* ● 03.) ALWAYS Update anything inside "<",">" brackets. */ /* ● 04.) Comments spanning over 175 spaces from the left should overflow to the next line and be spaced out to match the start of the comment fromt he previous line. */ /* ● 05.) DO NOT update the Change Log. That is for the end user to update after they are done with the current edits and are satisifed with them. */ /* ● 06.) DO NOT update the Version. That is for the end user to update after they are done with the current edits and are satisifed with them. */ /* ● III.) EDITS: */ /* ● 01.) If adding new variables or arrays, ALWAYS confirm the names and naming convention before building/creating them. */ /* ● 02.) Always reproduce the full file OR the section for updates. */ /* ● A.) Headers must ALWAYS be full length of the header comment block. */ /* ● B.) If producinga seciton for updates, ALWAYS go from the START of the header being updated to the line before the next header. */ /* ● C.) Default to updating sections instead of the whole document unless more than 30% of the document needs to be changed. */ /* ● 03.) A successful build must always be either the same amount of lines or additional lines of code. Less lines of code are to be immediately qualified as a failed */ /* build. */ /* ● A.) If Lines or Sections are to be removed: */ /* ● i.) The end user needs to specifically ask for them to be removed. */ /* ● ii.) The AI agent must suggest the sections be elimiated AND the end user must confirm that those sections are being elimated */ /* ● IV.) OTHER: */ /* ● 01.) When the end user asks you to check this file, only give feedback on the problems with it, never rewrite it unless the end user asks to. */ /* ########################################################################################################################################################################### */ /* CHANGE LOG */ /* ● 2026-05-24 @ 0415 EDT - Added Elemental transformations for each color on black. They do not work on white. */ /* ########################################################################################################################################################################### */ /* ########################################################################################################################################################################### */ /* ============================================================================================================================================================================ */ /* ICON TRANSFORMATIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Mobile Resolutions (Portrait Mode) */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE LDPI (0–240px) → icon: */ /* MOBILE MDPI (241–320px) → icon: */ /* MOBILE HDPI (321–480px) → icon: */ /* MOBILE XHDPI (641–720px) → icon: */ /* MOBILE XXHDPI (801–1080px) → icon: */ /* MOBILE XXXHDPI (801–1080px) → icon: */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Legacy Resolutions */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LEGACY VGA (481–640px) → icon: */ /* LEGACY SVGA (800–800px) → icon: */ /* LEGACY XVGA (1024–1024px) → icon: */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Modern Resolutions */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 720p (1081–1280px) → icon: */ /* MODERN 1080p (1281–1920px) → icon: */ /* MODERN 2k (1921–2559px) → icon: */ /* MODERN 4k (2562–3839px) → icon: */ /* MODERN 6k (3841–6144px) → icon: */ /* MODERN 8k (6145–7680px) → icon: */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Ultrawide Resolutions */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE WFHD (2560–2560px) → icon: */ /* ULTRAWIDE FHD (4608–4608px) → icon: */ /* ULTRAWIDE UWQHD (3440–3440px) → icon: */ /* ULTRAWIDE WQHD+ (3840–3840px) → icon: */ /* ULTRAWIDE UW5K (5120–5120px) → icon: */ /* ============================================================================================================================================================================ */ /* END TRANSFORMATIONS */ /* ============================================================================================================================================================================ */ /* ============================================================================================================================================================================ */ /* MAIN STYLESHEET */ /* ============================================================================================================================================================================ */ .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; display: inline-block; vertical-align: middle; } .icon-crimson /* Crimson #D32F2F */ { filter: invert(16%) sepia(89%) saturate(7484%) hue-rotate(346deg) brightness(88%) contrast(101%); } .icon-emerald /* Emerald #388E3C */ { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(89%) contrast(96%); } .icon-amethyst /* Amethyst #7B1FA2 */ { filter: invert(13%) sepia(94%) saturate(7474%) hue-rotate(271deg) brightness(90%) contrast(101%); } .icon-sapphire /* Sapphire #1976D2 */ { filter: invert(32%) sepia(98%) saturate(7474%) hue-rotate(200deg) brightness(92%) contrast(101%); } .icon-gold /* Gold #F57C00 */ { filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(14deg) brightness(101%) contrast(101%); } .icon-diamond /* Diamond #B6B6B6 */ { filter: grayscale(100%) brightness(1.15) contrast(0.9); } .icon-obsidian /* Obsidian #212121 */ { filter: brightness(0) saturate(100%) invert(7%) brightness(22%) contrast(120%); } .icon-topaz /* Topaz #00796B */ { filter: invert(35%) sepia(82%) saturate(2476%) hue-rotate(152deg) brightness(92%) contrast(101%); } .icon-ruby /* Ruby #C2185B */ { filter: invert(15%) sepia(85%) saturate(7484%) hue-rotate(330deg) brightness(85%) contrast(101%); } /* ============================================================================================================================================================================ */ /* MOBILE RESOLUTIONS (Portrait Mode) */ /* ============================================================================================================================================================================ */ @media (min-width: 0px) and (max-width: 240px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 241px) and (max-width: 320px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 321px) and (max-width: 480px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 321px) and (max-width: 480px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 641px) and (max-width: 720px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 801px) and (max-width: 1023px), (min-width: 1025px) and (max-width: 1080px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } /* ============================================================================================================================================================================ */ /* LEGACY RESOLUTIONS */ /* ============================================================================================================================================================================ */ @media (min-width: 481px) and (max-width: 640px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 800px) and (max-width: 800px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 1024px) and (max-width: 1024px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } /* ============================================================================================================================================================================ */ /* MODERN RESOLUTIONS */ /* ============================================================================================================================================================================ */ @media (min-width: 1081px) and (max-width: 1280px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 1281px) and (max-width: 1920px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 1921px) and (max-width: 2559px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 2562px) and (max-width: 3839px), (min-width: 3442px) and (max-width: 3839px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 3841px) and (max-width: 6144px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 6145px) and (max-width: 7680px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } /* ============================================================================================================================================================================ */ /* ULTRAWIDE RESOLUTIONS */ /* ============================================================================================================================================================================ */ @media (min-width: 2560px) and (max-width: 2560px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 4608px) and (max-width: 4608px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 3440px) and (max-width: 3440px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 3840px) and (max-width: 3840px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } @media (min-width: 5120px) and (max-width: 5120px) { .icons { width: 18px; height: 18px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } } /* ============================================================================================================================================================================ */ /* USERTOOLS / AUTH BAR / MENU ICONS (smaller for compact header/dropdown) */ /* ============================================================================================================================================================================ */ .usertools-bar .icons, .auth-bar .icons, #user-menu .icons, ul.menu-icons .icons, img[src*="search.svg"], img[src*="menu.svg"], img[src*="recent.svg"], img[src*="map.svg"], img[src*="picture.svg"], img[src*="user.svg"], img[src*="settings.svg"], img[src*="user-clip.svg"] { width: 16px !important; height: 16px !important; max-width: 16px; max-height: 16px; } /* The search icon specifically in forms/search context can be a tad larger if it's a button */ input[type="search"] + .icons, .search-icon .icons { width: 18px !important; height: 18px !important; } /* News "return to top level" / back to news icon (scroll.svg in news nav bar) */ img[src*="/images/icons/scroll.svg"], .news-nav .home-icon, .nav-home-btn .home-icon { width: 18px !important; height: 18px !important; } /* ============================================================================================================================================================================ */ /* END STYLESHEET */ /* ============================================================================================================================================================================ */