feat: differentiate between laptop and desktop
This commit is contained in:
parent
3a59d32f55
commit
5bb44594bb
50 changed files with 3432 additions and 1 deletions
665
eww_laptop/eww.scss
Normal file
665
eww_laptop/eww.scss
Normal file
|
|
@ -0,0 +1,665 @@
|
|||
/** EWW.SCSS
|
||||
Created by saimoom **/
|
||||
* {
|
||||
all: unset;
|
||||
font-family: feather;
|
||||
font-family: DaddyTimeMono Nerd Font;
|
||||
}
|
||||
|
||||
/** General **/
|
||||
.bar_class {
|
||||
background-color: #0f0f17;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.module {
|
||||
margin: 0px 0px 0px 0px;
|
||||
border-radius: 10px 10px 0px 10px;
|
||||
}
|
||||
|
||||
/** tooltip!! **/
|
||||
tooltip.background {
|
||||
background-color: #0f0f17;
|
||||
font-size: 14;
|
||||
border-radius: 10px;
|
||||
color: #bfc9db;
|
||||
}
|
||||
|
||||
tooltip label {
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
/** Widgets **/
|
||||
|
||||
.clock_time_sep {
|
||||
font-size: 20;
|
||||
color: #bfc9db;
|
||||
margin: 0px 0px 1px 0px;
|
||||
}
|
||||
.clock_time_class,
|
||||
.clock_minute_class {
|
||||
font-size: 24;
|
||||
}
|
||||
.clock_date_class {
|
||||
font-size: 21;
|
||||
margin: 0px 5px 0px 5px;
|
||||
color: #d7beda;
|
||||
}
|
||||
.clock_minute_class {
|
||||
margin: 0px 5px 0px 2px;
|
||||
color: #bfc9db;
|
||||
}
|
||||
.clock_time_class {
|
||||
color: #bfc9db;
|
||||
font-weight: bold;
|
||||
margin: 0px 0px 0px 8px;
|
||||
}
|
||||
|
||||
.membar {
|
||||
color: #e0b089;
|
||||
background-color: #38384d;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.batbar {
|
||||
color: #afbea2;
|
||||
background-color: #38384d;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.brightbar trough highlight {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#e4c9af 30%,
|
||||
#f2cdcd 50%,
|
||||
#e0b089 100% * 50
|
||||
);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.brightbar scale trough {
|
||||
all: unset;
|
||||
box-shadow: 0 6px 5px 2px #06060b;
|
||||
background-color: #232232;
|
||||
border-radius: 24px;
|
||||
min-height: 10px;
|
||||
min-width: 100px;
|
||||
margin: 0px -15px 5px 0px;
|
||||
}
|
||||
.volbar trough highlight {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#afcee0 30%,
|
||||
#a1bdce 50%,
|
||||
#77a5bf 100% * 50
|
||||
);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.module_app_text {
|
||||
font-size: 23;
|
||||
margin: 2px 0px 0px 0px;
|
||||
}
|
||||
.bright_icon {
|
||||
font-size: 22;
|
||||
color: #e4c9af;
|
||||
margin: 0px 10px 0px -10px;
|
||||
}
|
||||
.bright_icon_overlay {
|
||||
font-size: 28;
|
||||
color: #e4c9af;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin: 0px 27px 0px 3px;
|
||||
}
|
||||
.volume_icon {
|
||||
font-size: 22;
|
||||
color: #a1bdce;
|
||||
margin: 0px 5px 0px 0px;
|
||||
}
|
||||
.module-wif {
|
||||
font-size: 22;
|
||||
color: #a1bdce;
|
||||
border-radius: 100%;
|
||||
margin: 0px 10px 0px 0px;
|
||||
}
|
||||
.module_essid {
|
||||
font-size: 18;
|
||||
color: #a1bdce;
|
||||
margin: 0px 5px 0px -1px;
|
||||
}
|
||||
|
||||
.iconmem {
|
||||
font-size: 23;
|
||||
margin: 4px -3px 4px 0px;
|
||||
color: #e0b089;
|
||||
}
|
||||
.mem_padding {
|
||||
margin: 10px;
|
||||
}
|
||||
.iconbat {
|
||||
font-size: 23;
|
||||
color: #afbea2;
|
||||
}
|
||||
|
||||
.separ {
|
||||
color: #3e424f;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.mem_module {
|
||||
background-color: #0f0f17;
|
||||
border-radius: 16px;
|
||||
margin: 0px 10px 0px 0px;
|
||||
}
|
||||
.bat_module {
|
||||
background-color: #0f0f17;
|
||||
border-radius: 16px;
|
||||
margin: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
scale trough {
|
||||
all: unset;
|
||||
background-color: #22242b;
|
||||
box-shadow: 0 2px 3px 2px #06060b;
|
||||
border-radius: 16px;
|
||||
min-height: 10px;
|
||||
min-width: 70px;
|
||||
margin: 0px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.works {
|
||||
font-size: 27px;
|
||||
font-weight: normal;
|
||||
margin: 0px 0px 0px 15px;
|
||||
background-color: #0f0f17;
|
||||
}
|
||||
|
||||
.0,
|
||||
.01,
|
||||
.02,
|
||||
.03,
|
||||
.04,
|
||||
.05,
|
||||
.06,
|
||||
.011,
|
||||
.022,
|
||||
.033,
|
||||
.044,
|
||||
.055,
|
||||
.066 {
|
||||
margin: 0px 10px 0px 0px;
|
||||
}
|
||||
|
||||
/* Unoccupied */
|
||||
.0 {
|
||||
color: #3e424f;
|
||||
}
|
||||
|
||||
/* Occupied */
|
||||
.01,
|
||||
.02,
|
||||
.03,
|
||||
.04,
|
||||
.05,
|
||||
.06 {
|
||||
color: #bfc9db;
|
||||
}
|
||||
|
||||
/* Focused */
|
||||
.011,
|
||||
.022,
|
||||
.033,
|
||||
.044,
|
||||
.055,
|
||||
.066 {
|
||||
color: #a1bdce;
|
||||
}
|
||||
|
||||
.song_cover_art {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
margin: 10px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.song {
|
||||
color: #a1bdce;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 3px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.song_btn_play {
|
||||
color: #a1bdce;
|
||||
font-size: 28px;
|
||||
margin: 3px 0px 0px 5px;
|
||||
}
|
||||
|
||||
.song_btn_prev,
|
||||
.song_btn_next {
|
||||
color: #bfc9db;
|
||||
font-size: 24px;
|
||||
margin: 3px 0px 0px 5px;
|
||||
}
|
||||
// Calendar
|
||||
.cal {
|
||||
border-radius: 10px;
|
||||
background-color: #0f0f17;
|
||||
font-family: JetBrainsMono Nerd Font;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
|
||||
.cal-in {
|
||||
padding: 0px 10px 0px 10px;
|
||||
color: #bfc9db;
|
||||
|
||||
.cal {
|
||||
&.highlight {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
calender {
|
||||
color: #bfc9db;
|
||||
}
|
||||
calendar:selected {
|
||||
color: #a1bdce;
|
||||
}
|
||||
|
||||
calendar.header {
|
||||
color: #a1bdce;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
calendar.button {
|
||||
color: #afbea2;
|
||||
}
|
||||
|
||||
calendar.highlight {
|
||||
color: #a1bdce;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
calendar:indeterminate {
|
||||
color: #bfc9db;
|
||||
}
|
||||
|
||||
.sys_sep {
|
||||
color: #38384d;
|
||||
font-size: 18;
|
||||
margin: 0px 10px 0px 10px;
|
||||
}
|
||||
.sys_text_bat_sub,
|
||||
.sys_text_mem_sub {
|
||||
font-size: 16;
|
||||
color: #bbc5d7;
|
||||
margin: 5px 0px 0px 25px;
|
||||
}
|
||||
.sys_text_bat,
|
||||
.sys_text_mem {
|
||||
font-size: 21;
|
||||
font-weight: bold;
|
||||
margin: 14px 0px 0px 25px;
|
||||
}
|
||||
.sys_icon_bat,
|
||||
.sys_icon_mem {
|
||||
font-size: 30;
|
||||
margin: 30px;
|
||||
}
|
||||
.sys_win {
|
||||
border-radius: 10px;
|
||||
background-color: #0f0f17;
|
||||
}
|
||||
.sys_bat {
|
||||
color: #afbea2;
|
||||
background-color: #38384d;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.sys_mem {
|
||||
color: #e4c9af;
|
||||
background-color: #38384d;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.sys_icon_bat,
|
||||
.sys_text_bat {
|
||||
color: #afbea2;
|
||||
}
|
||||
.sys_icon_mem,
|
||||
.sys_text_mem {
|
||||
color: #e4c9af;
|
||||
}
|
||||
.sys_bat_box {
|
||||
border-radius: 16px;
|
||||
margin: 15px 10px 10px 20px;
|
||||
}
|
||||
.sys_mem_box {
|
||||
border-radius: 16px;
|
||||
margin: 10px 10px 15px 20px;
|
||||
}
|
||||
|
||||
.music_pop {
|
||||
background-color: #0f0f17;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.music_cover_art {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100px;
|
||||
box-shadow: 5px 5px 5px 5px #06060b;
|
||||
min-width: 170px;
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.music {
|
||||
color: #a1bdce;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0px 0px -15px;
|
||||
}
|
||||
|
||||
.music_artist {
|
||||
color: #bbc5d7;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.music_btn_prev,
|
||||
.music_btn_play,
|
||||
.music_btn_next {
|
||||
font-family: Iosevka Nerd Font;
|
||||
}
|
||||
.music_btn_prev {
|
||||
color: #bbc5d7;
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
.music_btn_play {
|
||||
color: #a1bdce;
|
||||
font-size: 48px;
|
||||
font-weight: normal;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
.music_btn_next {
|
||||
color: #bbc5d7;
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.music_bar scale trough highlight {
|
||||
all: unset;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#afcee0 30%,
|
||||
#a1bdce 50%,
|
||||
#77a5bf 100% * 50
|
||||
);
|
||||
border-radius: 24px;
|
||||
}
|
||||
.music_bar scale trough {
|
||||
all: unset;
|
||||
background-color: #232232;
|
||||
box-shadow: 0 6px 5px 2px #06060b;
|
||||
border-radius: 24px;
|
||||
min-height: 13px;
|
||||
min-width: 190px;
|
||||
margin: -10px 10px 20px 0px;
|
||||
}
|
||||
|
||||
.audio-box {
|
||||
background-color: #0f0f17;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.speaker_icon {
|
||||
background-size: cover;
|
||||
background-image: url("images/speaker.png");
|
||||
background-position: center;
|
||||
min-height: 40px;
|
||||
min-width: 45px;
|
||||
margin: 10px 10px 5px 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.speaker_text {
|
||||
color: #a1bdce;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin: 5px 15px 0px 15px;
|
||||
}
|
||||
.bright_text {
|
||||
color: #a1bdce;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin: 5px 15px 0px 25px;
|
||||
}
|
||||
|
||||
.change_audio_box {
|
||||
margin: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.change_audio {
|
||||
color: #a1bdce;
|
||||
margin: 0px 50px 0px 50px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.speaker_bar scale trough highlight {
|
||||
all: unset;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#afcee0 30%,
|
||||
#a1bdce 50%,
|
||||
#77a5bf 100% * 50
|
||||
);
|
||||
border-radius: 24px;
|
||||
}
|
||||
.speaker_bar scale trough {
|
||||
all: unset;
|
||||
background-color: #232232;
|
||||
box-shadow: 0 6px 5px 2px #06060b;
|
||||
border-radius: 24px;
|
||||
min-height: 10px;
|
||||
min-width: 100px;
|
||||
margin: 0px 0px 5px 0px;
|
||||
}
|
||||
|
||||
.mic_icon {
|
||||
background-size: cover;
|
||||
background-image: url("images/mic.png");
|
||||
background-position: center;
|
||||
min-height: 40px;
|
||||
min-width: 45px;
|
||||
margin: 5px 20px 20px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.mic_text {
|
||||
color: #a1bdce;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.mic_bar scale trough highlight {
|
||||
all: unset;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#afcee0 30%,
|
||||
#a1bdce 50%,
|
||||
#77a5bf 100% * 50
|
||||
);
|
||||
border-radius: 24px;
|
||||
}
|
||||
.mic_bar scale trough {
|
||||
all: unset;
|
||||
box-shadow: 0 6px 5px 2px #06060b;
|
||||
background-color: #232232;
|
||||
border-radius: 24px;
|
||||
min-height: 10px;
|
||||
min-width: 100px;
|
||||
margin: 6px 0px 20px 0px;
|
||||
}
|
||||
|
||||
.audio_sep {
|
||||
color: #38384d;
|
||||
font-size: 18;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
//cockpit stuff
|
||||
|
||||
.cockpit_class {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.cockpit_clock {
|
||||
padding: 0px 30px 0px 30px;
|
||||
}
|
||||
|
||||
.cockpit_box {
|
||||
background-color: #06060b;
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
padding: 0px 5px 0px 5px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.cockpit_button_shutdown {
|
||||
color: #FF1111;
|
||||
font-size: 40px;
|
||||
margin: 0px 5px -30px 5px;
|
||||
}
|
||||
|
||||
.cockpit_button_sleep {
|
||||
color: #0055FF;
|
||||
font-size: 40px;
|
||||
margin: 0px 5px -30px 5px;
|
||||
}
|
||||
|
||||
.cockpit_button_restart {
|
||||
color: #11FF11;
|
||||
font-size: 40px;
|
||||
margin: 0px 5px -30px 5px;
|
||||
}
|
||||
|
||||
.song_info {
|
||||
margin: -50px 0px 0px 0px;
|
||||
font-size: 20px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.album_cover {
|
||||
margin: -60px 10px 20px 10px;
|
||||
padding: 0px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cockpit_button_settings {
|
||||
color: #d35d6e;
|
||||
font-size: 35px;
|
||||
margin: -30px 5px 0px 5px;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
font-size: 80px;
|
||||
margin: 10px 0px 35px 25px;
|
||||
font-family: Iosevka;
|
||||
}
|
||||
|
||||
.weather-stat {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #d35d6e;
|
||||
margin: -20px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.temperature {
|
||||
color: grey;
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
margin: 0px 0px 0px 20px;
|
||||
}
|
||||
.weather-quote {
|
||||
margin: 30px -5px 0px 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.weather-quote-head,
|
||||
.weather-quote-tail {
|
||||
color: grey;
|
||||
font-size: 18px;
|
||||
margin: 10px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.cockpit_clock_left {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: #d35d6e;
|
||||
margin: 5px -20px -30px 0px;
|
||||
}
|
||||
|
||||
.cockpit_clock_right {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: #d35d6e;
|
||||
margin: 5px 0px -30px -20px;
|
||||
}
|
||||
|
||||
.cockpit_date {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: #d35d6e;
|
||||
margin: -30px -20px 0px -20px;
|
||||
}
|
||||
|
||||
.cockpit_clock_sep {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #d35d6e;
|
||||
margin: 0px -20px -30px -20px;
|
||||
}
|
||||
|
||||
.cockpit_docs {
|
||||
color: #FF1111;
|
||||
font-size: 30px;
|
||||
margin: 10px 0px -10px 0px;
|
||||
}
|
||||
|
||||
.cockpit_pics {
|
||||
color: #11FF11;
|
||||
font-size: 30px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.cockpit_gits {
|
||||
color: #0055FF;
|
||||
font-size: 30px;
|
||||
margin: -20px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.cockpit_sep_bottom {
|
||||
color: #38384d;
|
||||
font-size: 18;
|
||||
margin: -10px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.cockpit_sep_top {
|
||||
color: #38384d;
|
||||
font-size: 18;
|
||||
margin: 0px 0px -10px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue