Gnome-Shell: clone upstream 3.36.1 theme code
This commit is contained in:
Daniel Ruiz de Alegría
parent
26406f4255
commit
e18caa1942
@ -0,0 +1,17 @@
|
||||
$variant: 'dark';
|
||||
|
||||
@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
|
||||
@import "gnome-shell-sass/_drawing";
|
||||
@import "gnome-shell-sass/_common";
|
||||
@import "gnome-shell-sass/_widgets";
|
||||
|
||||
//force symbolic icons
|
||||
stage {
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
.toggle-switch { width: 48px; }
|
||||
.toggle-switch-us, .toggle-switch-intl {
|
||||
background-image: url("assets/toggle-off-hc.svg");
|
||||
&:checked { background-image: url("assets/toggle-on-hc.svg"); }
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
//This is the RIGHT PLACE to edit the stylesheet
|
||||
|
||||
//let's start by telling people not to edit the generated CSS:
|
||||
$cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
||||
/* #{$cakeisalie} */
|
||||
|
||||
/* Copyright 2009, 2015 Red Hat, Inc.
|
||||
*
|
||||
* Portions adapted from Mx's data/style/default.css
|
||||
* Copyright 2009 Intel Corporation
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify it
|
||||
* under the terms and conditions of the GNU Lesser General Public License,
|
||||
* version 2.1, as published by the Free Software Foundation.
|
||||
*
|
||||
* This program is distributed in the hope it will be useful, but WITHOUT ANY
|
||||
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
|
||||
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
|
||||
* more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with this program; if not, write to the Free Software Foundation,
|
||||
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
*/
|
||||
|
||||
/* Global Values */
|
||||
|
||||
// padding, margin and spacing
|
||||
$base_padding: 6px;
|
||||
$base_margin: 4px;
|
||||
$base_spacing: 6px;
|
||||
|
||||
// border radii
|
||||
$base_border_radius: 5px;
|
||||
|
||||
$modal_radius:$base_border_radius * 2;
|
||||
|
||||
// non-standard colors
|
||||
$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
|
||||
// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
|
||||
|
||||
// hover
|
||||
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
|
||||
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
|
||||
$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
|
||||
|
||||
// active
|
||||
$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%));
|
||||
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
|
||||
$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
|
||||
|
||||
// fonts
|
||||
$base_font_size: 11;
|
||||
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||
|
||||
// icons
|
||||
$base_icon_size: 1.09em;
|
||||
// $base_icon_size: 16px;
|
||||
|
||||
// Stage
|
||||
stage {
|
||||
@include fontsize($base_font_size);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
/* Common Stylings */
|
||||
|
||||
// Text
|
||||
%status_text {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
|
||||
// osd panels
|
||||
%osd_panel {
|
||||
color: $osd_fg_color;
|
||||
background-color: $osd_bg_color;
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
border-radius: $base_border_radius * 2 + 4px;
|
||||
padding: $base_padding * 2;
|
||||
}
|
||||
|
||||
// Overview panels
|
||||
// for the dash and workspace switcher
|
||||
%overview_panel {
|
||||
color: $osd_fg_color;
|
||||
background-color: transparentize($osd_bg_color, 0.2);
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
}
|
||||
|
||||
// icon tiles
|
||||
%icon_tile {
|
||||
border-radius: $base_border_radius + 4px;
|
||||
padding: $base_padding;
|
||||
border: 2px solid transparent;
|
||||
transition-duration: 100ms;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// dialogs
|
||||
%bubble_panel {
|
||||
color: $fg_color;
|
||||
background-color: $bg_color;
|
||||
border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color);
|
||||
}
|
||||
|
||||
// button styling
|
||||
%button {
|
||||
border-radius: $base_border_radius;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
min-height: 22px;
|
||||
padding: $base_padding * 0.5 $base_padding * 4;
|
||||
|
||||
@include button(normal);
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover);}
|
||||
&:insensitive { @include button(insensitive);}
|
||||
&:active { @include button(active);}
|
||||
}
|
||||
|
||||
// buttons in dialogs
|
||||
%bubble_button {
|
||||
@include button(normal, $shadow: none);
|
||||
padding: $base_padding * 2;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:insensitive { @include button(insensitive, $shadow: none); }
|
||||
&:hover { @include button(hover, $shadow: none); }
|
||||
&:focus { @include button(focus, $shadow: none); }
|
||||
&:active { @include button(active, $shadow: none); }
|
||||
|
||||
// radius is 2 pixel less to fit in bubble
|
||||
&:first-child {
|
||||
border-radius: 0 0 0 $modal_radius - 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 0;
|
||||
border-radius: 0 0 $modal_radius - 2px 0;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// notification styling
|
||||
@mixin notification_bubble($flat: false) {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $base_border_radius + 2px;
|
||||
margin: $base_margin;
|
||||
|
||||
@if $flat {
|
||||
@include button(undecorated);
|
||||
} @else {
|
||||
@include button(normal);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include button(focus);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include button(hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include button(active);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,231 @@
|
||||
// Drawing mixins
|
||||
|
||||
// generic drawing of more complex things
|
||||
|
||||
@function draw_widget_edge($c:$borders_edge) {
|
||||
// outer highlight "used" on most widgets
|
||||
@return 0 1px $c;
|
||||
}
|
||||
|
||||
// provide font size in rem, with px fallback
|
||||
@mixin fontsize($size: 24, $base: 16) {
|
||||
font-size: round($size) + pt;
|
||||
//font-size: ($size / $base) * 1rem;
|
||||
}
|
||||
|
||||
@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
|
||||
//
|
||||
// Helper function to stack up to 4 box-shadows;
|
||||
//
|
||||
@if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
|
||||
@else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
|
||||
@else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
|
||||
@else { box-shadow: $shadow1; }
|
||||
}
|
||||
|
||||
// entries
|
||||
|
||||
@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
|
||||
//
|
||||
// Entries drawing function
|
||||
//
|
||||
// $t: entry type
|
||||
// $fc: focus color
|
||||
// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, focus, insensitive
|
||||
//
|
||||
|
||||
@if $t==normal {
|
||||
background-color: $base_color;
|
||||
border-color: $borders_color;
|
||||
|
||||
}
|
||||
@if $t==focus {
|
||||
border-color: if($fc==$selected_bg_color,
|
||||
$selected_borders_color,
|
||||
darken($fc,35%));
|
||||
box-shadow: inset 0 0 0 1px $fc;
|
||||
}
|
||||
@if $t==hover { }
|
||||
@if $t==insensitive {
|
||||
color: $insensitive_fg_color;
|
||||
border-color: $insensitive_bg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
|
||||
@function draw_border_color ($c) {
|
||||
//
|
||||
// colored buttons want the border form the base color
|
||||
//
|
||||
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
|
||||
}
|
||||
|
||||
@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
|
||||
//
|
||||
// calculate the color of text shadows
|
||||
//
|
||||
// $tc is the text color
|
||||
// $bg is the background color
|
||||
//
|
||||
$lbg: lightness($bg)/100%;
|
||||
@if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
|
||||
@else { @return rgba(0,0,0,1-$lbg*0.8); }
|
||||
}
|
||||
|
||||
@function draw_button_hilight_color($c) {
|
||||
//
|
||||
// calculate the right top hilight color for buttons
|
||||
//
|
||||
// $c: base color;
|
||||
//
|
||||
@if lightness($c)>90% { @return white; }
|
||||
@else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
|
||||
@else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
|
||||
@else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
|
||||
@else { @return rgba(255,255,255, 0.1); }
|
||||
}
|
||||
|
||||
@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
|
||||
//
|
||||
// helper function for the text emboss effect
|
||||
//
|
||||
// $tc is the optional text color, not the shadow color
|
||||
//
|
||||
// TODO: this functions needs a way to deal with special cases
|
||||
//
|
||||
|
||||
$shadow: draw_text_shadow_color($tc, $bg);
|
||||
|
||||
@if lightness($tc)<50% {
|
||||
text-shadow: 0 1px $shadow;
|
||||
icon-shadow: 0 1px $shadow;
|
||||
}
|
||||
@else {
|
||||
text-shadow: 0 -1px $shadow;
|
||||
icon-shadow: 0 -1px $shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
|
||||
//
|
||||
// Button drawing function
|
||||
//
|
||||
// $t: button type,
|
||||
// $c: base button color for colored* types
|
||||
// $tc: optional text color for colored* types
|
||||
// $edge: set to none to not draw the bottom edge or specify a color to not
|
||||
// use the default one
|
||||
// $shadow: set to none to not draw the drop shadow or specify a color to not
|
||||
// use the default one
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, hover, active, insensitive, insensitive-active,
|
||||
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
||||
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
||||
//
|
||||
|
||||
$hilight_color: draw_button_hilight_color($c);
|
||||
$button_edge: if($edge == none, none, draw_widget_edge($edge));
|
||||
$blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
|
||||
$button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
|
||||
|
||||
// normal button
|
||||
@if $t==normal {
|
||||
color: $tc;
|
||||
background-color: lighten($c, 3%);
|
||||
border-color: draw_border_color($c);
|
||||
@include draw_shadows($button_shadow);
|
||||
// box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
|
||||
text-shadow: 0 1px $text_shadow_color;
|
||||
icon-shadow: 0 1px $text_shadow_color;
|
||||
}
|
||||
|
||||
// focused button
|
||||
@if $t==focus {
|
||||
color: $tc;
|
||||
text-shadow: 0 1px $text_shadow_color;
|
||||
icon-shadow: 0 1px $text_shadow_color;
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
|
||||
//border-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
// hover button
|
||||
@else if $t==hover {
|
||||
color: $tc;
|
||||
background-color: lighten($c, if($variant == 'light', 8%, 5%));
|
||||
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
|
||||
@include draw_shadows($button_shadow);
|
||||
text-shadow: 0 1px $text_shadow_color;
|
||||
icon-shadow: 0 1px $text_shadow_color;
|
||||
}
|
||||
|
||||
// active button
|
||||
@else if $t==active {
|
||||
color: $tc;
|
||||
background-color: darken($c,3%);
|
||||
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// insensitive button
|
||||
@else if $t==insensitive {
|
||||
color: $insensitive_fg_color;
|
||||
border-color: $insensitive_borders_color;
|
||||
background-color: $insensitive_bg_color;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
// reset
|
||||
@else if $t==undecorated {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
@include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// overview icons
|
||||
@mixin overview-icon($color) {
|
||||
.overview-icon {
|
||||
@extend %icon_tile;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:selected {
|
||||
.overview-icon {
|
||||
background-color: transparentize($color, .9);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.overview-icon {
|
||||
background-color: transparentize($color, .7);
|
||||
// border-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:drop {
|
||||
.overview-icon {
|
||||
background-color: transparentize($selected_bg_color, .15);
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:checked {
|
||||
.overview-icon {
|
||||
background-color: transparentize(darken($osd_bg_color, 10%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
//
|
||||
// Shell widgets stylesheets are placed in separate .scss files
|
||||
// in 'widgets' and imported into the main stylesheet in this file.
|
||||
// To create or update a widget for the shell modify the list below.
|
||||
//
|
||||
|
||||
/* WIDGETS */
|
||||
|
||||
// Primary widgets
|
||||
@import 'widgets/base';
|
||||
@import 'widgets/entries';
|
||||
@import 'widgets/buttons';
|
||||
@import 'widgets/check-box';
|
||||
@import 'widgets/switches';
|
||||
@import 'widgets/slider';
|
||||
@import 'widgets/scrollbars';
|
||||
// Popovers
|
||||
@import 'widgets/popovers';
|
||||
@import 'widgets/calendar';
|
||||
@import 'widgets/message-list';
|
||||
@import 'widgets/ibus-popup';
|
||||
// Notifications
|
||||
@import 'widgets/notifications';
|
||||
@import 'widgets/hotplug';
|
||||
// Dialogs
|
||||
@import 'widgets/dialogs';
|
||||
@import 'widgets/network-dialog';
|
||||
// OSDs
|
||||
@import 'widgets/osd';
|
||||
@import 'widgets/switcher-popup';
|
||||
@import 'widgets/workspace-switcher';
|
||||
// Panel
|
||||
@import 'widgets/panel';
|
||||
@import 'widgets/corner-ripple';
|
||||
// Overview
|
||||
@import 'widgets/overview';
|
||||
@import 'widgets/window-picker';
|
||||
@import 'widgets/search-entry';
|
||||
@import 'widgets/search-results';
|
||||
@import 'widgets/app-grid';
|
||||
@import 'widgets/dash';
|
||||
@import 'widgets/workspace-thumbnails';
|
||||
// A11y / misc
|
||||
@import 'widgets/a11y';
|
||||
@import 'widgets/misc';
|
||||
@import 'widgets/tiled-previews';
|
||||
@import 'widgets/keyboard';
|
||||
@import 'widgets/looking-glass';
|
||||
// Lock / login screens
|
||||
@import 'widgets/login-dialog';
|
||||
@import 'widgets/screen-shield';
|
||||
@ -0,0 +1,24 @@
|
||||
// Pointer location
|
||||
.ripple-pointer-location {
|
||||
width: $ripple_size;
|
||||
height: $ripple_size;
|
||||
border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
|
||||
background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
|
||||
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
|
||||
}
|
||||
|
||||
// Pointer accessibility notifications
|
||||
.pie-timer {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
-pie-border-width: 3px;
|
||||
-pie-border-color: $selected_bg_color;
|
||||
-pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
|
||||
}
|
||||
|
||||
// Screen zoom/Magnifier
|
||||
.magnifier-zoom-region {
|
||||
border: 2px solid $selected_bg_color;
|
||||
|
||||
&.full-screen { border-width: 0; }
|
||||
}
|
||||
@ -0,0 +1,182 @@
|
||||
/* App Grid */
|
||||
|
||||
$app_icon_size: 96px;
|
||||
$app_icon_padding: 24px;
|
||||
|
||||
// app icons
|
||||
.icon-grid {
|
||||
-shell-grid-horizontal-item-size: $app_icon_size + $app_icon_padding * 2;
|
||||
-shell-grid-vertical-item-size: $app_icon_size + $app_icon_padding * 2;
|
||||
spacing: $base_spacing * 6;
|
||||
|
||||
.overview-icon {
|
||||
icon-size: $app_icon_size;
|
||||
}
|
||||
}
|
||||
|
||||
//.app-display { spacing: 20px; }
|
||||
|
||||
/* App Icons */
|
||||
|
||||
$app_grid_fg_color: #fff;
|
||||
|
||||
// Icon tiles in the app grid
|
||||
.app-well-app,
|
||||
%app-well-app {
|
||||
@include overview-icon($app_grid_fg_color);
|
||||
|
||||
.overview-icon.overview-icon-with-label {
|
||||
padding: 10px 8px 5px 8px;
|
||||
|
||||
> StBoxLayout {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* App Folders */
|
||||
.app-well-app.app-folder {
|
||||
background-color: transparentize($osd_bg_color, 0.8);
|
||||
border-radius: $base_border_radius + 4px; // same as %icon_tile
|
||||
}
|
||||
|
||||
// expanded folder
|
||||
.app-folder-dialog {
|
||||
border-radius: $modal_radius * 1.5;
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
spacing: 12px;
|
||||
background-color: transparentize(darken($osd_bg_color,10%), 0.05);
|
||||
|
||||
& .folder-name-container {
|
||||
padding: 24px 36px 0;
|
||||
spacing: 12px;
|
||||
|
||||
& .folder-name-label,
|
||||
& .folder-name-entry {
|
||||
font-size: 18pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& .folder-name-entry { width: 300px }
|
||||
|
||||
/* FIXME: this is to keep the label in sync with the entry */
|
||||
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
|
||||
|
||||
& .edit-folder-button {
|
||||
@extend %button;
|
||||
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
|
||||
& > StIcon { icon-size: 16px }
|
||||
}
|
||||
}
|
||||
}
|
||||
.app-folder-dialog-container {
|
||||
padding: 12px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.app-folder-icon {
|
||||
padding: $base_padding;
|
||||
spacing-rows: $base_spacing;
|
||||
spacing-columns: $base_spacing;
|
||||
}
|
||||
|
||||
|
||||
// Running app indicator (also shown in dash)
|
||||
.app-well-app-running-dot {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius:5px;
|
||||
background-color: $osd_fg_color;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
// Rename popup for app folders
|
||||
.rename-folder-popup {
|
||||
.rename-folder-popup-item {
|
||||
spacing: $base_spacing;
|
||||
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
|
||||
}
|
||||
}
|
||||
|
||||
// right-click app menu
|
||||
.app-menu,
|
||||
.app-well-menu {
|
||||
max-width: 27.25em;
|
||||
}
|
||||
|
||||
// App Grid pagination indicators
|
||||
.page-indicator {
|
||||
padding: 15px 20px;
|
||||
|
||||
.page-indicator-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px; // the same as height&width
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// Some hacks I don't even know
|
||||
.all-apps,
|
||||
.frequent-apps > StBoxLayout {
|
||||
// horizontal padding to make sure scrollbars or dash don't overlap content
|
||||
padding: 0px 88px 10px 88px;
|
||||
}
|
||||
|
||||
// Label when no frequent apps
|
||||
.no-frequent-applications-label { @extend %status_text; }
|
||||
|
||||
// shutdown and other actions in the grid
|
||||
.system-action-icon {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
border-radius: 99px;
|
||||
icon-size: $app_icon_size * 0.5;
|
||||
}
|
||||
|
||||
/* Frequent | All toggle */
|
||||
|
||||
// container
|
||||
.app-view-controls {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
// buttons
|
||||
.app-view-control {
|
||||
padding: 4px 32px;
|
||||
margin: 0 4px;
|
||||
|
||||
&, &:hover, &:checked {
|
||||
@include button(undecorated);
|
||||
color: darken($osd_fg_color, 25%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $osd_fg_color;
|
||||
box-shadow: inset 0 -2px darken($osd_fg_color, 25%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 -2px $osd_fg_color;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
color: $osd_fg_color;
|
||||
box-shadow: inset 0 -2px $selected_bg_color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-right-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
// Links
|
||||
.shell-link {
|
||||
color: $link_color;
|
||||
|
||||
&:hover {
|
||||
color: lighten($link_color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline for low res icons
|
||||
.lowres-icon {
|
||||
icon-shadow: 0 1px 2px rgba(black, 0.3);
|
||||
}
|
||||
|
||||
// Dropshadow for large icons
|
||||
.icon-dropshadow {
|
||||
icon-shadow: 0 1px 2px rgba(black, 0.4);
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
/* Buttons */
|
||||
|
||||
.button {
|
||||
@extend %button; // that's it
|
||||
}
|
||||
@ -0,0 +1,262 @@
|
||||
/* Date/Time Menu */
|
||||
|
||||
.clock-display-box {
|
||||
spacing: $base_spacing / 2;
|
||||
|
||||
.clock {
|
||||
padding-left: $base_padding;
|
||||
padding-right: $base_padding;
|
||||
}
|
||||
}
|
||||
|
||||
// overall menu
|
||||
#calendarArea {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
// Calendar menu side column
|
||||
.datemenu-calendar-column {
|
||||
spacing: $base_spacing;
|
||||
border: 0 solid $bubble_borders_color;
|
||||
padding: 0 $base_padding * 2;
|
||||
|
||||
&:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
|
||||
&:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
|
||||
|
||||
.datemenu-displays-section {
|
||||
}
|
||||
|
||||
.datemenu-displays-box {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.events-section-title {
|
||||
@include notification_bubble($flat: true);
|
||||
color: desaturate(darken($fg_color,40%), 10%);
|
||||
font-weight: bold;
|
||||
padding: .4em;
|
||||
}
|
||||
|
||||
/* today button (the date) */
|
||||
.datemenu-today-button {
|
||||
@include notification_bubble($flat: true);
|
||||
padding: $base_padding * 1.5;
|
||||
|
||||
// weekday label
|
||||
.day-label {
|
||||
@include fontsize($base_font_size+1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// date label
|
||||
.date-label {
|
||||
@include fontsize($base_font_size+7);
|
||||
font-weight: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
.calendar {
|
||||
@include notification_bubble;
|
||||
padding: $base_padding;
|
||||
|
||||
// month
|
||||
.calendar-month-label {
|
||||
color: lighten($fg_color,5%);
|
||||
font-weight: bold;
|
||||
padding: 8px 0;
|
||||
&:focus {}
|
||||
}
|
||||
|
||||
// prev/next month icons
|
||||
.calendar-change-month-back StIcon,
|
||||
.calendar-change-month-forward StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
background-color: transparent;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: $base_border_radius;
|
||||
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
|
||||
&:active { background-color: $active_bg_color; }
|
||||
}
|
||||
|
||||
|
||||
$calendar_day_size: 32px;
|
||||
|
||||
.calendar-day-base {
|
||||
@include fontsize($base_font_size - 3);
|
||||
text-align: center;
|
||||
width: $calendar_day_size;
|
||||
height: $calendar_day_size;
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
border-radius: $calendar_day_size * 0.5 + 2px;
|
||||
border: 1px solid transparent; //avoid jumparound due to today
|
||||
font-feature-settings: "tnum";
|
||||
&:hover, &:focus { background-color: $hover_bg_color; }
|
||||
&:active,&:selected {
|
||||
color: lighten($fg_color,10%);
|
||||
background-color: darken($bg_color,5%);
|
||||
}
|
||||
|
||||
// day of week heading
|
||||
&.calendar-day-heading {
|
||||
color: lighten($fg_color,10%);
|
||||
margin-top: 1em;
|
||||
@include fontsize($base_font_size - 4);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-day { //border collapse hack - see calendar.js
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.calendar-day-top {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.calendar-day-left {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.calendar-work-day {}
|
||||
|
||||
.calendar-nonwork-day {
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
|
||||
// Today
|
||||
.calendar-today {
|
||||
font-weight: bold;
|
||||
border: 1px solid transparent;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
|
||||
&:hover,&:focus {
|
||||
background-color:lighten($selected_bg_color, 3%);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:active,&:selected {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
|
||||
&:hover,&:focus {
|
||||
background-color:lighten($selected_bg_color, 3%);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-day-with-events {
|
||||
color: lighten($fg_color,10%);
|
||||
font-weight: bold;
|
||||
background-image: url("assets/calendar-today.svg");
|
||||
}
|
||||
|
||||
.calendar-other-month-day {
|
||||
color: transparentize($fg_color ,0.5);
|
||||
}
|
||||
|
||||
.calendar-week-number {
|
||||
@include fontsize($base_font_size - 4);
|
||||
font-weight: bold;
|
||||
height: 1.8em;
|
||||
width: 2.3em;
|
||||
border-radius: 2px;
|
||||
padding: 0.5em 0 0;
|
||||
margin: 6px;
|
||||
background-color: darken($bg_color, 2%);
|
||||
color: lighten($fg_color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
/* World clocks */
|
||||
.world-clocks-button {
|
||||
@include notification_bubble;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_spacing;
|
||||
spacing-columns: $base_spacing * 2;
|
||||
}
|
||||
|
||||
// title
|
||||
.world-clocks-header {
|
||||
color: desaturate(darken($fg_color,40%), 10%);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// city label
|
||||
.world-clocks-city {
|
||||
color: $fg_color;
|
||||
@include fontsize($base_font_size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// timezone time
|
||||
.world-clocks-time {
|
||||
font-weight: bold;
|
||||
color: $fg_color;
|
||||
font-feature-settings: "lnum";
|
||||
@include fontsize($base_font_size);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// timezone offset label
|
||||
.world-clocks-timezone {
|
||||
color: darken($fg_color,20%);
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($base_font_size - 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Weather */
|
||||
.weather-button {
|
||||
@include notification_bubble;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.weather-box {
|
||||
spacing: $base_spacing + $base_margin;
|
||||
}
|
||||
|
||||
.weather-header-box {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
.weather-header {
|
||||
color: desaturate(darken($fg_color,40%), 10%);
|
||||
font-weight: bold;
|
||||
|
||||
&.location {
|
||||
font-weight: normal;
|
||||
@include fontsize($base_font_size - 1);
|
||||
}
|
||||
}
|
||||
|
||||
.weather-grid {
|
||||
spacing-rows: $base_spacing;
|
||||
spacing-columns: $base_spacing * 2;
|
||||
}
|
||||
|
||||
.weather-forecast-time {
|
||||
color: darken($fg_color,30%);
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($base_font_size - 2);
|
||||
font-weight: normal;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.weather-forecast-icon {
|
||||
icon-size: $base_icon_size * 2;
|
||||
}
|
||||
|
||||
.weather-forecast-temp {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
/* Check Boxes */
|
||||
|
||||
// these are equal to the size of the SVG assets
|
||||
$check_height: 22px;
|
||||
$check_width: 24px;
|
||||
|
||||
|
||||
.check-box {
|
||||
StBoxLayout { spacing: .8em; }
|
||||
StBin {
|
||||
width: $check_width;
|
||||
height: $check_height;
|
||||
background-image: url("assets/checkbox-off.svg");
|
||||
}
|
||||
&:focus StBin { background-image: url("assets/checkbox-off-focused.svg"); }
|
||||
&:checked StBin { background-image: url("assets/checkbox.svg"); }
|
||||
&:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); }
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
/* Activities Ripple */
|
||||
|
||||
$ripple_size: 50px;
|
||||
|
||||
.ripple-box {
|
||||
background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
|
||||
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
|
||||
// plus + 2px for the border (box-shadow)
|
||||
width: $ripple_size + 2px;
|
||||
height: $ripple_size + 2px;
|
||||
border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve
|
||||
|
||||
// just a simple change to the border radius position
|
||||
&:rtl { border-radius: 0 0 0 $ripple_size + 2px; }
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
/* Dash */
|
||||
|
||||
$dash_placeholder_size: 32px;
|
||||
$dash_spacing: $base_padding + 4px;
|
||||
$dash_border_radius: $modal_radius * 1.5;
|
||||
|
||||
#dash {
|
||||
@extend %overview_panel;
|
||||
@include fontsize($base_font_size - 2);
|
||||
padding: ($dash_spacing / 2) 0;
|
||||
|
||||
border-radius: 0 $dash_border_radius $dash_border_radius 0;
|
||||
border-left-width: 0;
|
||||
&:rtl {
|
||||
border-radius: $dash_border_radius 0 0 $dash_border_radius;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
// background-image: url("assets/dash-placeholder.svg");
|
||||
background-image:none;
|
||||
background-size: contain;
|
||||
height: $dash_placeholder_size;
|
||||
}
|
||||
|
||||
.empty-dash-drop-target {
|
||||
width: $dash_placeholder_size;
|
||||
height: $dash_placeholder_size;
|
||||
}
|
||||
}
|
||||
|
||||
// Dash Items
|
||||
.dash-item-container > StWidget {
|
||||
padding: ($dash_spacing / 2) $dash_spacing;
|
||||
}
|
||||
|
||||
// OSD Tooltip
|
||||
.dash-label {
|
||||
background-color: transparentize($osd_bg_color,0.05);
|
||||
border-radius: $base_border_radius + 2px;
|
||||
border:none;
|
||||
box-shadow:0 0 0 1px $osd_outer_borders_color;
|
||||
color: $osd_fg_color;
|
||||
padding: $base_padding $base_padding + 2px;
|
||||
text-align: center;
|
||||
-x-offset: $base_margin * 2; // distance from the dash edge
|
||||
}
|
||||
|
||||
// Show apps button
|
||||
.show-apps {
|
||||
@include overview-icon($osd_fg_color);
|
||||
|
||||
&:focus,
|
||||
&:checked {
|
||||
.overview-icon {
|
||||
background-color: darken($osd_bg_color,10%);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,168 @@
|
||||
/* Modal Dialogs */
|
||||
|
||||
.headline {
|
||||
@include fontsize($base_font_size + 1);
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
border-radius: $modal_radius;
|
||||
@extend %bubble_panel;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin: 32px 40px;
|
||||
spacing: 32px;
|
||||
max-width: 28em;
|
||||
}
|
||||
|
||||
.modal-dialog-linked-button {
|
||||
@extend %bubble_button;
|
||||
}
|
||||
}
|
||||
|
||||
/* End Session Dialog */
|
||||
.end-session-dialog {
|
||||
width: 30em;
|
||||
|
||||
.end-session-dialog-battery-warning,
|
||||
.dialog-list-title {
|
||||
color: $warning_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Message Dialog */
|
||||
.message-dialog-content {
|
||||
spacing: 18px;
|
||||
|
||||
.message-dialog-title {
|
||||
text-align: center;
|
||||
font-size: 18pt;
|
||||
font-weight: 800;
|
||||
|
||||
&.leightweight {
|
||||
font-size: 13pt;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
.message-dialog-description { text-align: center; }
|
||||
}
|
||||
|
||||
/* Dialog List */
|
||||
.dialog-list {
|
||||
spacing: 18px;
|
||||
|
||||
.dialog-list-title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dialog-list-scrollview { max-height: 200px; }
|
||||
.dialog-list-box {
|
||||
spacing: 1em;
|
||||
|
||||
.dialog-list-item {
|
||||
spacing: 1em;
|
||||
|
||||
.dialog-list-item-title { font-weight: bold; }
|
||||
.dialog-list-item-description {
|
||||
color: darken($fg_color,5%);
|
||||
@include fontsize($base_font_size - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Run Dialog */
|
||||
.run-dialog {
|
||||
.modal-dialog-content-box {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.run-dialog-entry { width: 20em; }
|
||||
.run-dialog-description {
|
||||
@include fontsize($base_font_size - 1);
|
||||
text-align: center;
|
||||
color: darken($fg_color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Password or Authentication Dialog */
|
||||
|
||||
.prompt-dialog {
|
||||
width: 28em;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-grid {
|
||||
spacing-rows: 8px;
|
||||
spacing-columns: 4px;
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: auto;
|
||||
|
||||
// 4px (spacing) + 16px (spinner-width)
|
||||
&:ltr { margin-left: 20px; }
|
||||
&:rtl { margin-right: 20px; }
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-layout {
|
||||
spacing: 8px;
|
||||
}
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label,
|
||||
.prompt-dialog-info-label,
|
||||
.prompt-dialog-null-label {
|
||||
text-align: center;
|
||||
@include fontsize($base_font_size - 1);
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label {
|
||||
color: $warning_color;
|
||||
}
|
||||
|
||||
|
||||
/* Polkit Dialog */
|
||||
|
||||
.polkit-dialog-user-layout {
|
||||
text-align: center;
|
||||
spacing: 8px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.polkit-dialog-user-icon {
|
||||
border-radius: 99px;
|
||||
background-size: contain;
|
||||
}
|
||||
.polkit-dialog-user-root-label { color: $warning_color; }
|
||||
}
|
||||
|
||||
/* Audio selection dialog */
|
||||
.audio-device-selection-dialog {
|
||||
.modal-dialog-content-box { margin-bottom: 28px; }
|
||||
.audio-selection-box { spacing: 20px; }
|
||||
}
|
||||
|
||||
.audio-selection-device {
|
||||
border: 1px solid $bubble_borders_color;
|
||||
border-radius: 12px;
|
||||
&:hover,&:focus { background-color: $hover_bg_color; }
|
||||
&:active {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-selection-device-box {
|
||||
padding: 20px;
|
||||
spacing: 20px;
|
||||
}
|
||||
|
||||
.audio-selection-device-icon {
|
||||
icon-size: $base_icon_size * 4;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
/* Entries */
|
||||
|
||||
StEntry {
|
||||
border-radius: $base_border_radius;
|
||||
padding: 8px;
|
||||
border-width: 1px;
|
||||
color: $fg_color;
|
||||
@include entry(normal);
|
||||
//&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
StIcon.capslock-warning {
|
||||
icon-size: 16px;
|
||||
warning-color: $warning_color;
|
||||
padding: 0 4px;
|
||||
}
|
||||
StIcon.peek-password {
|
||||
icon-size: $base_icon_size;
|
||||
padding: 0 4px;
|
||||
}
|
||||
StLabel.hint-text {
|
||||
margin-left: 2px;
|
||||
color: transparentize($fg_color, 0.3);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
// hotplug
|
||||
|
||||
.hotplug-notification-item {
|
||||
@extend %bubble_button;
|
||||
}
|
||||
|
||||
.hotplug-notification-item-icon {
|
||||
icon-size: 24px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
// IBus Candidate Popup
|
||||
|
||||
.candidate-popup-boxpointer {
|
||||
@extend .popup-menu-boxpointer;
|
||||
}
|
||||
|
||||
.candidate-popup-content {
|
||||
padding: 0.5em;
|
||||
spacing: 0.3em;
|
||||
}
|
||||
|
||||
.candidate-index {
|
||||
padding: 0 0.5em 0 0;
|
||||
color: darken($fg_color,10%);
|
||||
}
|
||||
|
||||
.candidate-box {
|
||||
padding: 0.3em 0.5em 0.3em 0.5em;
|
||||
border-radius: $base_border_radius;
|
||||
&:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
|
||||
}
|
||||
|
||||
.candidate-page-button-box {
|
||||
height: 2em;
|
||||
.vertical & { padding-top: 0.5em; }
|
||||
.horizontal & { padding-left: 0.5em; }
|
||||
}
|
||||
|
||||
.candidate-page-button {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
|
||||
.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
|
||||
.candidate-page-button-icon { icon-size: 1em; }
|
||||
@ -0,0 +1,115 @@
|
||||
/* On-screen Keyboard */
|
||||
|
||||
$key_size: 1.2em;
|
||||
$key_border_radius: $base_border_radius + 3px;
|
||||
$key_bg_color: $bg_color;
|
||||
// $default_key_bg_color: darken($key_bg_color, 4%);
|
||||
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
|
||||
|
||||
|
||||
// draw keys using button function
|
||||
#keyboard {
|
||||
background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
|
||||
box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
|
||||
|
||||
.page-indicator {
|
||||
padding: $base_padding;
|
||||
|
||||
.page-indicator-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// the container for individual keys
|
||||
.key-container {
|
||||
padding: $base_margin;
|
||||
spacing: $base_margin;
|
||||
}
|
||||
|
||||
// the keys
|
||||
.keyboard-key {
|
||||
|
||||
@include button(normal, $c:$key_bg_color);
|
||||
|
||||
&:focus { @include button(focus);}
|
||||
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
|
||||
&:active { @include button(active, $c: $key_bg_color); }
|
||||
|
||||
@include fontsize($base_font_size + 5);
|
||||
min-height: $key_size;
|
||||
min-width: $key_size;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $key_border_radius;
|
||||
|
||||
&:grayed { //FIXMEy
|
||||
background-color: darken($bg_color, 3%);
|
||||
color: $osd_fg_color;
|
||||
border-color: $osd_borders_color;
|
||||
}
|
||||
|
||||
// non-character keys
|
||||
&.default-key {
|
||||
@include button(normal, $c:$default_key_bg_color);
|
||||
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
|
||||
&:active { @include button(active, $c: $default_key_bg_color);}
|
||||
}
|
||||
|
||||
// enter key is suggested-action
|
||||
&.enter-key {
|
||||
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
|
||||
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
|
||||
&:active {@include button(active, $c: darken($selected_bg_color, 2%));}
|
||||
}
|
||||
|
||||
&.shift-key-uppercase { color: $selected_bg_color }
|
||||
|
||||
StIcon { icon-size: 1.125em; }
|
||||
}
|
||||
|
||||
// long press on a key popup
|
||||
.keyboard-subkeys {
|
||||
color: $osd_fg_color;
|
||||
-arrow-border-radius: $modal_radius;
|
||||
-arrow-background-color: $osd_bg_color;
|
||||
-arrow-border-width: 1px;
|
||||
-arrow-border-color: lighten($osd_bg_color, 9%);
|
||||
-arrow-base: 20px;
|
||||
-arrow-rise: 10px;
|
||||
-boxpointer-gap: $base_spacing;
|
||||
|
||||
.keyboard-key {
|
||||
@include button(normal, $c:$key_bg_color);
|
||||
|
||||
&:focus { @include button(focus);}
|
||||
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
|
||||
&:active { @include button(active, $c: $key_bg_color); }
|
||||
|
||||
border-radius:$base_border_radius;
|
||||
}
|
||||
}
|
||||
|
||||
// emoji
|
||||
.emoji-page {
|
||||
.keyboard-key {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-panel {
|
||||
.keyboard-key:latched {
|
||||
border-color: lighten($selected_bg_color, 5%);
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
// suggestions
|
||||
.word-suggestions {
|
||||
@include fontsize($base_font_size + 3);
|
||||
spacing: 12px;
|
||||
min-height: 20pt;
|
||||
}
|
||||
@ -0,0 +1,170 @@
|
||||
/* Login Dialog */
|
||||
|
||||
.login-dialog-banner-view {
|
||||
padding-top: 24px;
|
||||
max-width: 23em;
|
||||
}
|
||||
|
||||
.login-dialog {
|
||||
//reset
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
$_gdm_bg: lighten(#2e3436, 19%);
|
||||
|
||||
StEntry {
|
||||
@if $variant=='dark' {
|
||||
$_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5);
|
||||
background-color: $_gdm_entry_bg;
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-button-box { spacing: 3px; }
|
||||
.modal-dialog-button {
|
||||
padding: 4px 18px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
background-color: $_gdm_bg;
|
||||
border-color: $_gdm_bg;
|
||||
color: $fg_color;
|
||||
|
||||
$_hover_c: lighten($_gdm_bg, 5%);
|
||||
&:hover, &:focus {
|
||||
background-color: $_hover_c;
|
||||
border-color: $_hover_c;
|
||||
}
|
||||
&:active {
|
||||
$_active_c: darken($_gdm_bg, 5%);
|
||||
box-shadow: none;
|
||||
background-color: $_active_c;
|
||||
border-color: $_active_c;
|
||||
}
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
border-color: darken($_gdm_bg, 5%);
|
||||
background-color: darken($_gdm_bg, 5%);
|
||||
color: transparentize($fg_color, 0.3);
|
||||
}
|
||||
&:default {
|
||||
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
|
||||
border-color: $selected_bg_color;
|
||||
&:hover, &:focus {
|
||||
@include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
|
||||
$_def_hover_c: lighten($selected_bg_color, 5%);
|
||||
background-color: $_def_hover_c;
|
||||
border-color: $_def_hover_c;
|
||||
}
|
||||
&:active {
|
||||
@include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
|
||||
$_def_active_c: darken($selected_bg_color, 5%);
|
||||
background-color: $_def_active_c;
|
||||
border-color: $_def_active_c;
|
||||
}
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
border-color: darken($selected_bg_color, 10%);
|
||||
background-color: darken($selected_bg_color, 10%);
|
||||
color: transparentize($selected_fg_color, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.switch-user-button,
|
||||
.login-dialog-session-list-button {
|
||||
padding: 0;
|
||||
border-radius: 99px;
|
||||
width: $base_icon_size * 2;
|
||||
height: $base_icon_size * 2;
|
||||
border-color: transparentize($bg_color,0.7);
|
||||
background-color: transparentize($bg_color,0.7);
|
||||
|
||||
StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.caps-lock-warning-label,
|
||||
.login-dialog-message-warning {
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-logo-bin { padding: 24px 0px; }
|
||||
.login-dialog-banner { color: darken($osd_fg_color,10%); }
|
||||
.login-dialog-button-box { width: 23em; spacing: 5px; }
|
||||
.login-dialog-message { text-align: center; }
|
||||
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
|
||||
.login-dialog-user-selection-box { padding: 100px 0px; }
|
||||
.login-dialog-not-listed-label {
|
||||
padding-left: 2px;
|
||||
.login-dialog-not-listed-button:focus &,
|
||||
.login-dialog-not-listed-button:hover & {
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-not-listed-label {
|
||||
@include fontsize($base_font_size - 1);
|
||||
font-weight: bold;
|
||||
color: darken($osd_fg_color,30%);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
|
||||
.login-dialog-user-list {
|
||||
spacing: 12px;
|
||||
width: 23em;
|
||||
&:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
|
||||
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
|
||||
}
|
||||
|
||||
.login-dialog-user-list-item {
|
||||
border-radius: $base_border_radius + 4px;
|
||||
padding: 6px;
|
||||
color: darken($osd_fg_color,30%);
|
||||
&:ltr .user-widget { padding-right: 1em; }
|
||||
&:rtl .user-widget { padding-left: 1em; }
|
||||
.login-dialog-timed-login-indicator {
|
||||
height: 2px;
|
||||
margin-top: 6px;
|
||||
background-color: $osd_fg_color;
|
||||
}
|
||||
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
|
||||
}
|
||||
|
||||
.user-widget-label {
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
|
||||
.user-widget.horizontal .user-widget-label {
|
||||
@include fontsize($base_font_size + 2);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
|
||||
&:ltr { padding-left: 14px; }
|
||||
&:rtl { padding-right: 14px; }
|
||||
}
|
||||
|
||||
.user-widget.vertical .user-widget-label {
|
||||
@include fontsize($base_font_size + 5);
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-layout {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 12px;
|
||||
spacing: $base_spacing * 2;
|
||||
width: 23em;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-entry {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-label {
|
||||
color: darken($osd_fg_color, 20%);
|
||||
@include fontsize($base_font_size + 1);
|
||||
padding-top: 1em;
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
/* Looking Glass */
|
||||
|
||||
// Dialog
|
||||
#LookingGlassDialog {
|
||||
background-color: $osd_bg_color;
|
||||
spacing: $base_spacing;
|
||||
padding: 4px;
|
||||
border: 1px solid transparentize($osd_fg_color, 0.8);
|
||||
border-radius: $base_border_radius;
|
||||
color: $osd_fg_color;
|
||||
|
||||
& > #Toolbar {
|
||||
border: none;
|
||||
border-radius: $base_border_radius;
|
||||
background-color: $osd_bg_color;
|
||||
}
|
||||
|
||||
.labels { spacing: $base_spacing; }
|
||||
.notebook-tab {
|
||||
-natural-hpadding: $base_padding * 2;
|
||||
-minimum-hpadding: 6px;
|
||||
font-weight: bold;
|
||||
color: darken($osd_fg_color, 15%);
|
||||
transition-duration: 100ms;
|
||||
padding-left: .3em;
|
||||
padding-right: .3em;
|
||||
border-bottom-width: 2px;
|
||||
&:hover {
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
&:selected {
|
||||
border-bottom-width: 2px;
|
||||
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%);
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
}
|
||||
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
|
||||
StBoxLayout#ResultsArea { spacing: $base_spacing; }
|
||||
}
|
||||
|
||||
.lg-dialog {
|
||||
StEntry {
|
||||
background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
|
||||
color: $osd_fg_color;
|
||||
border-color: transparentize($osd_fg_color, 0.8);
|
||||
min-height: 22px;
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
}
|
||||
.shell-link {
|
||||
color: $link_color;
|
||||
&:hover { color: lighten($link_color, 10%); }
|
||||
&:active { color: darken($link_color, 10%); }
|
||||
}
|
||||
}
|
||||
|
||||
.lg-completions-text {
|
||||
font-size: .9em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-title {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-button {
|
||||
border: 1px solid $osd_borders_color;
|
||||
padding: 4px;
|
||||
border-radius: $base_border_radius;
|
||||
&:hover { border: 1px solid #ffffff; }
|
||||
}
|
||||
|
||||
// Extensions
|
||||
#lookingGlassExtensions { padding: 4px; }
|
||||
|
||||
.lg-extensions-list {
|
||||
padding: 4px;
|
||||
spacing: 6px;
|
||||
}
|
||||
|
||||
.lg-extension {
|
||||
border: 1px solid lighten($osd_borders_color, 5%);
|
||||
background-color: lighten($osd_bg_color, 5%);
|
||||
border-radius: $base_border_radius;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.lg-extension-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lg-extension-meta {
|
||||
spacing: 6px;
|
||||
}
|
||||
|
||||
// Inspector
|
||||
#LookingGlassPropertyInspector {
|
||||
background: $osd_bg_color;
|
||||
border: 1px solid $osd_borders_color;
|
||||
border-radius: $base_border_radius;
|
||||
padding: 6px;
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
/* Message List */
|
||||
// a.k.a. notifications in the menu
|
||||
|
||||
// main list
|
||||
.message-list {
|
||||
width: 31.5em;
|
||||
padding: 0 $base_padding * 2;
|
||||
|
||||
.message-list-placeholder { spacing: 12px; }
|
||||
}
|
||||
|
||||
.message-list-sections {
|
||||
spacing: $base_spacing;
|
||||
margin: 0 $base_margin * 4; // to account for scrollbar
|
||||
}
|
||||
|
||||
.message-list-section,
|
||||
.message-list-section-list {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
// do-not-disturb + clear button
|
||||
.message-list-controls {
|
||||
margin: ($base_margin * 2) ($base_margin * 4) 0;
|
||||
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
||||
padding: $base_margin;
|
||||
spacing: $base_spacing * 2;
|
||||
}
|
||||
|
||||
// message bubbles
|
||||
.message {
|
||||
@include notification_bubble;
|
||||
|
||||
// icon container
|
||||
.message-icon-bin {
|
||||
padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
|
||||
|
||||
&:rtl {
|
||||
padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
|
||||
}
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $base_icon_size*2; // 32px
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// fallback
|
||||
> .fallback-app-icon {
|
||||
width: $base_icon_size;
|
||||
height: $base_icon_size;
|
||||
}
|
||||
}
|
||||
|
||||
// content
|
||||
.message-content {
|
||||
padding: $base_padding + $base_margin * 2;
|
||||
spacing: 4px;
|
||||
}
|
||||
|
||||
// title
|
||||
.message-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// secondary container in title box
|
||||
.message-secondary-bin {
|
||||
padding: 0 $base_margin * 2;
|
||||
|
||||
// notification time stamp
|
||||
> .event-time {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
@include fontsize($base_font_size - 2);
|
||||
text-align: right;
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-bottom: 0.13em;
|
||||
}
|
||||
}
|
||||
|
||||
// close button
|
||||
.message-close-button {
|
||||
color: lighten($fg_color, 15%);
|
||||
&:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
|
||||
&:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
|
||||
}
|
||||
|
||||
// body
|
||||
.message-body {
|
||||
color: darken($fg_color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// URLs in messages
|
||||
.url-highlighter {
|
||||
link-color: $link_color;
|
||||
}
|
||||
|
||||
/* Media Controls */
|
||||
.message-media-control {
|
||||
padding: $base_padding * 2 $base_padding * 4;
|
||||
color: darken($fg_color, 15%);
|
||||
|
||||
// uses $hover_bg_color since the media controls are in a notification_bubble
|
||||
&:hover {
|
||||
background-color: lighten($hover_bg_color, 5%);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($hover_bg_color, 2%);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:insensitive { color: darken($fg_color,40%); }
|
||||
|
||||
// fix border-radius for last button
|
||||
&:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
|
||||
&:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
|
||||
}
|
||||
|
||||
// album-art
|
||||
.media-message-cover-icon {
|
||||
icon-size: $base_icon_size*2 !important; // 48px
|
||||
border-radius: $base_border_radius;
|
||||
|
||||
// when there is no artwork
|
||||
&.fallback {
|
||||
color: darken($fg_color, 17%);
|
||||
background-color: $bg_color;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $base_border_radius;
|
||||
icon-size: $base_icon_size * 2 !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
// Rubberband for select-area screenshots
|
||||
.select-area-rubberband {
|
||||
background-color: transparentize($selected_bg_color,0.7);
|
||||
border: 1px solid $selected_bg_color;
|
||||
}
|
||||
|
||||
// User icon
|
||||
.user-icon {
|
||||
background-size: contain;
|
||||
color: $osd_fg_color;
|
||||
border-radius: 99px;
|
||||
&:hover {
|
||||
color: lighten($osd_fg_color,30%);
|
||||
}
|
||||
|
||||
& StIcon {
|
||||
background-color: transparentize($osd_fg_color,0.95);
|
||||
border-radius: 99px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-widget.vertical .user-icon {
|
||||
icon-size: $base_icon_size * 6; // 128px
|
||||
|
||||
& StIcon {
|
||||
padding: $base_padding * 3 + 2px; // 20px
|
||||
padding-top: $base_padding * 3; // 18 px
|
||||
padding-bottom: $base_padding * 3 + 4px; // 22px
|
||||
width: $base_icon_size * 5.5; height: $base_icon_size * 5.5; // 88px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-widget.horizontal .user-icon {
|
||||
icon-size: $base_icon_size * 4; // 64px
|
||||
|
||||
& StIcon {
|
||||
padding: $base_padding * 2 ; // 12px
|
||||
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox { background-color: black; }
|
||||
.flashspot { background-color: white; }
|
||||
|
||||
|
||||
// Hidden
|
||||
.hidden { color: rgba(0,0,0,0);}
|
||||
|
||||
// Caps-lock warning
|
||||
.caps-lock-warning-label {
|
||||
text-align: center;
|
||||
padding-bottom: 8px;
|
||||
@include fontsize($base_font_size - 1);
|
||||
color: $warning_color;
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
/* Network Dialogs */
|
||||
.nm-dialog {
|
||||
max-height: 34em;
|
||||
min-height: 31em;
|
||||
min-width: 32em;
|
||||
}
|
||||
|
||||
.nm-dialog-content {
|
||||
spacing: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.nm-dialog-airplane-box { spacing: 12px; }
|
||||
|
||||
.nm-dialog-airplane-headline {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nm-dialog-airplane-text { color: $fg_color; }
|
||||
|
||||
// header
|
||||
.nm-dialog-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
.nm-dialog-header-icon {
|
||||
icon-size: $base_icon_size * 2;
|
||||
}
|
||||
.nm-dialog-header-hbox { spacing: 10px; }
|
||||
|
||||
// list of networks
|
||||
.nm-dialog-scroll-view {
|
||||
border: 1px solid $borders_color;
|
||||
padding:0;
|
||||
background-color: darken($bg_color, 3%);
|
||||
}
|
||||
|
||||
// list item
|
||||
.nm-dialog-item {
|
||||
@include fontsize($base_font_size);
|
||||
border-bottom: 1px solid $borders_color;
|
||||
padding: $base_padding * 2;
|
||||
spacing: 0px;
|
||||
&:selected {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
// icons in list
|
||||
.nm-dialog-icon { icon-size: $base_icon_size; }
|
||||
.nm-dialog-icons { spacing: $base_spacing * 2; }
|
||||
|
||||
// no networks
|
||||
.no-networks-label { color: $insensitive_fg_color; }
|
||||
.no-networks-box { spacing: $base_padding; }
|
||||
@ -0,0 +1,57 @@
|
||||
/* Notifications & Mesage Tray */
|
||||
|
||||
$notification_banner_height: 64px;
|
||||
$notification_banner_width: 34em;
|
||||
|
||||
// Banner notifications
|
||||
.notification-banner {
|
||||
min-height: $notification_banner_height;
|
||||
width: $notification_banner_width;
|
||||
|
||||
.notification-actions {
|
||||
spacing: 0;
|
||||
}
|
||||
|
||||
.notification-button {
|
||||
@extend %bubble_button;
|
||||
}
|
||||
}
|
||||
|
||||
// counter
|
||||
.summary-source-counter {
|
||||
font-size: $base_font_size - 1pt;
|
||||
font-weight: bold;
|
||||
height: 1.6em;
|
||||
width: 1.6em;
|
||||
-shell-counter-overlap-x: 3px;
|
||||
-shell-counter-overlap-y: 3px;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
border: 2px solid $fg_color;
|
||||
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
|
||||
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
|
||||
}
|
||||
|
||||
// chat bubbles
|
||||
.chat-body { spacing: 5px; }
|
||||
.chat-response { margin: 5px; }
|
||||
.chat-log-message { color: darken($fg_color,10%); }
|
||||
.chat-new-group { padding-top: 1em; }
|
||||
.chat-received {
|
||||
padding-left: 4px;
|
||||
&:rtl { padding-left: 0px; padding-right: 4px; }
|
||||
}
|
||||
|
||||
.chat-sent {
|
||||
padding-left: 18pt;
|
||||
color: lighten($fg_color, 15%);
|
||||
&:rtl { padding-left: 0; padding-right: 18pt; }
|
||||
}
|
||||
|
||||
.chat-meta-message {
|
||||
padding-left: 4px;
|
||||
@include fontsize($base_font_size - 2);
|
||||
font-weight: bold;
|
||||
color: lighten($fg_color,18%);
|
||||
&:rtl { padding-left: 0; padding-right: 4px; }
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
/* OSD */
|
||||
|
||||
$osd_levelbar_height:8px;
|
||||
|
||||
.osd-window {
|
||||
@extend %osd_panel;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
spacing: $base_spacing * 2; // 12px
|
||||
margin: $base_margin * 8; // 32px
|
||||
min-width: 64px;
|
||||
min-height: 64px;
|
||||
|
||||
StIcon {
|
||||
icon-size:$base_icon_size * 6;
|
||||
}
|
||||
|
||||
.osd-monitor-label { font-size: 3em; }
|
||||
|
||||
.level {
|
||||
height: $osd_levelbar_height;
|
||||
-barlevel-height: $osd_levelbar_height;
|
||||
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
|
||||
-barlevel-active-background-color: $osd_fg_color;
|
||||
-barlevel-overdrive-color: $destructive_color;
|
||||
-barlevel-overdrive-separator-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pad OSD */
|
||||
.pad-osd-window {
|
||||
padding: 32px;
|
||||
background-color: transparentize(#000, 0.2);
|
||||
|
||||
.pad-osd-title-box { spacing: 12px; }
|
||||
.pad-osd-title-menu-box { spacing: 6px; }
|
||||
}
|
||||
|
||||
.combo-box-label {
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.resize-popup {
|
||||
@extend %osd_panel;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/* OVERVIEW */
|
||||
|
||||
#overview {
|
||||
spacing: 24px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.overview-controls {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
/* Top Bar */
|
||||
// a.k.a. the panel
|
||||
|
||||
$panel_corner_radius: $base_border_radius+1;
|
||||
$panel_bg_color: #000;
|
||||
$panel_fg_color: #ccc;
|
||||
$panel_height: 1.86em;
|
||||
|
||||
|
||||
#panel {
|
||||
background-color: $panel_bg_color;
|
||||
font-weight: bold;
|
||||
height: $panel_height;
|
||||
font-feature-settings: "tnum";
|
||||
|
||||
// transparent panel on lock & login screens
|
||||
&.unlock-screen,
|
||||
&.login-screen {
|
||||
background-color: transparent;
|
||||
|
||||
.panel-corner {
|
||||
-panel-corner-radius: 0;
|
||||
-panel-corner-background-color: transparent;
|
||||
-panel-corner-border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// spacing between activities, app menu and such
|
||||
#panelLeft, #panelCenter {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
// the rounded outset corners
|
||||
.panel-corner {
|
||||
-panel-corner-radius: $panel_corner_radius;
|
||||
-panel-corner-background-color: $panel_bg_color;
|
||||
-panel-corner-border-width: 2px;
|
||||
-panel-corner-border-color: transparent;
|
||||
|
||||
&:active, &:overview, &:focus {
|
||||
-panel-corner-border-color: lighten($selected_bg_color,5%);
|
||||
}
|
||||
}
|
||||
|
||||
// panel menus
|
||||
.panel-button {
|
||||
font-weight: bold;
|
||||
color: $panel_fg_color;
|
||||
-natural-hpadding: $base_padding * 2;
|
||||
-minimum-hpadding: $base_padding;
|
||||
|
||||
&:hover {
|
||||
color: lighten($panel_fg_color, 20%);
|
||||
}
|
||||
|
||||
&:active, &:overview, &:focus, &:checked {
|
||||
color: lighten($panel_fg_color, 20%);
|
||||
}
|
||||
|
||||
// status area icons
|
||||
.system-status-icon {
|
||||
icon-size: $base_icon_size;
|
||||
padding: $base_padding - 1px;
|
||||
}
|
||||
|
||||
// app menu icon
|
||||
.app-menu-icon {
|
||||
margin-left: $base_margin;
|
||||
margin-right: $base_margin;
|
||||
-st-icon-style: symbolic;
|
||||
// dimensions of the icon are hardcoded
|
||||
}
|
||||
|
||||
// lock & login screen styles
|
||||
.unlock-screen &,
|
||||
.login-screen & {
|
||||
color: lighten($fg_color, 10%);
|
||||
&:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
|
||||
}
|
||||
}
|
||||
|
||||
.panel-button {
|
||||
&:active, &:overview, &:focus, &:checked {
|
||||
// Trick due to St limitations. It needs a background to draw a box-shadow
|
||||
background-color: rgba(0, 0, 0, 0.01);
|
||||
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-button.clock-display {
|
||||
// Move highlight from .panel-button to .clock
|
||||
&:active, &:overview, &:focus, &:checked {
|
||||
box-shadow: none;
|
||||
|
||||
.clock {
|
||||
background-color: rgba(0, 0, 0, 0.01);
|
||||
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-status-indicators-box,
|
||||
.panel-status-menu-box {
|
||||
spacing: 2px;
|
||||
}
|
||||
|
||||
// spacing between power icon and (optional) percentage label
|
||||
.power-status.panel-status-indicators-box {
|
||||
spacing: 0;
|
||||
}
|
||||
|
||||
// indicator for active
|
||||
.screencast-indicator,
|
||||
.remote-access-indicator { color: $warning_color; }
|
||||
}
|
||||
|
||||
// App Menu
|
||||
#appMenu {
|
||||
spacing: $base_spacing;
|
||||
.label-shadow { color: transparent; }
|
||||
}
|
||||
@ -0,0 +1,129 @@
|
||||
/* Popovers/Menus */
|
||||
|
||||
$popover_arrow_height: 12px;
|
||||
|
||||
//.the popover itself
|
||||
.popup-menu-boxpointer {
|
||||
-arrow-border-radius: $base_border_radius+4;
|
||||
-arrow-background-color: $bg_color;
|
||||
-arrow-border-width: 1px;
|
||||
-arrow-border-color: $borders_color;
|
||||
-arrow-base: $popover_arrow_height * 2;
|
||||
-arrow-rise: $popover_arrow_height;
|
||||
-arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
|
||||
}
|
||||
|
||||
// container of the popover menu
|
||||
.popup-menu {
|
||||
min-width: 15em;
|
||||
color: $fg_color;
|
||||
|
||||
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
|
||||
&.panel-menu {
|
||||
-boxpointer-gap: $base_margin; // distance from the panel
|
||||
margin-bottom: 1.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-menu-content {
|
||||
padding: $base_padding * 2 + $base_margin 0;
|
||||
}
|
||||
|
||||
// menu items
|
||||
.popup-menu-item {
|
||||
spacing: $base_padding;
|
||||
padding: $base_padding;
|
||||
|
||||
&:ltr { padding-right:1.75em; padding-left: 0; }
|
||||
&:rtl { padding-right: 0; padding-left:1.75em; }
|
||||
|
||||
&:checked {
|
||||
background-color: lighten($bg_color, 2%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:insensitive { color: transparentize($fg_color,0.5);}
|
||||
}
|
||||
|
||||
// all icons and other graphical elements
|
||||
.popup-inactive-menu-item {
|
||||
color: $fg_color;
|
||||
|
||||
&:insensitive { color: transparentize($fg_color,0.5); }
|
||||
}
|
||||
|
||||
// symbolic icons in popover
|
||||
.popup-menu-arrow,
|
||||
.popup-menu-icon { icon-size: $base_icon_size; }
|
||||
|
||||
// popover submenus
|
||||
.popup-sub-menu {
|
||||
background-color: darken($bg_color, 3%);
|
||||
box-shadow: none;
|
||||
border-top: 1px solid transparentize($borders_color, 0.2);
|
||||
border-bottom: 1px solid transparentize($borders_color, 0.2);
|
||||
}
|
||||
|
||||
// container for radio and check boxes
|
||||
.popup-menu-ornament {
|
||||
text-align: right;
|
||||
width: 1.2em;
|
||||
}
|
||||
|
||||
// separator
|
||||
.popup-separator-menu-item {
|
||||
padding: 0;
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
//-margin-horizontal: 24px;
|
||||
height: 1px; //not really the whole box
|
||||
margin: 6px 64px;
|
||||
background-color: lighten($borders_color, 2%);
|
||||
.popup-sub-menu & { //submenu separators
|
||||
margin: 0 64px 0 32px;
|
||||
@if $variant == 'dark' {
|
||||
background-color: lighten($bg_color,10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// desktop background menu
|
||||
.background-menu {
|
||||
-boxpointer-gap: $base_margin;
|
||||
-arrow-rise: 0px; // hide the beak on the menu
|
||||
}
|
||||
|
||||
// system status menu
|
||||
.aggregate-menu {
|
||||
min-width: 21em;
|
||||
|
||||
// lock screen, shutdown, etc. buttons
|
||||
.popup-menu-icon {
|
||||
padding:0;
|
||||
margin: 0 $base_margin;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
.popup-sub-menu .popup-menu-item > :first-child {
|
||||
// account for icons in submenus with padding
|
||||
&:ltr {
|
||||
padding-left: $base_padding + $base_margin * 2;
|
||||
margin-left: $base_icon_size;
|
||||
}
|
||||
&:rtl {
|
||||
padding-right: $base_padding + $base_margin * 2; ;
|
||||
margin-right: $base_icon_size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
/* Screen Shield */
|
||||
|
||||
.unlock-dialog-clock {
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
spacing: 24px;
|
||||
padding-bottom: 2.5em;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-time {
|
||||
font-size: 64pt;
|
||||
padding-top: 42px;
|
||||
font-feature-settings: "tnum";
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-date {
|
||||
font-size: 16pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-hint {
|
||||
font-weight: normal;
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
.unlock-dialog-notifications-container {
|
||||
margin: 12px 0;
|
||||
spacing: 6px;
|
||||
width: 23em;
|
||||
background-color: transparent;
|
||||
.summary-notification-stack-scrollview {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.notification,
|
||||
.unlock-dialog-notification-source {
|
||||
padding: 12px 6px;
|
||||
border: none;
|
||||
background-color: transparentize($osd_bg_color,0.7);
|
||||
color: $osd_fg_color;
|
||||
border-radius: $modal_radius;
|
||||
|
||||
&.critical { background-color: transparentize($osd_bg_color,0.1) }
|
||||
}
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-label {
|
||||
padding: 0px 0px 0px 12px;
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-count-text {
|
||||
weight: bold;
|
||||
padding: 0 6px;
|
||||
color: $osd_bg_color;
|
||||
background-color: transparentize($osd_fg_color, 0.7);
|
||||
border-radius: 99px;
|
||||
margin-right: 12px;
|
||||
|
||||
}
|
||||
|
||||
.screen-shield-background { //just the shadow, really
|
||||
background: black;
|
||||
box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
#lockDialogGroup {
|
||||
background-color: lighten(#2e3436, 8%);
|
||||
}
|
||||
|
||||
#unlockDialogNotifications {
|
||||
StButton#vhandle, StButton#hhandle {
|
||||
background-color: transparentize($bg_color,0.7);
|
||||
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
|
||||
&:active { background-color: transparentize($selected_bg_color,0.5); }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
/* Scrollbars */
|
||||
|
||||
StScrollView {
|
||||
&.vfade { -st-vfade-offset: 68px; }
|
||||
&.hfade { -st-hfade-offset: 68px; }
|
||||
}
|
||||
|
||||
StScrollBar {
|
||||
padding: 0;
|
||||
|
||||
StScrollView & {
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
}
|
||||
|
||||
StBin#trough {
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
StButton#vhandle, StButton#hhandle {
|
||||
border-radius: 8px;
|
||||
background-color: mix($fg_color, $bg_color, 60%);
|
||||
//border: 3px solid transparent; //would be nice to margin or at least to transparent
|
||||
margin: 3px;
|
||||
&:hover { background-color: mix($fg_color, $bg_color, 80%); }
|
||||
&:active { background-color: $selected_bg_color; }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
// Search entry
|
||||
|
||||
$search_entry_width: 320px;
|
||||
$search_entry_height: 36px;
|
||||
|
||||
%search_entry,
|
||||
.search-entry {
|
||||
width: $search_entry_width;
|
||||
padding: $base_padding+1 $base_padding+3;
|
||||
border-radius: $search_entry_height * 0.5; // half the height
|
||||
color: transparentize($fg_color,0.3);
|
||||
background-color: $bg_color;
|
||||
border-color: $borders_color;
|
||||
|
||||
&:hover {
|
||||
background-color: $hover_bg_color;
|
||||
border-color: $hover_borders_color;
|
||||
color: $hover_fg_color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
padding: $base_padding $base_padding+2; // 1px less to account for wider border
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: $selected_bg_color;
|
||||
color: $fg_color;
|
||||
box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.search-entry-icon {
|
||||
icon-size: $base_icon_size;
|
||||
padding: 0 4px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
/* Search */
|
||||
|
||||
// search overview container
|
||||
#searchResultsContent {
|
||||
max-width: 1024px;
|
||||
spacing: $base_margin * 2;
|
||||
}
|
||||
|
||||
// search results sections "the boxes"
|
||||
.search-section {
|
||||
// This should be equal to #searchResultsContent spacing
|
||||
spacing: $base_margin * 2;
|
||||
|
||||
// separator
|
||||
.search-section-separator {
|
||||
// height: 1px;
|
||||
// background-color: $osd_outer_borders_color;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// content
|
||||
.search-section-content {
|
||||
background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
|
||||
border-radius: $modal_radius+3;
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
|
||||
color: $osd_fg_color;
|
||||
padding: $base_padding * 3;
|
||||
// This is the space between the provider icon and the results container
|
||||
spacing: $base_margin * 2;
|
||||
}
|
||||
|
||||
%search-section-content-item {
|
||||
@extend %icon_tile;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:selected {
|
||||
background-color: transparentize($osd_fg_color, .9);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:checked {
|
||||
background-color: transparentize(darken($osd_bg_color, 10%), .1);
|
||||
}
|
||||
}
|
||||
|
||||
// "no results" text
|
||||
.search-statustext {
|
||||
@extend %status_text;
|
||||
}
|
||||
|
||||
// Search results with icons
|
||||
.grid-search-result {
|
||||
@extend %app-well-app;
|
||||
}
|
||||
|
||||
// search result provider
|
||||
.search-provider-icon {
|
||||
@extend %search-section-content-item;
|
||||
|
||||
// content
|
||||
.list-search-provider-content {
|
||||
spacing: $base_spacing * 2;
|
||||
|
||||
// provider labels
|
||||
.list-search-provider-details {
|
||||
width: 120px;
|
||||
margin-top: 0;
|
||||
color: darken($osd_fg_color, 8%);
|
||||
// font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// search results list
|
||||
.list-search-results {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
// search result listitem
|
||||
.list-search-result {
|
||||
@extend %search-section-content-item;
|
||||
|
||||
// content
|
||||
.list-search-result-content {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// list item title (with leading icon)
|
||||
.list-search-result-title {
|
||||
spacing: $base_spacing * 2;
|
||||
// font-weight: bold;
|
||||
}
|
||||
|
||||
// list item description
|
||||
.list-search-result-description {
|
||||
color: darken($osd_fg_color, 30%);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
/* Slider */
|
||||
|
||||
$slider_size: 15px;
|
||||
|
||||
.slider {
|
||||
height: $slider_size;
|
||||
// slider trough
|
||||
-barlevel-height: 3px; // has to be an odd number
|
||||
-barlevel-background-color: $borders_color; //background of the trough
|
||||
-barlevel-border-width: 1px;
|
||||
-barlevel-border-color: $borders_color; // trough border color
|
||||
// fill style
|
||||
-barlevel-active-background-color: $selected_bg_color; //active trough fill
|
||||
-barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
|
||||
// overfill style (red in this case)
|
||||
-barlevel-overdrive-color: $destructive_color;
|
||||
-barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
|
||||
-barlevel-overdrive-separator-width:1px;
|
||||
// slider hander
|
||||
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
|
||||
-slider-handle-border-width: 1px;
|
||||
-slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
|
||||
|
||||
color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
|
||||
&:hover { color: $hover_bg_color; }
|
||||
&:active { color: $active_bg_color; }
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
/* App Switcher */
|
||||
|
||||
.switcher-popup {
|
||||
padding: 8px;
|
||||
spacing: $base_spacing * 4;
|
||||
}
|
||||
|
||||
// switcher onscreen panel
|
||||
.switcher-list {
|
||||
@extend %osd_panel;
|
||||
|
||||
.item-box {
|
||||
padding: 8px;
|
||||
border-radius: $base_border_radius + 1px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:outlined {
|
||||
background-color: transparentize($osd_fg_color, 0.7);
|
||||
}
|
||||
|
||||
&:selected {
|
||||
background-color: transparentize($osd_fg_color, 0.7);
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
// window thumbnails
|
||||
.thumbnail-box {
|
||||
padding: 2px;
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 1px;
|
||||
background: $borders_color;
|
||||
}
|
||||
|
||||
.switcher-list-item-container {
|
||||
spacing: $base_spacing * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.switcher-arrow {
|
||||
border-color: rgba(0,0,0,0);
|
||||
color: transparentize($fg_color,0.2);
|
||||
&:highlighted {
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
// Input Source Switcher
|
||||
.input-source-switcher-symbol {
|
||||
font-size: 34pt;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
// Window cycler highlight
|
||||
.cycler-highlight {
|
||||
border: 5px solid $selected_bg_color;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
/* Switches */
|
||||
|
||||
// these are equal to the size of the SVG assets
|
||||
$switch_height: 22px;
|
||||
$switch_width: 46px;
|
||||
|
||||
.toggle-switch {
|
||||
color: $fg_color;
|
||||
height: $switch_height;
|
||||
width: $switch_width;
|
||||
background-size: contain;
|
||||
background-image: if($variant == 'light', url("assets/toggle-off.svg"),url("assets/toggle-off-dark.svg"));
|
||||
&:checked {
|
||||
background-image: if($variant == 'light', url("assets/toggle-on.svg"),url("assets/toggle-on-dark.svg"));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
|
||||
/* Tiled window previews */
|
||||
$tile_corner_radius: $base_border_radius + 1px;
|
||||
.tile-preview {
|
||||
background-color: transparentize($selected_bg_color,0.5);
|
||||
border: 1px solid $selected_bg_color;
|
||||
}
|
||||
|
||||
.tile-preview-left.on-primary {
|
||||
border-radius: $tile_corner_radius 0 0 0;
|
||||
}
|
||||
|
||||
.tile-preview-right.on-primary {
|
||||
border-radius: 0 $tile_corner_radius 0 0;
|
||||
}
|
||||
|
||||
.tile-preview-left.tile-preview-right.on-primary {
|
||||
border-radius: $tile_corner_radius $tile_corner_radius 0 0;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
/* Window Picker */
|
||||
|
||||
$window_picker_spacing: $base_spacing * 2; // 16px
|
||||
$window_picker_padding: $base_padding * 2; // 16px
|
||||
|
||||
$window_thumbnail_border_color:transparentize($selected_fg_color, 0.65);
|
||||
|
||||
$window_close_button_size: 24px;
|
||||
$window_close_button_padding: 3px;
|
||||
|
||||
|
||||
// Window picker
|
||||
.window-picker {
|
||||
// Space between window thumbnails
|
||||
-horizontal-spacing: $window_picker_spacing;
|
||||
-vertical-spacing: $window_picker_spacing;
|
||||
// Padding for container around window thumbnails
|
||||
padding: $window_picker_padding;
|
||||
|
||||
&.external-monitor { padding: $window_picker_padding; }
|
||||
}
|
||||
|
||||
// Borders on window thumbnails
|
||||
.window-clone-border {
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: $window_thumbnail_border_color;
|
||||
border-radius: $base_border_radius + 2;
|
||||
// For window decorations with round corners we can't match
|
||||
// the exact shape when the window is scaled. So apply a shadow
|
||||
// to fix that case
|
||||
box-shadow: inset 0 0 0 1px transparentize($borders_color, 0.8);
|
||||
}
|
||||
|
||||
// Window titles
|
||||
.window-caption {
|
||||
color: $osd_fg_color;
|
||||
background-color: $osd_bg_color;
|
||||
border:1px solid $osd_outer_borders_color;
|
||||
border-radius: $base_border_radius + 1;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
font-weight: bold;
|
||||
@include fontsize($base_font_size + 1);
|
||||
}
|
||||
|
||||
// Close button
|
||||
.window-close {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
border: none;
|
||||
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
|
||||
padding: $window_close_button_padding;
|
||||
height: $window_close_button_size;
|
||||
width: $window_close_button_size;
|
||||
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
|
||||
|
||||
-shell-close-overlap: $window_close_button_size * 0.5;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($selected_bg_color, 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($selected_bg_color, 5%);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
/* Workspace Switcher */
|
||||
.workspace-switcher-group {
|
||||
padding: $base_padding * 2;
|
||||
}
|
||||
|
||||
.workspace-switcher-container {
|
||||
@extend %osd_panel;
|
||||
}
|
||||
|
||||
.workspace-switcher {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
spacing: $base_spacing * 2;
|
||||
}
|
||||
|
||||
.ws-switcher-box {
|
||||
background: transparent;
|
||||
height: 50px;
|
||||
background-size: 32px;
|
||||
border: 1px solid transparentize($osd_fg_color,0.9);
|
||||
border-radius: $base_border_radius + 3px;
|
||||
}
|
||||
|
||||
// active workspace in the switcher
|
||||
.ws-switcher-active-up,
|
||||
.ws-switcher-active-down,
|
||||
.ws-switcher-active-left,
|
||||
.ws-switcher-active-right {
|
||||
height: 52px;
|
||||
background-color: $selected_bg_color;
|
||||
border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
|
||||
border-radius: $base_border_radius + 3px;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
/* Workspace pager */
|
||||
|
||||
// thumbnails in overview
|
||||
.workspace-thumbnails {
|
||||
@extend %overview_panel;
|
||||
visible-width: 32px; //amount visible before hover
|
||||
spacing: $base_spacing;
|
||||
padding: $base_padding;
|
||||
|
||||
border-radius: $modal_radius 0 0 $modal_radius;
|
||||
border-right-width: 0;
|
||||
|
||||
&:rtl {
|
||||
border-radius: 0 $modal_radius $modal_radius 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
// drag and drop indicator
|
||||
.placeholder {
|
||||
background-image: url("assets/dash-placeholder.svg");
|
||||
background-size: contain;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// selected indicator
|
||||
.workspace-thumbnail-indicator {
|
||||
border: 3px solid $selected_bg_color;
|
||||
border-radius: 3px;
|
||||
padding: 0px;
|
||||
// background-color: transparentize($selected_bg_color, 0.9);
|
||||
}
|
||||
66
src/themes/Kali/sass/gnome-shell-sass/upstream/sync.sh
Executable file
66
src/themes/Kali/sass/gnome-shell-sass/upstream/sync.sh
Executable file
@ -0,0 +1,66 @@
|
||||
#!/bin/sh
|
||||
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
RESET='\033[0m'
|
||||
|
||||
VERSION=3.36.1
|
||||
|
||||
echo
|
||||
echo -e " $YELLOW[ i ]$RESET Upstream version $VERSION"
|
||||
echo
|
||||
|
||||
while read file;
|
||||
do
|
||||
echo
|
||||
echo -e " $GREEN[ * ]$RESET Downloading file $file"
|
||||
mkdir -p $(dirname $file)
|
||||
wget https://gitlab.gnome.org/GNOME/gnome-shell/raw/$VERSION/data/theme/$file -O $file --quiet
|
||||
sed 's/resource:\/\/\/org\/gnome\/shell\/theme/assets/g' -i $file
|
||||
|
||||
if [ -f $file.patch ]
|
||||
then
|
||||
echo -e " $YELLOW[ ~ ]$RESET Apply patch"
|
||||
patch $file $file.patch --quiet
|
||||
fi
|
||||
done <<- EOF
|
||||
pad-osd.css
|
||||
gnome-shell-high-contrast.scss
|
||||
gnome-shell-sass/_common.scss
|
||||
gnome-shell-sass/_drawing.scss
|
||||
gnome-shell-sass/_widgets.scss
|
||||
gnome-shell-sass/widgets/_a11y.scss
|
||||
gnome-shell-sass/widgets/_app-grid.scss
|
||||
gnome-shell-sass/widgets/_base.scss
|
||||
gnome-shell-sass/widgets/_buttons.scss
|
||||
gnome-shell-sass/widgets/_calendar.scss
|
||||
gnome-shell-sass/widgets/_check-box.scss
|
||||
gnome-shell-sass/widgets/_corner-ripple.scss
|
||||
gnome-shell-sass/widgets/_dash.scss
|
||||
gnome-shell-sass/widgets/_dialogs.scss
|
||||
gnome-shell-sass/widgets/_entries.scss
|
||||
gnome-shell-sass/widgets/_hotplug.scss
|
||||
gnome-shell-sass/widgets/_ibus-popup.scss
|
||||
gnome-shell-sass/widgets/_keyboard.scss
|
||||
gnome-shell-sass/widgets/_login-dialog.scss
|
||||
gnome-shell-sass/widgets/_looking-glass.scss
|
||||
gnome-shell-sass/widgets/_message-list.scss
|
||||
gnome-shell-sass/widgets/_misc.scss
|
||||
gnome-shell-sass/widgets/_network-dialog.scss
|
||||
gnome-shell-sass/widgets/_notifications.scss
|
||||
gnome-shell-sass/widgets/_osd.scss
|
||||
gnome-shell-sass/widgets/_overview.scss
|
||||
gnome-shell-sass/widgets/_panel.scss
|
||||
gnome-shell-sass/widgets/_popovers.scss
|
||||
gnome-shell-sass/widgets/_screen-shield.scss
|
||||
gnome-shell-sass/widgets/_scrollbars.scss
|
||||
gnome-shell-sass/widgets/_search-entry.scss
|
||||
gnome-shell-sass/widgets/_search-results.scss
|
||||
gnome-shell-sass/widgets/_slider.scss
|
||||
gnome-shell-sass/widgets/_switcher-popup.scss
|
||||
gnome-shell-sass/widgets/_switches.scss
|
||||
gnome-shell-sass/widgets/_tiled-previews.scss
|
||||
gnome-shell-sass/widgets/_window-picker.scss
|
||||
gnome-shell-sass/widgets/_workspace-switcher.scss
|
||||
gnome-shell-sass/widgets/_workspace-thumbnails.scss
|
||||
EOF
|
||||
Loading…
x
Reference in New Issue
Block a user