/* Design 3 "Clarity" (more space, no boxes): same element sizes as design 2; differences are spacing, colour, corners and font. Only active when has .gwp_v3. */ html.gwp_v2.gwp_v3 { --v2-ground: #ffffff; --v2-card: #ffffff; --v2-ink: #0f1115; --v2-muted: #6b7280; --v2-line: #ececec; --v3-soft: #f3f3f0; } html.gwp_v2.gwp_v3 #gwp_frame, html.gwp_v2.gwp_v3 .gwp_split_main, html.gwp_v2.gwp_v3 .gwp_split_caret { font-family: var(--v2-sans); } html.gwp_v2.gwp_v3 #gwp_addtb.gwp_split.gwp_split_outline { --gwp_split_bg: var(--gwp_tool, #4259cd); --gwp_split_fg: #fff; --gwp_split_line: var(--gwp_tool, #4259cd); --gwp_split_div: rgba(255, 255, 255, .4); } html.gwp_v2.gwp_v3 .gwp_split_main:hover, html.gwp_v2.gwp_v3 .gwp_split_caret:hover { background: var(--gwp_tool_hover, #334bc2); color: #fff; } html.gwp_v2.gwp_v3 #gwp_appchooser .gwp_menubutton, html.gwp_v2.gwp_v3 .gwp_nav_icon_btn, html.gwp_v2.gwp_v3 .gwp_mmultiselect, html.gwp_v2.gwp_v3 .gwp_notification-wrapper, html.gwp_v2.gwp_v3 #gwp_la-signout, html.gwp_v2.gwp_v3 #gwp_mediasettingswrap > .gwp_topbutton { border: 0; background: var(--v3-soft); box-shadow: none; } html.gwp_v2.gwp_v3 #gwp_appchooser .gwp_menubutton { border-radius: 50%; } html.gwp_v2.gwp_v3 #gwp_appchooser .gwp_menubutton:hover, html.gwp_v2.gwp_v3 .gwp_nav_icon_btn:hover, html.gwp_v2.gwp_v3 .gwp_notification-wrapper:hover, html.gwp_v2.gwp_v3 #gwp_la-signout:hover, html.gwp_v2.gwp_v3 #gwp_mediasettingswrap > .gwp_topbutton:hover { border: 0; background: var(--v3-soft); color: var(--gwp_tool_text, #2e43ae); } html.gwp_v2.gwp_v3 .gwp_mmultiselectactive { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); } html.gwp_v2.gwp_v3 .gwp_nav_search { border: 0; background: var(--v3-soft); box-shadow: none; } html.gwp_v2.gwp_v3 .gwp_nav_search:focus-within { box-shadow: 0 0 0 2px var(--gwp_tool, #4259cd); background: var(--v3-soft); } html.gwp_v2.gwp_v3 .gwp_lib_type_current { border: 0; border-radius: 999px; background: var(--v3-soft); box-shadow: none; } html.gwp_v2.gwp_v3 .gwp_lib_type_current:hover { background: var(--v3-soft); box-shadow: 0 0 0 2px var(--gwp_tool, #4259cd); } html.gwp_v2.gwp_v3 .gwp_topbuttonc { border: 0; background: var(--v3-soft); box-shadow: none; } html.gwp_v2.gwp_v3 .gwp_lib_type_list { border: 0; border-radius: 20px; padding: 10px; } html.gwp_v2.gwp_v3 .gwp_lib_type_item { padding: 11px 16px; } html.gwp_v2.gwp_v3 .gwp_split_main, html.gwp_v2.gwp_v3 .gwp_split_caret { font-weight: 600; } html.gwp_v2.gwp_v3 #gwp_v2_head h1 { letter-spacing: -.03em; font-weight: 600; } /* cards */ html.gwp_v2.gwp_v3 .gwp_mediaitem, html.gwp_v2.gwp_v3 .gwp_mediaitemselected { border: 0; background: transparent; border-radius: 16px; overflow: hidden; } html.gwp_v2.gwp_v3 .gwp_media_grid .gwp_mediaitem, html.gwp_v2.gwp_v3 .gwp_media_grid .gwp_mediaitemselected { background: transparent; } html.gwp_v2.gwp_v3 .gwp_mediaitem .gwp_mediabox, html.gwp_v2.gwp_v3 .gwp_mediaitem .gwp_mediaboximg, html.gwp_v2.gwp_v3 .gwp_mediaitem .gwp_mediaboxvid { border-radius: 16px; overflow: hidden; } html.gwp_v2.gwp_v3 .gwp_media_grid .gwp_mediafilename { background: transparent; border: 0; padding: 10px 4px 0; color: var(--v2-ink); font-weight: 600; } html.gwp_v2.gwp_v3 .gwp_mediaitemselected .gwp_mediabox, html.gwp_v2.gwp_v3 .gwp_mediaitemselected .gwp_mediaboximg { outline: 3px solid var(--gwp_tool, #4259cd); outline-offset: -3px; } html.gwp_v2.gwp_v3 .gwp_addmediaitem { border-radius: 16px; } html.gwp_v2.gwp_v3 .gwp_media_grid .gwp_addmediaitem .gwp_mediafilename { background: transparent; box-shadow: none; padding: 8px 8px 0; text-align: center; color: var(--gwp_tool_text, #2e43ae); } html.gwp_v2.gwp_v3 .gwp_media_grid .gwp_mediaitemmargin { margin-left: 0; margin-right: 0; } html.gwp_v2.gwp_v3 .gwp_lib_stat, html.gwp_v2.gwp_v3 .gwp_lib_empty { border: 0; border-radius: 20px; background: var(--v3-soft); } html.gwp_v2.gwp_v3 .gwp_lib_recent_item { background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--v2-line); } html.gwp_v2.gwp_v3 .gwp_fb_folder, html.gwp_v2.gwp_v3 .gwp_fb_item { border: 0; border-radius: 16px; background: var(--v3-soft); } html.gwp_v2.gwp_v3 .gwp_mbtitle h2::before { display: none; } html.gwp_v2.gwp_v3 .gwp_mediabuckets, html.gwp_v2.gwp_v3 .gwp_mmediabuckets, html.gwp_v2.gwp_v3 .gwp_gmediabuckets, html.gwp_v2.gwp_v3 .gwp_amediabuckets { border: 0; box-shadow: none; background: transparent; padding: 0; } /* SPACE: this is where the airiness comes from */ @media (min-width: 769px) { html.gwp_v2.gwp_v3 .gwp_topbuttonbar { padding: 20px 88px; gap: 20px; } html.gwp_v2.gwp_v3 .gwp_nav_controls { gap: 20px; } html.gwp_v2.gwp_v3 .gwp_addtopbuttons, html.gwp_v2.gwp_v3 #gwp_addtopbuttons, html.gwp_v2.gwp_v3 #gwp_inlinemenu { gap: 18px; } html.gwp_v2.gwp_v3 #gwp_v2_head { padding: 48px 88px 12px; } html.gwp_v2.gwp_v3 #gwp_v2_head p { margin-top: 14px; } html.gwp_v2.gwp_v3 .gwp_lib_view { padding: 40px 88px 96px; } html.gwp_v2.gwp_v3 .gwp_media_grid { gap: 44px 36px; } html.gwp_v2.gwp_v3 .gwp_bucketcontent.gwp_media_grid { gap: 32px 28px; } html.gwp_v2.gwp_v3 .gwp_mediabuckets, html.gwp_v2.gwp_v3 .gwp_mmediabuckets, html.gwp_v2.gwp_v3 .gwp_gmediabuckets, html.gwp_v2.gwp_v3 .gwp_amediabuckets { margin: 0 0 72px; } html.gwp_v2.gwp_v3 .gwp_mbtitle { margin-bottom: 28px; } html.gwp_v2.gwp_v3 .gwp_lib_stats { gap: 28px; } html.gwp_v2.gwp_v3 .gwp_lib_stat { padding: 24px 26px; } html.gwp_v2.gwp_v3 .gwp_lib_recent_header { margin: 48px 0 16px; } html.gwp_v2.gwp_v3 .gwp_lib_recent_item { padding: 20px 24px; margin-bottom: 0; } html.gwp_v2.gwp_v3 .gwp_fb_grid { gap: 24px; } html.gwp_v2.gwp_v3 .gwp_media_grid .gwp_mediafilename { line-height: 1.5; } } @media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_topbuttonbar { padding: 12px 20px; gap: 8px; } html.gwp_v2.gwp_v3 #gwp_v2_head { padding: 16px 20px 6px; } html.gwp_v2.gwp_v3 .gwp_lib_view { padding: 20px 20px 56px; } html.gwp_v2.gwp_v3 .gwp_media_grid { gap: 28px 20px; } }