DESAFIO: criar um visual Linux igual ao conceito do Windows9

[Luis Cardoso]

@Luís, esse painel superior aceita imagens como background, certo? Experimenta pôr esta imagem como background, que pus em anexo neste post!

Digamos que o LxPanel tem alguns problemas com imagens transparentes... Só experimentando com o Xfce-Panel ou com o Mate-Panel...

É pena

Amanhã experimento com outros painéis... Hoje já não dá, estou atrasado para um encontro com a Almofada no Vale dos Lençóis...

[Claudio Novais]

Fico à espera!

Entretanto, gostava de ver a participação do Yury Rodrigues, acho que ele conseguirá também ter bons resultados!

[Alessandra Vianna]

Luís! Ele faz isso, aposto!

Windows 9 Mockup

• Sistema Operativo: Debian GNU/Linux 7.2 (wheezy)
• Tema: zoncolorFlat
• Ambiente Gráfico: Openbox
• Ícones: Numix-uTouch
• Wallpaper: Um dos que vem com o Mate
• Outros:
  
  • Openbox: Murrina-Tangoesque;
  • Compton: compton -cC -i 0.70 -e 0.30 -m 0.85 -b;
  • LxPanel: Em cima e ao lado;

---

Obs.: Feito assim às 3 pancadas e em cima do joelho!

ADOREI!!! Apesar do tema de ícones não ser tão semelhante aos do Windows, acho que ficou bastante parecido! Estou a esperar um ambiente mais aperfeiçoado! Como dizemos por aqui no Brasil: "mete bronca!".

[nuno_nunes]

O windows está a ficar uma copia do macos

[hailton]

Claudio, antes de anunciarem a versão RC do Windows 8 existia muitos mockups não oficiais que mais pareciam uma modificação do Windows 7, sem o Metro. Dessa vez é uma modificação do Ubuntu, porém muito feia.

[yuryrodrigues]

Ficou excelente!

[yuryrodrigues]

Windows 9

• Sistema Operativo: Manjaro 0.8.7 Ascella
• Tema: zoncolorXtra-RedmondModern
• Ambiente Gráfico: Openbox
• Ícones: Trevilla-TilesIcons
• Wallpaper: Mar
• Outros:
  
  • Openbox: Adwaita-openbox (Modificado):
    Spoiler:

    Código: Selecionar todos

    !! Onyx by Dana Jansens
!! inspired by "Carbon" by p0ng, and the ever so popular Vista glass look

!! Menu border
menu.border.width: 1
menu.border.color: #A0A0A0

!! Menu background
menu.items.bg: flat
menu.items.bg.color: #FFFFFF

!! Menu text
menu.items.text.color: #313739
menu.items.justify: left
menu.items.disabled.text.color: #C1C1C1

!! Menu headers
menu.title.bg: flat
menu.title.bg.color: #FFFFFF
menu.title.text.color: #313739
menu.title.text.justify: center

!! Selected menu item
menu.items.active.bg: flat
menu.items.active.bg.color: #4A90D9
menu.items.active.text.color: #FFFFFF

!! Titlebar
window.active.title.bg: flat
window.active.title.bg.color: #8d8d8b
window.inactive.title.bg: flat
window.inactive.title.bg.color: #8d8d8b

!! Titlebar text
window.label.text.justify: center
window.active.label.bg: parentrelative
window.active.label.text.color: #FFFFFF
window.inactive.label.bg: parentrelative
window.inactive.label.text.color: #FFFFF

!! Window buttons
window.*.button.*.bg: parentrelative
#window.active.button.*.hover.bg: flat splitvertical gradient
window.inactive.button.*.hover.bg: parentrelative
window.*.button.*.pressed.bg: flat splitvertical gradient border

#window.active.button.*.hover.bg.color: #DDDDDD
#window.active.button.*.hover.bg.colorTo: #DDDDDD
#window.active.button.*.hover.bg.color.splitTo: #FFFFFF
#window.active.button.*.hover.bg.colorTo.SplitTo: #FFFFFF
window.active.button.*.hover.image.color: #000000
#window.active.button.*.hover.bg.border.color: #A0A0A0

window.active.button.*.pressed.bg.color: #91918f
window.active.button.*.pressed.bg.colorTo: #91918f
window.active.button.*.pressed.bg.color.splitTo: #91918f
window.active.button.*.pressed.bg.colorTo.SplitTo: #91918f
window.active.button.*.pressed.image.color: #000000
window.active.button.*.pressed.bg.border.color: #91918f
window.inactive.button.*.pressed.bg.color: #91918f
window.inactive.button.*.pressed.bg.colorTo: #91918f
window.inactive.button.*.pressed.bg.color.splitTo: #91918f
window.inactive.button.*.pressed.bg.colorTo.SplitTo: #91918f
window.inactive.button.*.pressed.image.color: #000000
window.inactive.button.*.pressed.bg.border.color: #91918f

window.active.button.*.image.color: #FFFFFF
window.active.button.disabled.image.color: #C1C1C1
window.inactive.button.*.image.color: #FFFFF
window.inactive.button.disabled.image.color: #C1C1C1

!! Borders
window.active.border.color: #FFFFFF
window.inactive.border.color: #FFFFFF
window.*.title.separator.color: #FFFFFF
border.width: 1
padding.width: 2
window.handle.width: 0
window.active.client.color:  #EDEDED
window.inactive.client.color:  #EDEDED
window.client.padding.width: 0
window.client.padding.height: 1
menu.overlap: 0

!! Font shadows

!! On-screen displays
osd.border.width: 0
osd.order.color: #313739
osd.bg: flat
osd.bg.color: #313739
osd.bg.colorTo: #313739
osd.label.text.color: #FFFFFF
osd.hilight.bg: raised
osd.unhilight.bg: flat
osd.hilight.bg.color: #4A90D9
osd.unhilight.bg.color: #747474

  • Compton:
    Spoiler:

    Código: Selecionar todos

    # Shadow
shadow = true;         # Enabled client-side shadows on windows.
no-dock-shadow = true;      # Avoid drawing shadows on dock/panel windows.
no-dnd-shadow = true;      # Don't draw shadows on DND windows.
clear-shadow = true;      # Zero the part of the shadow's mask behind the
            # window. Fix some weirdness with ARGB windows.
shadow-radius = 7;      # The blur radius for shadows. (default 12)
shadow-offset-x = -10;      # The left offset for shadows. (default -15)
shadow-offset-y = -10;      # The top offset for shadows. (default -15)
shadow-opacity = 0.3;      # The translucency for shadows. (default .75)
# shadow-red = 0.0;      # Red color value of shadow. (0.0 - 1.0, defaults to 0)
# shadow-green = 0.0;      # Green color value of shadow. (0.0 - 1.0, defaults to 0)
# shadow-blue = 0.0;      # Blue color value of shadow. (0.0 - 1.0, defaults to 0)
shadow-exclude = [ "g:si:xfce4-noti","n:e:Notification","g:si:conky" ];   # Exclude conditions for shadows.
# shadow-exclude = "n:e:Notification";
shadow-ignore-shaped = true;   # Avoid drawing shadow on all shaped windows
            # (see also: --detect-rounded-corners)

# Opacity
menu-opacity = 0.95;         # The opacity for menus. (default 1.0)
inactive-opacity = 0.70;         # Default opacity of inactive windows. (0.0 - 1.0)
active-opacity = 1.0;         # Default opacity for active windows. (0.0 - 1.0)
frame-opacity = 0.75;         # Opacity of window titlebars and borders. (0.1 - 1.0)
inactive-opacity-override = false;   # Let inactive opacity set by 'inactive-opacity' overrides
               # value of _NET_WM_OPACITY. Bad choice.
alpha-step = 0.06;         # XRender backend: Step size for alpha pictures. Increasing
               # it may result in less X resource usage,
               # Yet fading may look bad.
# inactive-dim = 0.2;         # Dim inactive windows. (0.0 - 1.0)
# inactive-dim-fixed = true;      # Do not let dimness adjust based on window opacity.
# blur-background = true;      # Blur background of transparent windows.
               # Bad performance with X Render backend.
               # GLX backend is preferred.
# blur-background-frame = true;      # Blur background of opaque windows with transparent
               # frames as well.
blur-background-fixed = false;      # Do not let blur radius adjust based on window opacity.
blur-background-exclude = [ "window_type = 'dock'", "window_type = 'desktop'" ];
               # Exclude conditions for background blur.

# Fading
fading = true;         # Fade windows during opacity changes.
#fade-delta = 30;      # The time between steps in a fade in milliseconds. (default 10).
fade-in-step = 0.06;      # Opacity change between steps while fading in. (default 0.028).
fade-out-step = 0.06;      # Opacity change between steps while fading out. (default 0.03).
# no-fading-openclose = true;   # Avoid fade windows in/out when opening/closing.
fade-exclude = [ ];      # Exclude conditions for fading.

# Other
backend = "glx"      # Backend to use: "xrender" or "glx". GLX backend is typically
            # much faster but depends on a sane driver.
mark-wmwin-focused = true;   # Try to detect WM windows and mark them as active.
mark-ovredir-focused = true;   # Mark all non-WM but override-redirect windows active (e.g. menus).
use-ewmh-active-win = true;   # Use EWMH _NET_WM_ACTIVE_WINDOW to determine which window is focused
            # instead of using FocusIn/Out events. Usually more reliable but
            # depends on a EWMH-compliant WM.
detect-rounded-corners = true;   # Detect rounded corners and treat them as rectangular when --shadow-ignore-shaped is on.
detect-client-opacity = true;   # Detect _NET_WM_OPACITY on client windows, useful for window
            # managers not passing _NET_WM_OPACITY of client windows to frame
            # Unredirect all windows if a full-screen opaque window is detected, to maximize performance for full-screen windows, like games.
# Known to cause flickering when redirecting/unredirecting windows.
# windows.
refresh-rate = 0;      # For --sw-opti: Specify refresh rate of the screen. 0 for auto.
vsync = "none";         # "none", "drm", "opengl", "opengl-oml", "opengl-swc", "opengl-mswc"
            # See man page for more details.
dbe = false;         # Enable DBE painting mode. Rarely needed.
paint-on-overlay = true;   # Painting on X Composite overlay window. Recommended.
sw-opti = false;      # Limit compton to repaint at most once every 1 / refresh_rate.
            # Incompatible with certain VSync methods.
unredir-if-possible = true;   # Unredirect all windows if a full-screen opaque window is
            # detected, to maximize performance for full-screen windows.
focus-exclude = [ ];      # A list of conditions of windows that should always be considered
            # focused.
detect-transient = true;   # Use WM_TRANSIENT_FOR to group windows, and consider windows in
            # the same group focused at the same time.
detect-client-leader = false;   # Use WM_CLIENT_LEADER to group windows.
invert-color-include = [ ];   # Conditions for windows to be painted with inverted color.

# GLX backend         # GLX backend fine-tune options. See man page for more info.
glx-no-stencil = true;   # Recommended.
glx-copy-from-front = false;   # Useful with --glx-swap-method,
# glx-use-copysubbuffermesa = true; # Recommended if it works. Breaks VSync.
# glx-no-rebind-pixmap = true;   # Recommended if it works.   
glx-swap-method = "undefined";   # See man page.

# Window type settings
wintypes:
{
  tooltip = { fade = true; shadow = false; opacity = 0.75; focus = true; };
  # fade: Fade the particular type of windows.
  # shadow: Give those windows shadow
  # opacity: Default opacity for the type of windows.
  # focus: Whether to always consider windows of this type focused.
};

  • LxPanel: Barra do Topo;
  • Tint2: Dock lateral:
    Spoiler:

    Código: Selecionar todos

    # Tint2 config file
# Generated by tintwizard (http://code.google.com/p/tintwizard/)
# For information on manually configuring tint2 see http://code.google.com/p/tint2/wiki/Configure

# Background definitions
# ID 1
rounded = 0
border_width = 0
background_color = #FFFFFF 0
border_color = #828282 0

# ID 2
rounded = 1
border_width = 0
background_color = #D8D8D8 29
border_color = #D8D8D8 29

# ID 3
rounded = 1
border_width = 0
background_color = #000000 0
border_color = #000000 0

# ID 4
rounded = 1
border_width = 1
background_color = #888888 20
border_color = #ED2323 60

# ID 5
rounded = 0
border_width = 1
background_color = #000000 0
border_color = #000000 0

# ID 6
rounded = 0
border_width = 1
background_color = #D8D8D8 7
border_color = #D8D8D8 0

# ID 7
rounded = 3
border_width = 0
background_color = #222222 89
border_color = #222222 89

# ID 8
rounded = 1
border_width = 1
background_color = #888888 20
border_color = #888888 20

# ID 9
rounded = 1
border_width = 1
background_color = #888888 0
border_color = #FFFFFF 60

# Panel
panel_items = T
panel_monitor = all
panel_position = top left vertical
panel_size = 100% 37
panel_margin = 18 40
panel_padding = 0 0 1
panel_dock = 0
wm_menu = 1
panel_layer = bottom
panel_background_id = 1

# Panel Autohide
autohide = 0
autohide_show_timeout = 0.3
autohide_hide_timeout = 1.5
autohide_height = 6
strut_policy = follow_size

# Launchers
launcher_padding = 5 0 5
launcher_background_id = 3
launcher_icon_size = 35
launcher_item_app = /usr/share/applications/google-chrome.desktop
#launcher_item_app = /usr/share/applications/Thunar.desktop
#launcher_item_app = /usr/share/applications/terminator.desktop
launcher_item_app = /usr/share/applications/gedit.desktop

# Taskbar
taskbar_mode = single_desktop
taskbar_padding = 0 0 3
taskbar_background_id = 5
taskbar_active_background_id = 1

# Tasks
urgent_nb_of_blink = 20
task_icon = 1
task_text = 0
task_centered = 1
task_maximum_size = 35 35
task_padding = 0 0
task_background_id = 9
task_active_background_id = 9
task_urgent_background_id = 4
task_iconified_background_id = 9

# Task Icons
task_icon_asb = 100 0 0
task_active_icon_asb = 100 0 0
task_urgent_icon_asb = 100 0 0
task_iconified_icon_asb = 100 0 0

# Fonts
task_font = Liberation Sans 06_55 6
task_font_color = #828282 60
task_active_font_color = #828282 100
task_urgent_font_color = #FFFFFF 100
task_iconified_font_color = #D8D8D8 60
font_shadow = 0

# System Tray
#systray = 0
#systray_padding = 4 2 0
#systray_sort = left2right
#systray_background_id = 0
#systray_icon_size = 0
#systray_icon_asb = 100 0 0

# Clock
#time1_format = %H%n%M
#time1_font = Liberation Mono 10
#clock_font_color = #CCCCCC 100
#clock_padding = 10 4
#clock_background_id = 0
#clock_lclick_command = orage -t
#clock_rclick_command = orage -t

# Tooltips
tooltip = 1
tooltip_padding = 2 2
tooltip_show_timeout = 0.0
tooltip_hide_timeout = 0.0
tooltip_background_id = 7
tooltip_font = Liberation Sans normal 9.0
tooltip_font_color = #D8D8D8 100

# Mouse
mouse_middle = none
mouse_right = close
mouse_scroll_up = toggle
mouse_scroll_down = iconify

# Battery
battery = 0
battery_low_status = 20
battery_low_cmd = notify-send "battery low"
battery_hide = 96
bat1_font = Liberation Sans 10
bat2_font = Liberation Sans 8
battery_font_color = #FFFFFF 100
battery_padding = 2 0
battery_background_id = 0

# End of config

[Rafael Schonberg]

Até agora este é o melhor. Muito Bonito.

[Claudio Novais]

Simplesmente: espetacular @Yury! Depositei confiança no seu trabalho e fiz muito bem! Ficou espetacular mesmo! entretanto, será que você pode experimentar esta dica que eu disse? Ou será que o problema é o mesmo do Luís?

Já agora, que tal aplicar uma fontes mais "Metro"? Por exemplo as fontes OpenSans que vêm no Ubuntu, na versão Light devem dar um ar mais metro que o atual!

Entretanto, o Tint2 será que permite adicionar sombras/luminosidades às janelas abertas? Nem que seja aplicar uma imagem PNG, que simule o fundo! Acho que o efeito aplicado no mockup para as janelas abertas está muito bom mesmo (imagem abaixo)!

[Luis Cardoso]

Windows 9

Ainda diz que o meu ficou excelente... O seu é que está

---

vou só lanchar e já volto ao ataque...