diff --git a/data/styles/Category.scss b/data/styles/Category.scss index 3a88b6d45..ea68a2f9d 100644 --- a/data/styles/Category.scss +++ b/data/styles/Category.scss @@ -2,638 +2,639 @@ * SPDX-License-Identifier: GPL-3.0-or-later * SPDX-FileCopyrightText: 2017-2024 elementary, Inc. (https://elementary.io) */ - -.category { - background-position: center center; - background-repeat: no-repeat; - border: 1px solid rgba(black, 0.15); - box-shadow: - inset 0 0 0 1px rgba(white, 0.05), - inset 0 1px 0 0 rgba(white, 0.45), - inset 0 -1px 0 0 rgba(white, 0.15), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - font-size: 2em; - font-weight: 600; - margin: rem(12px); - padding: rem(12px); - min-height: 3em; - - &.accessibility { - background-image: - linear-gradient( - to bottom, - #3ca3e8, - #368ae6 - ); - border-color: #{'alpha(#2980d1, 0.8)'}; - color: #fff8ef; - text-shadow: 0 1px 0 rgba(black, 0.3); - -gtk-icon-shadow: 0 1px 0 rgba(black, 0.3); - } - - &.accessories { - border: none; +homepage { + .category { + background-position: center center; + background-repeat: no-repeat; + border: 1px solid rgba(black, 0.15); box-shadow: - inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.05)'}, - inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.45)'}, - inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.15)'}, - 0 0 0 1px rgba(black, 0.15), + inset 0 0 0 1px rgba(white, 0.05), + inset 0 1px 0 0 rgba(white, 0.45), + inset 0 -1px 0 0 rgba(white, 0.15), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - } + font-size: 2em; + font-weight: 600; + margin: rem(12px); + padding: rem(12px); + min-height: 3em; - &.audio { - background-image: - -gtk-scaled( - url("resource:///io/elementary/appcenter/backgrounds/audio.svg"), - url("resource:///io/elementary/appcenter/backgrounds/audio@2x.svg") - ), - linear-gradient( - to bottom, - #{'@ORANGE_300'}, - #{'@ORANGE_500'} - ); - border-color: #{'alpha(@ORANGE_900, 0.7)'}; - color: #{'shade(@ORANGE_100, 1.25)'}; - -gtk-icon-shadow: - 0 1px 1px #{'alpha(@ORANGE_900, 0.5)'}, - 0 2px 3px #{'alpha(@ORANGE_900, 0.5)'}; - text-shadow: - 0 1px 1px #{'alpha(@ORANGE_900, 0.5)'}, - 0 2px 3px #{'alpha(@ORANGE_900, 0.5)'}; - } + &.accessibility { + background-image: + linear-gradient( + to bottom, + #3ca3e8, + #368ae6 + ); + border-color: #{'alpha(#2980d1, 0.8)'}; + color: #fff8ef; + text-shadow: 0 1px 0 rgba(black, 0.3); + -gtk-icon-shadow: 0 1px 0 rgba(black, 0.3); + } - &.communication { - background-image: - -gtk-icontheme("call-start-symbolic"), - -gtk-icontheme("internet-chat-symbolic"), - -gtk-icontheme("document-edit-symbolic"), - -gtk-icontheme("mail-send-symbolic"), - -gtk-icontheme("document-edit-symbolic"), - -gtk-icontheme("preferences-system-sharing-symbolic"), - -gtk-icontheme("internet-chat-symbolic"), - -gtk-icontheme("mail-send-symbolic"), - -gtk-icontheme("call-start-symbolic"), - -gtk-icontheme("document-edit-symbolic"), - -gtk-icontheme("preferences-system-sharing-symbolic"), - -gtk-icontheme("internet-chat-symbolic"), - -gtk-icontheme("emoji-objects-symbolic"), - -gtk-icontheme("mail-attachment-symbolic"), - -gtk-icontheme("non-starred-symbolic"), - -gtk-icontheme("face-heart-symbolic"), - -gtk-icontheme("internet-mail-symbolic"), - -gtk-icontheme("emoji-body-symbolic"), - -gtk-icontheme("emoji-objects-symbolic"), - -gtk-icontheme("face-heart-symbolic"), - -gtk-icontheme("mail-attachment-symbolic"), - -gtk-icontheme("emoji-objects-symbolic"), - -gtk-icontheme("non-starred-symbolic"), - -gtk-icontheme("emoji-body-symbolic"), - linear-gradient( - 175deg, - #{'@LIME_300'} 5%, - #{'@LIME_500'} - ); - background-size: - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - cover; - background-position: - 5% 10%, - 15% 50%, - 5% 90%, - 30% 10%, - 40% 50%, - 30% 90%, - 60% 10%, - 70% 50%, - 60% 90%, - 85% 10%, - 95% 50%, - 85% 90%, - 18% 15%, - 2% 50%, - 18% 85%, - 28% 50%, - 45% 15%, - 53% 50%, - 45% 85%, - 72% 15%, - 82% 50%, - 72% 85%, - 98% 15%, - 98% 85%, - center center; - border-color: #{'alpha(@LIME_900, 0.7)'}; - color: #{'alpha(@LIME_900, 0.15)'}; - text-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; + &.accessories { + border: none; + box-shadow: + inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.05)'}, + inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.45)'}, + inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.15)'}, + 0 0 0 1px rgba(black, 0.15), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + } - label { - color: white; + &.audio { + background-image: + -gtk-scaled( + url("resource:///io/elementary/appcenter/backgrounds/audio.svg"), + url("resource:///io/elementary/appcenter/backgrounds/audio@2x.svg") + ), + linear-gradient( + to bottom, + #{'@ORANGE_300'}, + #{'@ORANGE_500'} + ); + border-color: #{'alpha(@ORANGE_900, 0.7)'}; + color: #{'shade(@ORANGE_100, 1.25)'}; + -gtk-icon-shadow: + 0 1px 1px #{'alpha(@ORANGE_900, 0.5)'}, + 0 2px 3px #{'alpha(@ORANGE_900, 0.5)'}; + text-shadow: + 0 1px 1px #{'alpha(@ORANGE_900, 0.5)'}, + 0 2px 3px #{'alpha(@ORANGE_900, 0.5)'}; } - } - &.development { - background-image: - linear-gradient( - to right, - transparent calc(0.5em - 1px), - rgba(white, 0.05) calc(0.5em - 1px), - rgba(white, 0.05) 0.5em, - transparent 0.5em - ), - linear-gradient( - to bottom, - transparent calc(0.5em - 1px), - rgba(white, 0.05) calc(0.5em - 1px), - rgba(white, 0.05) 0.5em, - transparent 0.5em - ), - linear-gradient( - to right, - transparent calc(1em - 1px), - rgba(white, 0.125) calc(1em - 1px) - ), - linear-gradient( - to bottom, - transparent calc(1em - 1px), - rgba(white, 0.125) calc(1em - 1px) - ), - linear-gradient( - to bottom right, - #{'@GRAPE_500'}, - #{'@GRAPE_700'} - ); - background-position: center center; - background-repeat: repeat; - background-size: - 1em 1em, - 1em 1em, - 1em 1em, - 1em 1em, - cover; - border-color: #{'alpha(@GRAPE_900, 0.7)'}; - color: white; - text-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.5)'}; - } + &.communication { + background-image: + -gtk-icontheme("call-start-symbolic"), + -gtk-icontheme("internet-chat-symbolic"), + -gtk-icontheme("document-edit-symbolic"), + -gtk-icontheme("mail-send-symbolic"), + -gtk-icontheme("document-edit-symbolic"), + -gtk-icontheme("preferences-system-sharing-symbolic"), + -gtk-icontheme("internet-chat-symbolic"), + -gtk-icontheme("mail-send-symbolic"), + -gtk-icontheme("call-start-symbolic"), + -gtk-icontheme("document-edit-symbolic"), + -gtk-icontheme("preferences-system-sharing-symbolic"), + -gtk-icontheme("internet-chat-symbolic"), + -gtk-icontheme("emoji-objects-symbolic"), + -gtk-icontheme("mail-attachment-symbolic"), + -gtk-icontheme("non-starred-symbolic"), + -gtk-icontheme("face-heart-symbolic"), + -gtk-icontheme("internet-mail-symbolic"), + -gtk-icontheme("emoji-body-symbolic"), + -gtk-icontheme("emoji-objects-symbolic"), + -gtk-icontheme("face-heart-symbolic"), + -gtk-icontheme("mail-attachment-symbolic"), + -gtk-icontheme("emoji-objects-symbolic"), + -gtk-icontheme("non-starred-symbolic"), + -gtk-icontheme("emoji-body-symbolic"), + linear-gradient( + 175deg, + #{'@LIME_300'} 5%, + #{'@LIME_500'} + ); + background-size: + 24px, + 24px, + 24px, + 24px, + 24px, + 24px, + 24px, + 24px, + 24px, + 24px, + 24px, + 24px, + 16px, + 16px, + 16px, + 16px, + 16px, + 16px, + 16px, + 16px, + 16px, + 16px, + 16px, + 16px, + cover; + background-position: + 5% 10%, + 15% 50%, + 5% 90%, + 30% 10%, + 40% 50%, + 30% 90%, + 60% 10%, + 70% 50%, + 60% 90%, + 85% 10%, + 95% 50%, + 85% 90%, + 18% 15%, + 2% 50%, + 18% 85%, + 28% 50%, + 45% 15%, + 53% 50%, + 45% 85%, + 72% 15%, + 82% 50%, + 72% 85%, + 98% 15%, + 98% 85%, + center center; + border-color: #{'alpha(@LIME_900, 0.7)'}; + color: #{'alpha(@LIME_900, 0.15)'}; + text-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; - &.education { - background-image: - -gtk-scaled( - url("resource:///io/elementary/appcenter/backgrounds/education.svg"), - url("resource:///io/elementary/appcenter/backgrounds/education@2x.svg") - ), - radial-gradient( - circle, - rgba(white, 0) 67%, - rgba(white, 0.15) - ), - linear-gradient( - to bottom, - #{'mix(@LIME_900, @SLATE_100, 0.5)'}, - #{'mix(@LIME_900, @SLATE_500, 0.67)'} - ); - border-color: #{'alpha(mix(@LIME_900, @SLATE_900, 0.5), 0.8)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.05), - inset 0 1px 0 0 rgba(white, 0.25), - inset 0 -1px 0 0 rgba(white, 0.1), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: white; - } + label { + color: white; + } + } - &.finance { - background-image: - linear-gradient( - to bottom, - #{'mix(@BLUEBERRY_500, @SLATE_300, 0.5)'} 5%, - #{'mix(@BLUEBERRY_700, @SLATE_500, 0.5)'} - ); - border-color: #{'alpha(@SLATE_900, 0.7)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.02), - inset 0 1px 0 0 rgba(white, 0.23), - inset 0 -1px 0 0 rgba(white, 0.07), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: #{'@SILVER_100'}; - text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; - -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; + &.development { + background-image: + linear-gradient( + to right, + transparent calc(0.5em - 1px), + rgba(white, 0.05) calc(0.5em - 1px), + rgba(white, 0.05) 0.5em, + transparent 0.5em + ), + linear-gradient( + to bottom, + transparent calc(0.5em - 1px), + rgba(white, 0.05) calc(0.5em - 1px), + rgba(white, 0.05) 0.5em, + transparent 0.5em + ), + linear-gradient( + to right, + transparent calc(1em - 1px), + rgba(white, 0.125) calc(1em - 1px) + ), + linear-gradient( + to bottom, + transparent calc(1em - 1px), + rgba(white, 0.125) calc(1em - 1px) + ), + linear-gradient( + to bottom right, + #{'@GRAPE_500'}, + #{'@GRAPE_700'} + ); + background-position: center center; + background-repeat: repeat; + background-size: + 1em 1em, + 1em 1em, + 1em 1em, + 1em 1em, + cover; + border-color: #{'alpha(@GRAPE_900, 0.7)'}; + color: white; + text-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.5)'}; + } - label { - margin-top: 0.125em; + &.education { + background-image: + -gtk-scaled( + url("resource:///io/elementary/appcenter/backgrounds/education.svg"), + url("resource:///io/elementary/appcenter/backgrounds/education@2x.svg") + ), + radial-gradient( + circle, + rgba(white, 0) 67%, + rgba(white, 0.15) + ), + linear-gradient( + to bottom, + #{'mix(@LIME_900, @SLATE_100, 0.5)'}, + #{'mix(@LIME_900, @SLATE_500, 0.67)'} + ); + border-color: #{'alpha(mix(@LIME_900, @SLATE_900, 0.5), 0.8)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.05), + inset 0 1px 0 0 rgba(white, 0.25), + inset 0 -1px 0 0 rgba(white, 0.1), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: white; } - } - &.games { - border: none; - box-shadow: - inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, - inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.9)'}, - inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.3)'}, - 0 0 0 1px rgba(black, 0.15), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - font-weight: 900; - letter-spacing: -1px; - -gtk-icon-shadow: - 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, - 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; + &.finance { + background-image: + linear-gradient( + to bottom, + #{'mix(@BLUEBERRY_500, @SLATE_300, 0.5)'} 5%, + #{'mix(@BLUEBERRY_700, @SLATE_500, 0.5)'} + ); + border-color: #{'alpha(@SLATE_900, 0.7)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.02), + inset 0 1px 0 0 rgba(white, 0.23), + inset 0 -1px 0 0 rgba(white, 0.07), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: #{'@SILVER_100'}; + text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; + -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; - label.pink { - font-size: 1em; - text-shadow: - 0 1px 2px #{'alpha(@BUBBLEGUM_900, 0.2)'}, - 0 2px 6px #{'alpha(@BUBBLEGUM_900, 0.1)'}; - margin-bottom: -12px; + label { + margin-top: 0.125em; + } } - label.blue { - font-size: 1.5em; - text-shadow: - 0 1px 2px #{'alpha(@BLUEBERRY_900, 0.2)'}, - 0 2px 6px #{'alpha(@BLUEBERRY_900, 0.1)'}; - } + &.games { + border: none; + box-shadow: + inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, + inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.9)'}, + inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.3)'}, + 0 0 0 1px rgba(black, 0.15), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + font-weight: 900; + letter-spacing: -1px; + -gtk-icon-shadow: + 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, + 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; - image { - -gtk-icon-size: rem(64px); - } - } + label.pink { + font-size: 1em; + text-shadow: + 0 1px 2px #{'alpha(@BUBBLEGUM_900, 0.2)'}, + 0 2px 6px #{'alpha(@BUBBLEGUM_900, 0.1)'}; + margin-bottom: -12px; + } - &.graphics { - background-image: - linear-gradient( - 45deg, - #{'alpha(@fg_color, 0.03)'} 25%, - transparent 25%, - transparent 75%, - #{'alpha(@fg_color, 0.03)'} 75%, - #{'alpha(@fg_color, 0.03)'} - ), - linear-gradient( - 45deg, - #{'alpha(@fg_color, 0.03)'} 25%, - transparent 25%, - transparent 75%, - #{'alpha(@fg_color, 0.03)'} 75%, - #{'alpha(@fg_color, 0.03)'} - ), - linear-gradient( - rgba(white, 0.03), - rgba(black, 0.03) - ); - background-position: 0 0, 12px 12px; - background-repeat: repeat; - background-size: - 24px 24px, - 24px 24px, - cover; - border: none; - box-shadow: - inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, - inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.9)'}, - inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.3)'}, - 0 0 0 1px rgba(black, 0.15), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: #fe5498; - text-shadow: 0 1px 3px #{'@bg_color'}; + label.blue { + font-size: 1.5em; + text-shadow: + 0 1px 2px #{'alpha(@BLUEBERRY_900, 0.2)'}, + 0 2px 6px #{'alpha(@BLUEBERRY_900, 0.1)'}; + } - label { - border-image: - -gtk-scaled( - url("resource:///io/elementary/appcenter/backgrounds/graphics.svg"), - url("resource:///io/elementary/appcenter/backgrounds/graphics@2x.svg") - ) 10 10 10 10 / 10px 10px 10px 10px repeat; - padding: 12px; + image { + -gtk-icon-size: rem(64px); + } + } - &:dir(rtl) { + &.graphics { + background-image: + linear-gradient( + 45deg, + #{'alpha(@fg_color, 0.03)'} 25%, + transparent 25%, + transparent 75%, + #{'alpha(@fg_color, 0.03)'} 75%, + #{'alpha(@fg_color, 0.03)'} + ), + linear-gradient( + 45deg, + #{'alpha(@fg_color, 0.03)'} 25%, + transparent 25%, + transparent 75%, + #{'alpha(@fg_color, 0.03)'} 75%, + #{'alpha(@fg_color, 0.03)'} + ), + linear-gradient( + rgba(white, 0.03), + rgba(black, 0.03) + ); + background-position: 0 0, 12px 12px; + background-repeat: repeat; + background-size: + 24px 24px, + 24px 24px, + cover; + border: none; + box-shadow: + inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, + inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.9)'}, + inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.3)'}, + 0 0 0 1px rgba(black, 0.15), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: #fe5498; + text-shadow: 0 1px 3px #{'@bg_color'}; + + label { border-image: -gtk-scaled( - url("resource:///io/elementary/appcenter/backgrounds/graphics-rtl.svg"), - url("resource:///io/elementary/appcenter/backgrounds/graphics-rtl@2x.svg") + url("resource:///io/elementary/appcenter/backgrounds/graphics.svg"), + url("resource:///io/elementary/appcenter/backgrounds/graphics@2x.svg") ) 10 10 10 10 / 10px 10px 10px 10px repeat; + padding: 12px; + + &:dir(rtl) { + border-image: + -gtk-scaled( + url("resource:///io/elementary/appcenter/backgrounds/graphics-rtl.svg"), + url("resource:///io/elementary/appcenter/backgrounds/graphics-rtl@2x.svg") + ) 10 10 10 10 / 10px 10px 10px 10px repeat; + } } } - } - &.internet { - background-image: - -gtk-icontheme("applications-internet-symbolic"), - linear-gradient( - to bottom, - #{'@BLUEBERRY_300'}, - #{'@BLUEBERRY_500'} - ); - background-position: - center 30%, - center center; - background-size: - cover, - cover; - color: #{'alpha(@BLUEBERRY_100, 0.25)'}; - border-color: #{'alpha(@BLUEBERRY_700, 0.8)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.05), - inset 0 1px 0 0 rgba(white, 0.25), - inset 0 -1px 0 0 rgba(white, 0.1), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - text-shadow: - 0 1px 1px rgba(black, 0.3), - 0 2px 3px rgba(black, 0.3); + &.internet { + background-image: + -gtk-icontheme("applications-internet-symbolic"), + linear-gradient( + to bottom, + #{'@BLUEBERRY_300'}, + #{'@BLUEBERRY_500'} + ); + background-position: + center 30%, + center center; + background-size: + cover, + cover; + color: #{'alpha(@BLUEBERRY_100, 0.25)'}; + border-color: #{'alpha(@BLUEBERRY_700, 0.8)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.05), + inset 0 1px 0 0 rgba(white, 0.25), + inset 0 -1px 0 0 rgba(white, 0.1), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + text-shadow: + 0 1px 1px rgba(black, 0.3), + 0 2px 3px rgba(black, 0.3); - label { - color: white; + label { + color: white; + } } - } - &.media-production { - background-image: - radial-gradient( - circle, - rgba(150, 111, 195, 0.2) 18px, - rgba(150, 111, 195, 0.3) 19px, - transparent 20px - ), - radial-gradient( - circle, - rgba(224, 124, 203, 0.2) 8px, - rgba(224, 124, 203, 0.3) 9px, - transparent 10px - ), - radial-gradient( - circle, - rgba(224, 124, 203, 0.2) 8px, - rgba(224, 124, 203, 0.3) 9px, - transparent 10px - ), - radial-gradient( - circle, - rgba(145, 75, 113, 0.2) 19px, - rgba(145, 75, 113, 0.3) 20px, - transparent 46px - ), - radial-gradient( - circle, - rgba(145, 75, 113, 0) 10px, - rgba(145, 75, 113, 0.2) 19px, - transparent 80px - ), - radial-gradient( - circle, - rgba(145, 75, 113, 0) 15px, - rgba(145, 75, 113, 0.2) 30px, - transparent 90px - ), - radial-gradient( - circle, - rgba(37, 85, 79, 0.2) 15px, - rgba(37, 85, 79, 0.3) 17px, - transparent 50px - ), - radial-gradient( - circle, - rgba(37, 85, 79, 0.2) 8px, - rgba(37, 85, 79, 0.3) 9px, - transparent 20px - ), - radial-gradient( - circle, - rgba(37, 85, 79, 0.2) 13px, - rgba(37, 85, 79, 0.3) 13px, - transparent 30px - ), - radial-gradient( - circle, - rgba(37, 85, 79, 0.2) 18px, - rgba(37, 85, 79, 0.3) 18px, - transparent 40px - ), - radial-gradient( - circle, - rgba(114, 209, 244, 0.1) 15px, - rgba(114, 209, 244, 0.1) 17px, - transparent 50px - ), - radial-gradient( - circle, - rgba(114, 209, 244, 0.2) 8px, - rgba(114, 209, 244, 0.3) 9px, - transparent 20px - ), - radial-gradient( - circle, - rgba(114, 209, 244, 0.2) 13px, - rgba(114, 209, 244, 0.3) 13px, - transparent 30px - ), - radial-gradient( - circle, - rgba(114, 209, 244, 0.2) 18px, - rgba(114, 209, 244, 0.3) 18px, - transparent 40px - ), - linear-gradient( - 100deg, - #{'mix(@SLATE_500, @SLATE_700, 0.5)'} 25%, - #{'@SLATE_900'} - ); - background-position: - 30px 15px, - 80px -50px, - 10px -20px, - 50px -30px, - 20px -60px, - 60px 10px, - -50px -40px, - -60px 0, - -80px -60px, - -160px -10px, - 20px -10px, - 130px -40px, - 180px -20px, - 180px 20px, - center center; - border-color: #{'alpha(@SLATE_900, 0.7)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.02), - inset 0 1px 0 0 rgba(white, 0.23), - inset 0 -1px 0 0 rgba(white, 0.07), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: #{'@BANANA_300'}; - text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.75)'}; - -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.75)'}; - } + &.media-production { + background-image: + radial-gradient( + circle, + rgba(150, 111, 195, 0.2) 18px, + rgba(150, 111, 195, 0.3) 19px, + transparent 20px + ), + radial-gradient( + circle, + rgba(224, 124, 203, 0.2) 8px, + rgba(224, 124, 203, 0.3) 9px, + transparent 10px + ), + radial-gradient( + circle, + rgba(224, 124, 203, 0.2) 8px, + rgba(224, 124, 203, 0.3) 9px, + transparent 10px + ), + radial-gradient( + circle, + rgba(145, 75, 113, 0.2) 19px, + rgba(145, 75, 113, 0.3) 20px, + transparent 46px + ), + radial-gradient( + circle, + rgba(145, 75, 113, 0) 10px, + rgba(145, 75, 113, 0.2) 19px, + transparent 80px + ), + radial-gradient( + circle, + rgba(145, 75, 113, 0) 15px, + rgba(145, 75, 113, 0.2) 30px, + transparent 90px + ), + radial-gradient( + circle, + rgba(37, 85, 79, 0.2) 15px, + rgba(37, 85, 79, 0.3) 17px, + transparent 50px + ), + radial-gradient( + circle, + rgba(37, 85, 79, 0.2) 8px, + rgba(37, 85, 79, 0.3) 9px, + transparent 20px + ), + radial-gradient( + circle, + rgba(37, 85, 79, 0.2) 13px, + rgba(37, 85, 79, 0.3) 13px, + transparent 30px + ), + radial-gradient( + circle, + rgba(37, 85, 79, 0.2) 18px, + rgba(37, 85, 79, 0.3) 18px, + transparent 40px + ), + radial-gradient( + circle, + rgba(114, 209, 244, 0.1) 15px, + rgba(114, 209, 244, 0.1) 17px, + transparent 50px + ), + radial-gradient( + circle, + rgba(114, 209, 244, 0.2) 8px, + rgba(114, 209, 244, 0.3) 9px, + transparent 20px + ), + radial-gradient( + circle, + rgba(114, 209, 244, 0.2) 13px, + rgba(114, 209, 244, 0.3) 13px, + transparent 30px + ), + radial-gradient( + circle, + rgba(114, 209, 244, 0.2) 18px, + rgba(114, 209, 244, 0.3) 18px, + transparent 40px + ), + linear-gradient( + 100deg, + #{'mix(@SLATE_500, @SLATE_700, 0.5)'} 25%, + #{'@SLATE_900'} + ); + background-position: + 30px 15px, + 80px -50px, + 10px -20px, + 50px -30px, + 20px -60px, + 60px 10px, + -50px -40px, + -60px 0, + -80px -60px, + -160px -10px, + 20px -10px, + 130px -40px, + 180px -20px, + 180px 20px, + center center; + border-color: #{'alpha(@SLATE_900, 0.7)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.02), + inset 0 1px 0 0 rgba(white, 0.23), + inset 0 -1px 0 0 rgba(white, 0.07), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: #{'@BANANA_300'}; + text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.75)'}; + -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.75)'}; + } - &.office { - background-image: - linear-gradient( - to right, - #{'@BLUEBERRY_300'}, - #{'@BLUEBERRY_500'} 20%, - #{'@LIME_300'} 20%, - #{'@LIME_500'} 40%, - #{'@ORANGE_500'} 40%, - #{'@ORANGE_700'} 60%, - #{'@BANANA_300'} 60%, - #{'@BANANA_500'} 80%, - #{'@GRAPE_500'} 80%, - #{'@GRAPE_700'} - ), - linear-gradient( - rgba(white, 0.05), - rgba(black, 0.05) - ); - background-size: - 100% 6px, - cover; - background-position: bottom; - border: none; - box-shadow: - inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, - inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.9)'}, - inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.3)'}, - 0 0 0 1px rgba(black, 0.15), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: #{'@ORANGE_500'}; - } + &.office { + background-image: + linear-gradient( + to right, + #{'@BLUEBERRY_300'}, + #{'@BLUEBERRY_500'} 20%, + #{'@LIME_300'} 20%, + #{'@LIME_500'} 40%, + #{'@ORANGE_500'} 40%, + #{'@ORANGE_700'} 60%, + #{'@BANANA_300'} 60%, + #{'@BANANA_500'} 80%, + #{'@GRAPE_500'} 80%, + #{'@GRAPE_700'} + ), + linear-gradient( + rgba(white, 0.05), + rgba(black, 0.05) + ); + background-size: + 100% 6px, + cover; + background-position: bottom; + border: none; + box-shadow: + inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, + inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.9)'}, + inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.3)'}, + 0 0 0 1px rgba(black, 0.15), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: #{'@ORANGE_500'}; + } - &.science { - background-image: - url("resource:///io/elementary/appcenter/backgrounds/science.svg"), - linear-gradient( - to bottom, - #374044, - #374044 - ); - border-color: #{'alpha(#1b2022, 0.8)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.02), - inset 0 1px 0 0 rgba(white, 0.23), - inset 0 -1px 0 0 rgba(white, 0.07), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: white; - text-shadow: 0 1px 2px rgba(black, 0.3); - -gtk-icon-shadow: 0 1px 2px rgba(black, 0.3); - } + &.science { + background-image: + url("resource:///io/elementary/appcenter/backgrounds/science.svg"), + linear-gradient( + to bottom, + #374044, + #374044 + ); + border-color: #{'alpha(#1b2022, 0.8)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.02), + inset 0 1px 0 0 rgba(white, 0.23), + inset 0 -1px 0 0 rgba(white, 0.07), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: white; + text-shadow: 0 1px 2px rgba(black, 0.3); + -gtk-icon-shadow: 0 1px 2px rgba(black, 0.3); + } - &.system { - background-image: - linear-gradient( - 170deg, - #{'@SLATE_100'}, - #{'@SLATE_300'} - ); - border-color: #{'alpha(@SLATE_700, 0.8)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.05), - inset 0 1px 0 0 rgba(white, 0.25), - inset 0 -1px 0 0 rgba(white, 0.1), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: #{'@SLATE_900'}; - text-shadow: 0 1px rgba(white, 0.4); - -gtk-icon-shadow: 0 1px rgba(white, 0.4); - } + &.system { + background-image: + linear-gradient( + 170deg, + #{'@SLATE_100'}, + #{'@SLATE_300'} + ); + border-color: #{'alpha(@SLATE_700, 0.8)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.05), + inset 0 1px 0 0 rgba(white, 0.25), + inset 0 -1px 0 0 rgba(white, 0.1), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: #{'@SLATE_900'}; + text-shadow: 0 1px rgba(white, 0.4); + -gtk-icon-shadow: 0 1px rgba(white, 0.4); + } - &.video { - background-image: - radial-gradient( - circle, - #{'alpha(@STRAWBERRY_900, 0)'} 65%, - #{'alpha(shade(@STRAWBERRY_900, 0.6), 0.35)'} 66% - ), - linear-gradient( - to bottom, - #{'alpha(shade(@STRAWBERRY_900, 0.6), 0.8)'}, - #{'alpha(shade(@STRAWBERRY_900, 0.6), 0)'} - ), - linear-gradient( - to right, - transparent, - #{'alpha(@STRAWBERRY_300, 0.4)'} 17%, - transparent 28%, - transparent 40%, - #{'alpha(@STRAWBERRY_300, 0.4)'} 70%, - transparent 80% - ), - linear-gradient( - to bottom, - #{'@STRAWBERRY_300'}, - #{'@STRAWBERRY_700'} - ); - background-repeat: - no-repeat, - no-repeat, - repeat, - no-repeat; - background-position: - 50%, - 0 0, - 50%, - 50%; - background-size: - auto 150%, - auto 60%, - 100px, auto; - border-color: #{'alpha(@STRAWBERRY_900, 0.9)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.05), - inset 0 1px 0 0 rgba(white, 0.25), - inset 0 -1px 0 0 rgba(white, 0.1), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: white; - text-shadow: 0 1px 2px #{'alpha(@STRAWBERRY_900, 0.5)'}; - -gtk-icon-shadow: 0 1px 2px #{'alpha(@STRAWBERRY_900, 0.5)'}; - } + &.video { + background-image: + radial-gradient( + circle, + #{'alpha(@STRAWBERRY_900, 0)'} 65%, + #{'alpha(shade(@STRAWBERRY_900, 0.6), 0.35)'} 66% + ), + linear-gradient( + to bottom, + #{'alpha(shade(@STRAWBERRY_900, 0.6), 0.8)'}, + #{'alpha(shade(@STRAWBERRY_900, 0.6), 0)'} + ), + linear-gradient( + to right, + transparent, + #{'alpha(@STRAWBERRY_300, 0.4)'} 17%, + transparent 28%, + transparent 40%, + #{'alpha(@STRAWBERRY_300, 0.4)'} 70%, + transparent 80% + ), + linear-gradient( + to bottom, + #{'@STRAWBERRY_300'}, + #{'@STRAWBERRY_700'} + ); + background-repeat: + no-repeat, + no-repeat, + repeat, + no-repeat; + background-position: + 50%, + 0 0, + 50%, + 50%; + background-size: + auto 150%, + auto 60%, + 100px, auto; + border-color: #{'alpha(@STRAWBERRY_900, 0.9)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.05), + inset 0 1px 0 0 rgba(white, 0.25), + inset 0 -1px 0 0 rgba(white, 0.1), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: white; + text-shadow: 0 1px 2px #{'alpha(@STRAWBERRY_900, 0.5)'}; + -gtk-icon-shadow: 0 1px 2px #{'alpha(@STRAWBERRY_900, 0.5)'}; + } - &.writing-language { - background-color: white; - background-image: - linear-gradient( - to right, - transparent 1.3em, - #{'alpha(@STRAWBERRY_100, 0.25)'} 1.3em, - #{'alpha(@STRAWBERRY_100, 0.25)'} calc(1.3em + 2px), - transparent calc(1.3em + 2px) - ), - linear-gradient( - to bottom, - transparent 0.9em, - #{'alpha(@BLUEBERRY_100, 0.2)'} 0.9em - ); - background-position: center center, center 0.7em; - background-repeat: no-repeat, repeat-y; - background-size: auto auto, 110% 1em; /* Gtk.CSS bug requiring over 100% width maybe? */ - color: #{'@BLACK_300'}; + &.writing-language { + background-color: white; + background-image: + linear-gradient( + to right, + transparent 1.3em, + #{'alpha(@STRAWBERRY_100, 0.25)'} 1.3em, + #{'alpha(@STRAWBERRY_100, 0.25)'} calc(1.3em + 2px), + transparent calc(1.3em + 2px) + ), + linear-gradient( + to bottom, + transparent 0.9em, + #{'alpha(@BLUEBERRY_100, 0.2)'} 0.9em + ); + background-position: center center, center 0.7em; + background-repeat: no-repeat, repeat-y; + background-size: auto auto, 110% 1em; /* Gtk.CSS bug requiring over 100% width maybe? */ + color: #{'@BLACK_300'}; + } } } diff --git a/data/styles/SearchPage.scss b/data/styles/SearchPage.scss index 1157dd5d5..f2a6b7fce 100644 --- a/data/styles/SearchPage.scss +++ b/data/styles/SearchPage.scss @@ -1,8 +1,19 @@ -navigation-view-page.search stack.large row { - border-radius: 0.25em; -} +navigation-view-page.search { + stack.large row { + border-radius: 0.25em; + } + + listview { + border-spacing: 0.5em; + } + + search-list-item { + border-spacing: 1em 0; + margin: 0.5em 1em; -search-list-item { - border-spacing: 1em 0; - margin: 0.5em 1em; + box.category { + border-spacing: 0.5em; + margin-top: 0.5em; + } + } } diff --git a/src/Widgets/SearchListItem.vala b/src/Widgets/SearchListItem.vala index e77d41f3a..bd2152856 100644 --- a/src/Widgets/SearchListItem.vala +++ b/src/Widgets/SearchListItem.vala @@ -10,17 +10,21 @@ public class AppCenter.SearchListItem : Gtk.Grid { name_label.label = value.get_name (); summary_label.label = value.get_summary (); + set_categories (value.component.get_categories ()); + if (action_stack != null) { remove (action_stack); } action_stack = new ActionStack (value); - attach (action_stack, 2, 0, 1, 2); + attach (action_stack, 2, 0, 1, 3); } } private AppCenter.ActionStack action_stack; + private Gtk.Image category_image; private Gtk.Image icon_image; + private Gtk.Label category_label; private Gtk.Label name_label; private Gtk.Label summary_label; @@ -48,8 +52,77 @@ public class AppCenter.SearchListItem : Gtk.Grid { summary_label.add_css_class (Granite.STYLE_CLASS_DIM_LABEL); summary_label.add_css_class (Granite.STYLE_CLASS_SMALL_LABEL); - attach (icon_image, 0, 0, 1, 2); + category_image = new Gtk.Image (); + category_image.add_css_class (Granite.STYLE_CLASS_ACCENT); + + category_label = new Gtk.Label (null); + category_label.add_css_class (Granite.STYLE_CLASS_DIM_LABEL); + category_label.add_css_class (Granite.STYLE_CLASS_SMALL_LABEL); + + var category_box = new Gtk.Box (HORIZONTAL, 0); + category_box.add_css_class ("category"); + category_box.append (category_image); + category_box.append (category_label); + + attach (icon_image, 0, 0, 1, 3); attach (name_label, 1, 0); attach (summary_label, 1, 1); + attach (category_box, 1, 2); + } + + private void set_categories (GLib.GenericArray categories) { + foreach (unowned var category in categories) { + switch (category) { + case "AudioVideo": + category_image.icon_name = "applications-multimedia-symbolic"; + category_image.add_css_class ("orange"); + category_label.label = _("Multimedia"); + return; + case "Development": + category_image.icon_name = "applications-development-symbolic"; + category_image.add_css_class ("purple"); + category_label.label = _("Development"); + return; + case "Engineering": + category_image.icon_name = "applications-engineering-symbolic"; + category_image.add_css_class ("yellow"); + category_label.label = _("Engineering"); + return; + case "Game": + category_image.icon_name = "applications-games-symbolic"; + category_image.add_css_class ("mint"); + category_label.label = _("Game"); + return; + case "Graphics": + category_image.icon_name = "applications-graphics-symbolic"; + category_image.add_css_class ("pink"); + category_label.label = _("Graphics"); + return; + case "Network": + category_image.icon_name = "applications-internet-symbolic"; + category_image.add_css_class ("blue"); + category_label.label = _("Internet"); + return; + case "Office": + category_image.icon_name = "applications-office-symbolic"; + category_image.add_css_class ("slate"); + category_label.label = _("Office"); + return; + case "Science": + category_image.icon_name = "applications-science-symbolic"; + category_image.add_css_class ("green"); + category_label.label = _("Science"); + return; + case "Utility": + category_image.icon_name = "applications-utilities-symbolic"; + category_image.add_css_class ("red"); + category_label.label = _("Accessories"); + return; + } + } + + category_label.label = _("Other"); + category_image.add_css_class ("slate"); + category_image.icon_name = "applications-other-symbolic"; } }