This is my literate configuration for my Eww widgets. This Org document exports to two different files, eww.yuck and eww.scss. If running, Eww will automatically reload its
configuration files after tangling.
Yuck is based on Lisp, so Emacs is really good with the the syntax highlighting, and colored parenthesis in the following code blocks.
(defpoll calendar_day :interval "5h" "date '+%d'")
(defpoll calendar_year :interval "5h" "date '+%Y'")
(defpoll music_progress :interval "1s" "mpc --host=127.0.0.2 | grep '%)' | awk '{print $4}' | tr -d '(%)'")(defvar swayreboot "pkill -x swaynag; swaynag -f 'VictorMono Nerd Font 15' --background af38db99 --text ff4de7ff --button-background 00000077 --button-text ff4de7ff --button-border-size 0 --button-gap 5 --button-padding 6 --border-bottom-size 0 -m 'Are you sure you want to reboot?' -B 'Reboot' 'loginctl reboot'")
(defvar wayreboot "pkill -x swaynag; swaynag -f 'VictorMono Nerd Font 15' --background 11e9a399 --text 21d9b3ff --button-background 00000077 --button-text 21d9b3ff --button-border-size 0 --button-gap 5 --button-padding 6 --border-bottom-size 0 -m 'Are you sure you want to reboot?' -B 'Reboot' 'loginctl reboot'")
(defvar swaypoweroff "pkill -x swaynag; swaynag -f 'VictorMono Nerd Font 15' --background ee000999 --text fe0219ff --button-background 00000077 --button-text fe0219ff --button-border-size 0 --button-gap 5 --button-padding 5 --border-bottom-size 0 -m 'Are you sure you want to shut down?' -B 'Shut Down' 'loginctl poweroff' -B 'Reboot' 'loginctl reboot'")
(defvar waypoweroff "pkill -x swaynag; swaynag -f 'VictorMono Nerd Font 15' --background d6040499 --text f61919ff --button-background 00000077 --button-text f61919 --button-border-size 0 --button-gap 5 --button-padding 5 --border-bottom-size 0 -m 'Are you sure you want to shut down?' -B 'Shut Down' 'loginctl poweroff' -B 'Reboot' 'loginctl reboot'")
(defvar swaylogout "pkill -x swaynag; swaynag -f 'VictorMono Nerd Font 15' --background 99cf0199 --text a9df11ff --button-background 00000077 --button-text a9df11ff --button-border-size 0 --button-gap 5 --button-padding 5 --border-bottom-size 0 -m 'Are you sure you want to exit the Sway session?' -B 'Exit' 'pkill -x sway'")
(defvar waylogout "pkill -x swaynag; swaynag -f 'VictorMono Nerd Font 15' --background 0cc97b88 --text 1cd98bff --button-background 00000077 --button-text 1cd98bff --button-border-size 0 --button-gap 5 --button-padding 6 --border-bottom-size 0 -m 'Are you sure you want to exit the Wayfire session?' -B 'Exit' 'pkill -x wayfire'")(defvar openhome "pcmanfm /home/babkock")
(defvar opendocuments "pcmanfm /home/babkock/Documents")
(defvar opendownloads "pcmanfm /home/babkock/Downloads")
(defvar openmusic "pcmanfm /home/babkock/Music")
(defvar openpictures "pcmanfm /home/babkock/Pictures")
(defvar openvideos "pcmanfm /home/babkock/Videos")
(defvar openmega "pcmanfm /mnt/mega")
(defvar opentbcom "pcmanfm /home/babkock/git/TBcom")(defwidget cal [?class]
(calendar :halign "center"
:valign "start"
:class {class}
:active false
:day calendar_day
:year calendar_year))
(defwidget ssd [?class]
(circular-progress
:thickness 20
:class {class}
:value {((EWW_DISK["/"].used / EWW_DISK["/"].total)) * 100}))
(defwidget hdd [?class]
(circular-progress
:thickness 20
:class {class}
:value {((EWW_DISK["/mnt/mega"].used / EWW_DISK["/mnt/mega"].total)) * 100}))(defwidget system [?class]
(circular-progress
:thickness 20
:class {class}
:value {EWW_RAM.used_mem_perc}))
(defwidget power [?class]
(circular-progress
:thickness 20
:class {class}
:value {round(EWW_CPU.avg, 0)}))
(defwidget musicprogress [?class]
(progress
:class {class}
:value music_progress
:orientation "horizontal"))
(defwidget albumart [?class]
(box :orientation "vertical"
:class {class}))(defwidget powermenu [?class]
(box :orientation "vertical"
:class {class}
:halign "center"
:space-evenly "true"
(button :class "logout" :onclick {class == "mywaypower" ? waylogout : swaylogout} :timeout 600 "")
(button :class "poweroff" :onclick {class == "mywaypower" ? waypoweroff : swaypoweroff} :timeout 600 "⏻")
(button :class "reboot" :onclick {class == "mywaypower" ? wayreboot : swayreboot} :timeout 600 "")))
(defwidget filesmenu [?class]
(box :orientation "vertical"
:class {class}
:halign "center"
:space-evenly "true"
(button :class "home" :onclick openhome :timeout 600 "")
(button :class "documents" :onclick opendocuments :timeout 600 "")
(button :class "downloads" :onclick opendownloads :timeout 600 "")
(button :class "music" :onclick openmusic :timeout 600 "")))
(defwidget othermenu [?class]
(box :orientation "vertical"
:class {class}
:halign "center"
:space-evenly "true"
(button :class "pictures" :onclick openpictures :timeout 600 "")
(button :class "videos" :onclick openvideos :timeout 600 "")
(button :class "mymega" :onclick openmega :timeout 600 "")
(button :class "tbcom" :onclick opentbcom :timeout 600 "")))(defwindow calendar
:wm-ignore: true
:monitor 1
:geometry (geometry :x "50px"
:y "40px"
:width "340px"
:height "830px"
:anchor "top right")
:stacking "bottom"
(box :orientation "vertical"
:valign "center"
(cal :class "cal")
(box :orientation "vertical" :class "diskbox"
(ssd :class "disk"))
(box :orientation "vertical" :class "megabox"
(hdd :class "mega"))))
(defwindow waycalendar
:wm-ignore: true
:monitor 2
:geometry (geometry :x "50px"
:y "40px"
:width "340px"
:height "830px"
:anchor "top right")
:stacking "bottom"
(box :orientation "vertical"
:valign "center"
(cal :class "waycal")
(box :orientation "vertical" :class "waydiskbox"
(ssd :class "waydisk"))
(box :orientation "vertical" :class "waymegabox"
(hdd :class "waymega"))))
(defwindow hycalendar
:wm-ignore: true
:monitor 2
:geometry (geometry :x "50px"
:y "40px"
:width "340px"
:height "830px"
:anchor "top right")
:stacking "bottom"
(box :orientation "vertical"
:valign "center"
(cal :class "hycal")
(box :orientation "vertical" :class "hydiskbox"
(ssd :class "hydisk"))
(box :orientation "vertical" :class "hymegabox"
(hdd :class "hymega"))))(defwindow mem
:wm-ignore: true
:monitor 0
:geometry (geometry :x "50px"
:y "40px"
:width "350px"
:height "900px"
:anchor "top right")
:stacking "bottom"
(box :orientation "vertical"
(overlay
(musicprogress :class "progress")
(albumart :class "art"))
(box :orientation "vertical" :class "cpubox"
(power :class "cpu"))
(box :orientation "vertical" :class "rambox"
(system :class "ram"))))
(defwindow waymem
:wm-ignore: true
:monitor 1
:geometry (geometry :x "50px"
:y "40px"
:width "350px"
:height "900px"
:anchor "top right")
:stacking "bottom"
(box :orientation "vertical"
(overlay
(musicprogress :class "wayprogress")
(albumart :class "art"))
(box :orientation "vertical" :class "waycpubox"
(power :class "waycpu"))
(box :orientation "vertical" :class "wayrambox"
(system :class "wayram"))))
(defwindow hymem
:wm-ignore: true
:monitor 1
:geometry (geometry :x "50px"
:y "40px"
:width "350px"
:height "900px"
:anchor "top right")
:stacking "bottom"
(box :orientation "vertical"
(overlay
(musicprogress :class "wayprogress")
(albumart :class "art"))
(box :orientation "vertical" :class "hycpubox"
(power :class "hycpu"))
(box :orientation "vertical" :class "hyrambox"
(system :class "hyram"))))(defwindow power
:wm-ignore: true
:monitor 0
:geometry (geometry :x "50px"
:y "100px"
:width "190px"
:height "500px"
:anchor "top right")
:stacking "bottom"
(powermenu :class "mypower"))
(defwindow waypower
:wm-ignore: true
:monitor 0
:geometry (geometry :x "50px"
:y "100px"
:width "190px"
:height "500px"
:anchor "top right")
:stacking "bottom"
(powermenu :class "mywaypower"))
(defwindow files
:wm-ignore: true
:monitor 0
:geometry (geometry :x "250px"
:y "80px"
:width "500px"
:height "600px"
:anchor "top right")
:stacking "bottom"
(box :orientation "horizontal"
(filesmenu :class "myfiles")
(othermenu :class "myfiles")))
(defwindow wayfiles
:wm-ignore: true
:monitor 0
:geometry (geometry :x "250px"
:y "80px"
:width "500px"
:height "600px"
:anchor "top right")
:stacking "bottom"
(box :orientation "horizontal"
(filesmenu :class "mywayfiles")
(othermenu :class "mywayfiles")))
; vim:filetype=lisp.cal, .waycal, .hycal {
background:none;
}
$yellow: rgba(228, 207, 19, 0.4);
$yellow2: #f4df23;
.vertical.calendar, .vertical.waycalendar, .vertical.hycalendar {
background:linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.5));
border-radius:84px 84px 84px 84px;
border:1px solid transparent;
margin-top:9px;
margin-bottom:9px;
margin-left:5px;
margin-right:5px;
}
.vertical.waycalendar {
box-shadow:0 0 4px 4px rgba(255, 176, 2, 0.5);
}
.vertical.calendar {
box-shadow:0 0 4px 4px rgba(228, 207, 19, 0.5);
}
.vertical.hycalendar {
box-shadow:0 0 4px 4px rgba(233, 212, 167, 0.5);
}
.waycalendar, .calendar, .hycalendar {
background:none;
}
.calendar, .calendar calendar, .waycalendar, .waycalendar calendar, .mem, .waymem, .hycalendar, .hycalendar calendar, .hymem {
font-family:"Space Mono Nerd Font";
font-size:1.15em;
color:#efefef;
border:1px solid transparent;
transition:all 0.4s ease 0s;
padding-left:1px;
padding-right:1px;
}
.calendar calendar:selected, .calendar calendar.highlight {
color:#fe0219;
}
.waycalendar calendar:selected, .waycalendar calendar.highlight {
color:#f63117;
}
.hycalendar calendar:selected, .hycalendar calendar.highlight {
color:#e6727a;
}
.calendar calendar.header {
color:#a9df11;
}
.waycalendar calendar.header {
color:#1accee;
}
.hycalendar calendar.header {
color:#c3eb59;
}
.waydiskbox {
background:radial-gradient(rgba(255, 176, 2, 0.4), rgba(0, 0, 0, 0.01));
}
.waymegabox {
background:radial-gradient(rgba(40, 137, 186, 0.4), rgba(0, 0, 0, 0.01));
}
.diskbox {
background:radial-gradient($yellow, rgba(0, 0, 0, 0.01));
}
.megabox {
background:radial-gradient(rgba(108, 102, 218, 0.4), rgba(0, 0, 0, 0.01));
}
.hydiskbox {
background:radial-gradient(rgba(233, 212, 167, 0.4), rgba(0, 0, 0, 0.01));
}
.hymegabox {
background:radial-gradient(rgba(77, 119, 213, 0.4), rgba(0, 0, 0, 0.01));
}
.disk {
color:$yellow2;
background:rgba(0, 0, 0, 0.3);
margin-top:40px;
}
.mega {
color:#5254fe;
background:rgba(0, 0, 0, 0.3);
margin-top:40px;
}
.waydisk {
color:#fef47f;
background:rgba(0, 0, 0, 0.3);
margin-top:40px;
}
.waymega {
color:#19ccee;
background:rgba(0, 0, 0, 0.3);
margin-top:40px;
}
.hymega {
color:#44bdda;
background:rgba(0, 0, 0, 0.3);
margin-top:40px;
}
.hydisk {
color:#ffee60;
background:rgba(0, 0, 0, 0.3);
margin-top:40px;
}.vertical.waymem, .vertical.mem, .vertical.hymem, .vertical.hycalendar {
background:linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.5));
border-radius:84px 84px 84px 84px;
border:1px solid transparent;
margin-top:6px;
margin-bottom:6px;
margin-left:5px;
margin-right:5px;
}
.vertical.waymem {
box-shadow:0 0 4px 4px rgba(12, 201, 123, 0.5);
}
.vertical.mem {
box-shadow:0 0 4px 4px rgba(153, 208, 2, 0.5);
}
.vertical.hymem {
box-shadow:0 0 4px 4px rgba(201, 223, 146, 0.5);
}
.waymem, .mem, .hymem {
background:none;
}
.wayrambox {
background:radial-gradient(rgba(12, 201, 123, 0.4), rgba(0, 0, 0, 0.01));
}
.waycpubox {
background:radial-gradient(rgba(206, 40, 40, 0.4), rgba(0, 0, 0, 0.01));
}
.rambox {
background:radial-gradient(rgba(153, 207, 1, 0.4), rgba(0, 0, 0, 0.01));
}
.cpubox {
background:radial-gradient(rgba(238, 0, 10, 0.4), rgba(0, 0, 0, 0.01));
}
.hyrambox {
background:radial-gradient(rgba(201, 223, 146, 0.4), rgba(0, 0, 0, 0.01));
}
.hycpubox {
background:radial-gradient(rgba(238, 75, 80, 0.4), rgba(0, 0, 0, 0.01));
}
.ram {
color:#a9df11;
background:rgba(0, 0, 0, 0.3);
margin-top:15px;
margin-bottom:15px;
}
.wayram {
color:#1cd98b;
background:rgba(0, 0, 0, 0.3);
margin-top:15px;
margin-bottom:15px;
}
.cpu {
color:#fe0219;
background:rgba(0, 0, 0, 0.3);
margin-top:15px;
margin-bottom:15px;
}
.waycpu {
color:#f63117;
background:rgba(0, 0, 0, 0.3);
margin-top:15px;
margin-bottom:15px;
}
.hyram {
color:#c3eb59;
background:rgba(0, 0, 0, 0.3);
margin-top:15px;
margin-bottom:15px;
}
.hycpu {
color:#e6727a;
background:rgba(0, 0, 0, 0.3);
margin-top:15px;
margin-bottom:15px;
}
.art {
background:url('/tmp/mpd_cover.jpg');
background-origin:padding-box;
background-size:contain;
background-repeat:no-repeat;
border-top:1.4em solid transparent;
border-left:2.2em solid transparent;
border-bottom:0.5em solid transparent;
opacity:0.9;
}
.wayprogress, .progress {
margin-top:10px;
margin-bottom:-10px;
margin-left:30px;
margin-right:30px;
}
progressbar.wayprogress > trough, progressbar.progress > trough {
background:none;
border:none;
}
progressbar.wayprogress > trough *, progressbar.wayprogress > trough * {
color:yellow;
background:linear-gradient(90deg, rgba(255, 176, 2, 0.5), rgba(255, 255, 255, 0.5));
border:none;
}
progressbar.progress > trough *, progressbar.progress > trough * {
background:linear-gradient(90deg, rgba(108, 102, 218, 0.5), rgba(255, 255, 255, 0.5));
border:none;
}.waypower, .power {
background:linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.5));
border-radius:84px 84px 84px 84px;
border:0px;
}
.vertical.waypower, .vertical.power, .horizontal.files, .horizontal.wayfiles {
background:none;
border-radius:0px;
border:none;
margin-left:14px;
margin-right:14px;
margin-top:4px;
margin-bottom:4px;
}
.mypower, .mywaypower, .myfiles, .mywayfiles {
background:none;
border:none;
border-radius:0px;
margin-left:0px;
box-shadow:none;
}
.background.power {
box-shadow:0 2px 3px 3px rgba(238, 1, 10, 0.5);
}
.power {
/* box-shadow:0 0 3px 3px rgba(218, 61, 56, 0.5); */
.poweroff {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(238, 1, 10, 0.6));
color:#fe0219;
font-size:2.2em;
border-radius:70px 70px 70px 70px;
border:1px solid transparent;
margin-top:20px;
margin-bottom:20px;
padding-left:15px;
padding-right:18px;
text-shadow:2px 2px black;
box-shadow:2px 2px rgba(0, 0, 0, 0.5);
}
.poweroff:hover {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.6));
color:white;
border:1px solid #fe0219;
}
.poweroff:active {
background:rgba(0, 0, 0, 0.5);
color:#ee0009;
border:1px solid #ee0009;
}
.logout {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(154, 208, 2, 0.6));
color:#a9df11;
font-size:2.2em;
border-radius:70px 70px 70px 70px;
border:1px solid transparent;
margin-top:20px;
margin-bottom:20px;
padding-left:15px;
padding-right:18px;
text-shadow:2px 2px black;
box-shadow:2px 2px rgba(0, 0, 0, 0.5);
}
.logout:hover {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.6));
color:white;
border:1px solid #a9df11;
}
.logout:active {
background:rgba(0, 0, 0, 0.5);
color:#99cf01;
border:1px solid #99cf01;
}
.reboot {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(175, 56, 219, 0.5));
color:#ff4de7;
font-size:2.2em;
border-radius:70px 70px 70px 70px;
border:1px solid transparent;
margin-top:20px;
margin-bottom:20px;
padding-left:15px;
padding-right:18px;
text-shadow:2px 2px black;
box-shadow:2px 2px rgba(0, 0, 0, 0.5);
}
.reboot:hover {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.6));
color:white;
border:1px solid #ff4de7;
}
.reboot:active {
background:rgba(0, 0, 0, 0.5);
color:#ef3dd6;
border:1px solid black;
}
}
.background.waypower {
box-shadow:0 0 3px 3px rgba(230, 10, 10, 0.5);
}
.waypower {
.poweroff {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(206, 40, 40, 0.6));
color:#f63117;
font-size:2.2em;
border-radius:70px 70px 70px 70px;
border:1px solid rgba(0, 0, 0, 0.4);
margin-top:20px;
margin-bottom:20px;
padding-left:15px;
padding-right:18px;
text-shadow:2px 2px black;
box-shadow:2px 2px rgba(0, 0, 0, 0.5);
}
.poweroff:hover {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.6));
color:white;
border:1px solid #f63117;
}
.poweroff:active {
background:rgba(0, 0, 0, 0.5);
color:#f63117;
border:1px solid black;
}
.logout {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(12, 201, 123, 0.6));
color:#1cd98b;
font-size:2.2em;
border-radius:70px 70px 70px 70px;
border:1px solid rgba(0, 0, 0, 0.4);
margin-top:20px;
margin-bottom:20px;
padding-left:15px;
padding-right:18px;
text-shadow:2px 2px black;
box-shadow:2px 2px rgba(0, 0, 0, 0.5);
}
.logout:hover {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.6));
color:white;
border:1px solid #1cd98b;
}
.logout:active {
background:rgba(0, 0, 0, 0.5);
color:#1cd98b;
border:1px solid black;
}
.reboot {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(40, 137, 186, 0.6));
color:#09bcde;
font-size:2.2em;
border-radius:70px 70px 70px 70px;
border:1px solid rgba(0, 0, 0, 0.4);
margin-top:20px;
margin-bottom:20px;
padding-left:15px;
padding-right:18px;
text-shadow:2px 2px black;
box-shadow:2px 2px rgba(0, 0, 0, 0.5);
}
.reboot:hover {
background:radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.6));
color:white;
border:1px solid #09bcde;
}
.reboot:active {
background:rgba(0, 0, 0, 0.5);
color:#09bcde;
border:1px solid black;
}
}.background.files, .background.wayfiles {
background:none;
}
.horizontal.files .myfiles, .horizontal.wayfiles .myfiles {
background:none;
padding-left:5px;
padding-right:5px;
margin-left:-2px;
margin-right:-2px;
}
.wayfiles, .files {
.home, .documents, .downloads, .music, .pictures, .videos, .mymega, .tbcom {
font-size:2.5em;
padding:5px;
border-radius:80px 80px 80px 80px;
padding-left:9px;
padding-right:16px;
border:1px solid rgba(0, 0, 0, 0.5);
}
}
.files {
.home, .mymega {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(228, 207, 19, 0.5));
color:#f4df23;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.4);
margin-bottom:10px;
}
.home:hover, .mymega:hover {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.5));
box-shadow:0 4px 4px 4px rgba(228, 207, 19, 0.4);
color:white;
border:1px solid #f4df23;
}
.home {
margin-top:2px;
}
.mymega {
margin-top:10px;
}
.documents {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(175, 56, 219, 0.5));
color:#ff4de7;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.4);
}
.documents:hover {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.5));
color:white;
border:1px solid #ff4de7;
box-shadow:0 4px 4px 4px rgba(175, 56, 219, 0.4);
}
.downloads, .tbcom {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(153, 207, 1, 0.5));
color:#a9df11;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.4);
}
.downloads:hover, .tbcom:hover {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.5));
color:white;
box-shadow:0 4px 4px 4px rgba(153, 207, 1, 0.5);
border:1px solid #a9df11;
}
.music {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(67, 167, 185, 0.4));
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.4);
color:#53f7f9;
margin-top:10px;
margin-bottom:10px;
}
.music:hover {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.5));
box-shadow:0 4px 4px 4px rgba(68, 168, 187, 0.5);
border:1px solid #53f7f9;
color:white;
}
.pictures {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(238, 0, 10, 0.5));
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.4);
color:#fe0219;
margin-top:2px;
margin-bottom:10px;
}
.pictures:hover {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.5));
color:white;
box-shadow:0 4px 4px 4px rgba(238, 0, 10, 0.5);
border:1px solid #fe0219;
}
.videos {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(108, 102, 218, 0.5));
color:#5254fe;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.4);
margin-top:10px;
margin-bottom:10px;
}
.videos:hover {
background:radial-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.5));
color:white;
box-shadow:0 4px 4px 4px rgba(108, 102, 218, 0.5);
border:1px solid #5254fe;
}
}
.wayfiles {
.home, .mymega {
background:radial-gradient(rgba(255, 176, 2, 0.5), rgba(0, 0, 0, 0.4));
color:#fef47f;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.4);
margin-bottom:10px;
}
.home {
margin-top:2px;
}
.mymega {
margin-top:10px;
}
.home:hover, .mymega:hover {
background:radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.4));
color:white;
box-shadow:0 4px 4px 4px rgba(255, 176, 2, 0.4);
border:1px solid #fef47f;
}
.documents {
background:radial-gradient(rgba(196, 105, 166, 0.5), rgba(0, 0, 0, 0.4));
color:#e36ab1;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.5);
margin-top:10px;
margin-bottom:10px;
}
.documents:hover {
background:radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.4));
color:white;
box-shadow:0 4px 4px 4px rgba(196, 105, 166, 0.5);
border:1px solid #e36ab1;
}
.downloads, .tbcom {
background:radial-gradient(rgba(12, 201, 123, 0.5), rgba(0, 0, 0, 0.4));
color:#1cd98b;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.5);
margin-top:10px;
margin-bottom:10px;
}
.downloads:hover, .tbcom:hover {
background:radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.4));
box-shadow:0 4px 4px 4px rgba(12, 201, 123, 0.5);
color:white;
border:1px solid #1cd98b;
}
.music {
background:radial-gradient(rgba(144, 129, 246, 0.5), rgba(0, 0, 0, 0.4));
color:#9aadf9;
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.5);
margin-top:10px;
margin-bottom:10px;
}
.music:hover {
background:radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.4));
box-shadow:0 4px 4px 4px rgba(144, 129, 246, 0.5);
color:white;
border:1px solid #9aadf9;
}
.pictures {
background:radial-gradient(rgba(206, 40, 40, 0.5), rgba(0, 0, 0, 0.4));
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.5);
margin-top:2px;
margin-bottom:10px;
color:#f63117;
}
.pictures:hover {
background:radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.4));
box-shadow:0 4px 4px 4px rgba(206, 40, 40, 0.5);
color:white;
border:1px solid #f63117;
}
.videos {
background:radial-gradient(rgba(40, 137, 186, 0.5), rgba(0, 0, 0, 0.4));
box-shadow:0 3px 3px 3px rgba(0, 0, 0, 0.5);
margin-top:10px;
margin-bottom:10px;
color:#19ccee;
}
.videos:hover {
background:radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.4));
box-shadow:0 4px 4px 4px rgba(40, 137, 186, 0.5);
color:white;
border:1px solid #19ccee;
}
}