| <template> |
| <style> |
| /* There is a corresponding media query for iframe grids because media |
| * queries inside iframes reference width of the frame, not the entire |
| * window. Use !important to make sure there are no css ordering issues. |
| * Subtract 0.25px to fix subpixel rounding issues with iron-list. This |
| * makes sure all photo containers on a row add up to at least 1px smaller |
| * than the parent width.*/ |
| |
| @media (min-width: 720px) { |
| .photo-container { |
| width: calc(25% - 0.25px) !important; |
| } |
| } |
| main, |
| iframe { |
| height: 100%; |
| width: 100%; |
| } |
| main:focus, |
| main:focus-visible, |
| main:focus-within, |
| iframe:focus, |
| iframe:focus-visible, |
| iframe:focus-within { |
| outline: none; |
| } |
| cr-button { |
| border-color: var(--cros-button-stroke-color-secondary); |
| border-radius: 16px; |
| } |
| cr-button[aria-pressed=true], |
| cr-button[aria-selected=true] { |
| background-color: var(--cros-highlight-color); |
| border: 0; |
| } |
| cr-button + cr-button { |
| margin-inline-start: 8px; |
| } |
| </style> |
| </template> |
