%PDF- %PDF-
Direktori : /snap/gtk-common-themes/1535/share/themes/elementary/gtk-3.0/ |
Current File : //snap/gtk-common-themes/1535/share/themes/elementary/gtk-3.0/granite-widgets.css |
/* * Copyright (c) 2016 elementary LLC. (http://launchpad.net/egtk) * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public * License as published by the Free Software Foundation; either * version 2 of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * General Public License for more details. * * You should have received a copy of the GNU General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, * Boston, MA 02110-1301 USA. * * Authored by: Daniel Foré <daniel@elementary.io> */ /********* * Avatar * *********/ .avatar { border: 1px solid alpha (#000, 0.35); border-radius: 50%; box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.45), inset 0 -1px 0 0 alpha (#fff, 0.15), 0 1px 3px alpha (#000, 0.12), 0 1px 2px alpha (#000, 0.24); } /************** * Back Button * **************/ .back-button, .titlebar .back-button { border-image: -gtk-scaled(url("assets/button-back.svg"), url("assets/button-back@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch; border-width: 1px 3px 3px 11px; border-radius: 0 2.5px 2.5px 0; box-shadow: none; padding: 2px 0; } .titlebar .back-button { color: @textColorPrimary; text-shadow: 0 1px @textColorPrimaryShadow; -gtk-icon-shadow: 0 1px @textColorPrimaryShadow; } .back-button:focus, .titlebar .back-button:focus { border-image: -gtk-scaled(url("assets/button-back-focus.svg"), url("assets/button-back-focus@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch; border-width: 1px 3px 3px 11px; border-radius: 0 2.5px 2.5px 0; box-shadow: none; } .back-button:dir(rtl) { border-image: -gtk-scaled(url("assets/button-back-rtl.svg"), url("assets/button-back-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch; border-width: 1px 11px 3px 3px; border-radius: 2.5px 0 0 2.5px; } .back-button:focus:dir(rtl) { border-image: -gtk-scaled(url("assets/button-back-focus-rtl.svg"), url("assets/button-back-focus-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch; border-width: 1px 11px 3px 3px; border-radius: 2.5px 0 0 2.5px; } .back-button:backdrop { border-image: -gtk-scaled(url("assets/button-back-backdrop.svg"), url("assets/button-back-backdrop@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch; border-width: 1px 3px 3px 11px; border-radius: 0 2.5px 2.5px 0; box-shadow: none; } .back-button:backdrop:dir(rtl) { border-image: -gtk-scaled(url("assets/button-back-backdrop-rtl.svg"), url("assets/button-back-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch; border-width: 1px 11px 3px 3px; border-radius: 2.5px 0 0 2.5px; box-shadow: none; } .back-button:active, .back-button:hover:active, .back-button:focus:active { border-image: -gtk-scaled(url("assets/button-back-active.svg"), url("assets/button-back-active@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch; border-width: 1px 3px 3px 11px; border-radius: 0 2.5px 2.5px 0; box-shadow: none; } .back-button:active:dir(rtl), .back-button:hover:active:dir(rtl), .back-button:focus:active:dir(rtl) { border-image: -gtk-scaled(url("assets/button-back-active-rtl.svg"), url("assets/button-back-active-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch; border-width: 1px 11px 3px 3px; border-radius: 2.5px 0 0 2.5px; box-shadow: none; } /******** * Cards * ********/ .deck { background-color: shade (@bg_color, 0.92); } .card { background-color: @base_color; border: none; border-color: transparent; box-shadow: 0 0 0 1px alpha (#000, 0.05), 0 3px 3px alpha (#000, 0.22); transition: all 150ms ease-in-out; } .card:checked { border: 3px solid @selected_bg_color; border-radius: 3px; } .card.collapsed { background-color: @bg_color; box-shadow: 0 0 0 1px alpha (#000, 0.05), 0 1px 2px alpha (#000, 0.22); } /******** * Cards * ********/ .checkerboard, .checkerboard-layout { background-color: shade (@bg_color, 0.95); background-image: linear-gradient( 45deg, alpha ( #000, 0.1 ) 25%, transparent 25%, transparent 75%, alpha ( #000, 0.1 ) 75%, alpha ( #000, 0.1 ) ), linear-gradient( 45deg, alpha ( #000, 0.1 ) 25%, transparent 25%, transparent 75%, alpha ( #000, 0.1 ) 75%, alpha ( #000, 0.1 ) ); background-size: 24px 24px; background-position: 0 0, 12px 12px; } /************** * Mode Switch * **************/ .mode-switch slider { min-height: 16px; min-width: 16px; } .mode-switch:checked, .mode-switch:checked:backdrop { background-color: alpha (#000, 0.1); background-image: none; border-color: alpha (#000, 0.25); } /************* * Seek bars * ************/ .seek-bar scale slider { background: transparent; border: transparent; box-shadow: none; min-width: 0; min-height: 0; } /************** * Source List * **************/ .sidebar .badge, .source-list.badge, .source-list.badge:hover, .source-list.badge:selected, .source-list.badge:selected:focus, .source-list.badge:hover:selected { background-image: none; background-color: alpha(@text_color, 0.1); box-shadow: none; color: alpha(@text_color, 0.7); font-weight: 700; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; } /************** * Storage Bar * **************/ .storage-bar .trough { box-shadow: 0 2px 3px -1px alpha (#000, 0.15); border: none; background-image: none; } .storage-bar .fill-block { background-image: linear-gradient( to bottom, @SILVER_300, @SILVER_500 ); border: 1px solid alpha (#000, 0.35); border-left-width: 0; box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.45), inset 0 -1px 0 0 alpha (#fff, 0.15); transition: all 200ms ease-in-out; padding: 8px 6px; } .storage-bar .fill-block:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-left-width: 1px; } .storage-bar .fill-block:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .storage-bar .fill-block.empty-block, .storage-bar .fill-block.unused { background-image: linear-gradient( to bottom, mix(@SILVER_100, @SILVER_300, 0.5), @SILVER_300 ); border-color: alpha (#000, 0.25); } .storage-bar .fill-block.legend { padding: 7px; border-radius: 50%; } /* Types of files */ .storage-bar .fill-block.app { background-image: linear-gradient( to bottom, @GRAPE_500, @GRAPE_700 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.15), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: alpha (@GRAPE_900, 0.8); } .storage-bar .fill-block.audio { background-image: linear-gradient( to bottom, @ORANGE_300, @ORANGE_500 ); border-color: alpha (@ORANGE_700, 0.8); } .storage-bar .fill-block.files { background-image: linear-gradient( to bottom, @BLUEBERRY_300, @BLUEBERRY_500 ); border-color: alpha (@BLUEBERRY_700, 0.8); } .storage-bar .fill-block.photo { background-image: linear-gradient( to bottom, @BANANA_300, @BANANA_500 ); border-color: alpha (@BANANA_700, 0.8); } .storage-bar .fill-block.video { background-image: linear-gradient( to bottom, @STRAWBERRY_300, @STRAWBERRY_500 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: alpha (@STRAWBERRY_700, 0.8); } /* Partition types, i.e. for the installer */ .storage-bar .fill-block.swap { background-color: @STRAWBERRY_700; background-image: linear-gradient( to bottom, shade ( @STRAWBERRY_700, 1.3 ), @STRAWBERRY_700 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@STRAWBERRY_700, 0.9); } .storage-bar .fill-block.ext4 { background-color: @LIME_500; background-image: linear-gradient( to bottom, shade ( @LIME_500, 1.3 ), @LIME_500 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@LIME_500, 0.9); } .storage-bar .fill-block.ext3 { background-color: @LIME_500; background-image: linear-gradient( to bottom, shade ( @LIME_500, 1.3 ), @LIME_500 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@LIME_500, 0.9); } .storage-bar .fill-block.ext2 { background-color: @LIME_900; } .storage-bar .fill-block.fat16, .storage-bar .fill-block.fat32 { background-color: @BANANA_500; background-image: linear-gradient( to bottom, shade ( @BANANA_500, 1.3 ), @BANANA_500 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@BANANA_500, 0.9); } .storage-bar .fill-block.btrfs { background-color: @BLUEBERRY_700; background-image: linear-gradient( to bottom, shade ( @BLUEBERRY_700, 1.3 ), @BLUEBERRY_700 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@BLUEBERRY_700, 0.9); } .storage-bar .fill-block.xfs { background-color: @GRAPE_900; background-image: linear-gradient( to bottom, shade ( @GRAPE_900, 1.3 ), @GRAPE_900 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@GRAPE_900, 0.9); } .storage-bar .fill-block.ntfs { background-color: @ORANGE_500; background-image: linear-gradient( to bottom, shade ( @ORANGE_500, 1.3 ), @ORANGE_500 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@ORANGE_500, 0.9); } .storage-bar .fill-block.luks { background-color: @GRAPE_500; background-image: linear-gradient( to bottom, shade ( @GRAPE_500, 1.3 ), @GRAPE_500 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@GRAPE_500, 0.9); } .storage-bar .fill-block.lvm { background-color: @GRAPE_700; background-image: linear-gradient( to bottom, shade ( @GRAPE_700, 1.3 ), @GRAPE_700 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@GRAPE_700, 0.9); } .storage-bar .fill-block.none { background-color: @BLUEBERRY_500; background-image: linear-gradient( to bottom, shade ( @BLUEBERRY_500, 1.3 ), @BLUEBERRY_500 ); box-shadow: inset 0 0 0 1px alpha (#fff, 0.05), inset 0 1px 0 0 alpha (#fff, 0.25), inset 0 -1px 0 0 alpha (#fff, 0.1), 0 1px 0 0 alpha (@bg_highlight_color, 0.15); border-color: shade (@BLUEBERRY_500, 0.9); } /*********** * Welcome * **********/ .welcome { font-size: 10pt; text-shadow: none; } .welcome .dim-label { color: @placeholder_text_color; } .welcome .h1, .welcome .h3 { color: alpha(@text_color, 0.8); } /************* * Round Apps * *************/ window.rounded, window.rounded actionbar { border-radius: 0 0 4px 4px; } window.rounded decoration { border-radius: 3px; } /************** * Text Styles * **************/ .accent, .titlebar.flat .accent image, .titlebar.flat .accent label { color: @colorAccent; } .h1 { font-size: 24pt; } .h2 { font-weight: 300; font-size: 18pt; } .h3 { font-size: 11pt; } .h4, .category-label { color: alpha (@text_color, 0.7); font-weight: bold; text-shadow: 0 1px @text_shadow_color; } .h4 { padding-bottom: 6px; padding-top: 6px; } list .h4 { padding-left: 6px; } label.primary { font-weight: 700; font-size: 1.2em; } /*************** * Fancy Scales * ***************/ scale.temperature trough { background-image: linear-gradient( to right, @BLUEBERRY_500, @SILVER_100, @ORANGE_500 ); } scale.temperature:dir(rtl) trough { background-image: linear-gradient( to left, @BLUEBERRY_500, @SILVER_100, @ORANGE_500 ); } scale.warmth trough { background-image: linear-gradient( to right, mix ( @bg_color, @ORANGE_100, 0.5 ), @ORANGE_500 ); } scale.warmth:dir(rtl) trough { background-image: linear-gradient( to left, mix ( @bg_color, @ORANGE_100, 0.5 ), @ORANGE_500 ); } scale trough:disabled { background-image: none; } /**************** * Fake Terminal * ****************/ .terminal, .terminal text { background-color: #252e32; color: #94a3a5; font-family: monospace; } label.terminal { padding: 12px; } .terminal selection { background-color: #93a1a1; color: #252e32; }