123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442 |
- /********
- * Gala *
- *******/
- .gala-notification {
- border-width: 0;
- border-radius: 2px;
- color: white;
- border: 1px solid $base_color;
- background-color: $base_color;
- .title,
- .label {
- color: $fg_color;
- }
- }
- .gala-button {
- padding: 3px;
- color: $base_color;
- border: none;
- border-radius: 50%;
- background-image: linear-gradient(to bottom,
- #7e7e7e,
- #3e3e3e
- );
- box-shadow: inset 0 0 0 1px transparentize(white, 0.02),
- inset 0 1px 0 0 transparentize(white, 0.07),
- inset 0 -1px 0 0 transparentize(white, 0.01),
- 0 0 0 1px transparentize(black, 0.40),
- 0 3px 6px transparentize(black, 0.16),
- 0 3px 6px transparentize(black, 0.23);
- text-shadow: 0 1px 1px transparentize(black, 0.6);
- }
- /**********
- * Notify *
- *********/
- .notify {
- /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/
- border-radius: 5px;
- border: 1px solid transparentize(black, 0.30);
- background-color: transparentize($base_color, 0.95);
- .low {}
- .critical {}
- }
- /***************
- * SwitchBoard *
- ***************/
- .category-label {
- font-weight: bold;
- color: $fg_color;
- }
- /*************
- * Slingshot *
- ************/
- .button.app {
- border: none;
- border-radius: 0;
- box-shadow: none;
- background-image: none;
- .app {
- &:hover{
- border-radius: 8px;
- border: none;
- background-color: transparentize($selected_bg_color, 0.7);
- color: white;
- }
- &:focus{
- /*background-color: transparentize(black, 0.20);*/
- }
- }
- }
- .search-item {
- border-radius: 0;
- border: none;
- color: $fg_color;
- background: none;
- &:hover,
- &:focus {
- border-radius: 0;
- background-color: transparentize($selected_bg_color, 0.7);
- color: $selected_fg_color;
- }
- }
- .search-entry-large,
- .search-entry-large:focus {
- border: none;
- font-size: 18px;
- font-weight: 300;
- background-image: none;
- background: none;
- box-shadow: none;
- border-radius: 0;
- }
- .search-category-header {
- font-weight: bold;
- color: $fg_color;
- }
- /*********
- * Panel *
- ********/
- .panel {
- background-color: transparent;
- transition: all 100ms ease-in-out;
- color: #fff;
- &.maximized {
- background-color: #000;
- }
- &.translucent {
- background-color: transparentize(black, 0.5);
- }
- &.color-light.translucent {
- background-color: transparentize($panel_fg_color, 0.15);
- }
- }
- menubar.panel,
- .panel menubar {
- box-shadow: none;
- border: none;
- }
- .composited-indicator {
- > revealer,
- > revealer image,
- > revealer label,
- > revealer spinner {
- color: #fff;
- font-weight: bold;
- text-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
- transition: all 200ms ease-in-out;
- -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
- }
- > revealer image:first-child + label {
- margin-left: 5px;
- }
- }
- .panel.color-light .composited-indicator {
- > revealer,
- > revealer image,
- > revealer label,
- > revealer spinner {
- color: transparentize(black, 0.4);
- text-shadow: 0 1px transparentize(white, 0.9);
- -gtk-icon-shadow: 0 1px transparentize(white, 0.9);
- }
- }
- /**************
- * Calculator *
- **************/
- PantheonCalculatorMainWindow {
- border-radius: 0 0 4px 4px;
- .window-frame {
- border-radius:3px;
- }
- }
- /*********
- * Cards *
- *********/
- .deck {
- background-color: darken($bg_color, 8%);
- }
- .card {
- background-color: $base_color;
- border: none;
- box-shadow: 0 0 0 1px transparentize(black, 0.95),
- 0 3px 3px transparentize(black, 0.8);
- transition: all 150ms ease-in-out;
- }
- .card.collapsed {
- background-color: darken($base_color, 5%);
- box-shadow: 0 0 0 1px transparentize(black, 0.95),
- 0 1px 2px transparentize(black, 0.8);
- }
- /*********
- * Noise *
- *********/
- NoiseLibraryWindow {
- border-radius: 0 0 4px 4px;
- .action-bar {
- border-radius: 0 0 4px 4px;
- }
- .window-frame {
- border-radius:3px;
- }
- }
- /********
- * Snap *
- ********/
- SnapMainWindow,
- SnapSnapWindow {
- .take-button {
- border-radius: 0;
- }
- }
- /*******************
- * Photos/Shotwell *
- *******************/
- DirectWindow,
- LibraryWindow {
- .the-button-in-the-combobox {
- background: none;
- }
- }
- .checkerboard-layout {
- background-color: $bg_color;
- background-image: linear-gradient(45deg,
- transparentize(black, 0.9) 25%,
- transparent 25%,
- transparent 75%,
- transparentize(black, 0.9) 75%,
- transparentize(black, 0.9)),
- linear-gradient(45deg,
- transparentize(black, 0.9) 25%,
- transparent 25%,
- transparent 75%,
- transparentize(black, 0.9) 75%,
- transparentize(black, 0.9));
- background-size: 24px 24px;
- background-position: 0 0, 12px 12px
- }
- .checkboard-layout .item {
- background-color: $fg_color;
- }
- /*********
- * Avatar *
- *********/
- .avatar {
- border: 1px solid transparentize(#000, 0.77);
- border-radius: 50%;
- box-shadow:
- inset 0 0 0 1px transparentize(#fff, 0.95),
- inset 0 1px 0 0 transparentize(#fff, 0.55),
- inset 0 -1px 0 0 transparentize(#fff, 0.85),
- 0 1px 3px transparentize(#000, 0.88),
- 0 1px 2px transparentize(#000, 0.77);
- }
- /**level bars**/
- .sidebar.source-list.view {
- &.level-bar {
- &, &:selected, &:selected:focus {
- background: linear-gradient(transparentize(#fff, 0.86), transparentize(#fff, 0.86)) ;
- border: 1px solid transparentize(black, 0.86);
- box-shadow: 0 1px 0 transparentize(#000, 0.75);
- border-radius: 2px;
- }
- }
- &.fill-block {
- border: none;
- &, &:hover, &:selected, &:selected:focus {
- background: linear-gradient($selected_bg_color, $selected_bg_color);
- }
- }
- }
- /**************************
- * Colors in context menu *
- **************************/
- checkbutton.color-button {
- border: 1px solid $borders_color;
- border-radius: 100px;
- background-clip: border-box;
- padding: 0;
- margin: 2px 1px;
- > check {
- -gtk-icon-source: none;
- background: none;
- margin-right: 0;
- padding: 2px;
- }
- &.none {
- > check {
- background-color: transparent;
- border-radius: 100px;
- -gtk-icon-source: -gtk-icontheme("close-symbolic");
- }
- }
- }
- radiobutton.color-button {
- > radio {
- -gtk-icon-source: none;
- margin-right: 0;
- border: 1px solid rgba(black, 0.15);
- border-radius: 100px;
- background-clip: border-box;
- }
- &:active > radio {
- border: 1px solid rgba(black, 0.35);
- }
- }
- .color-button {
- check,
- check:checked,
- radio,
- radio:checked, {
- background-image: none;
- border: 1px solid rgba(black, 0.2);
- border-radius: 50%;
- color: $base_color;
- -gtk-icon-source: -gtk-icontheme("check-active-symbolic");
- }
- &.red check,
- &.red radio,
- &.strawberry check,
- &.strawberry radio {
- background-color: #{'@STRAWBERRY_300'};
- -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'};
- }
- &.orange check,
- &.orange radio {
- background-color: #{'@ORANGE_300'};
- -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'};
- }
- &.yellow check,
- &.yellow radio,
- &.banana check,
- &.banana radio {
- background-color: #{'@BANANA_500'};
- -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'};
- }
- &.green check,
- &.green radio,
- &.lime check,
- &.lime radio {
- background-color: #{'@LIME_500'};
- -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'};
- }
- &.blue check,
- &.blue radio,
- &.blueberry check,
- &.blueberry radio {
- background-color: #{'@BLUEBERRY_500'};
- -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'};
- }
- &.purple check,
- &.purple radio,
- &.grape check,
- &.grape radio {
- background-color: #{'@GRAPE_500'};
- -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'};
- }
- &.brown check,
- &.brown radio,
- &.cocoa check,
- &.cocoa radio {
- background-color: #{'@COCOA_300'};
- -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'};
- }
- &.mint check,
- &.mint radio {
- background-color: #{'@MINT_500'};
- -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'};
- }
- &.pink check,
- &.pink radio,
- &.bubblegum check,
- &.bubblegum radio {
- background-color: #{'@BUBBLEGUM_500'};
- -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'};
- }
- &.slate check,
- &.slate radio {
- background-color: #{'@SLATE_300'};
- -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'};
- }
- &.auto radio {
- background-image: url("assets/color-button-auto.png");
- background-position: -1px -1px;
- background-repeat: no-repeat;
- background-size: calc(100% + 2px);
- }
- }
|